@_unit/unit 1.0.71 → 1.0.73

package/lib/system/platform/component/app/Editor/Component.js

@@ -1604,9 +1604,11 @@ class Editor_ extends element_1.Element {
         this._search_start_unit_plugs = {};
         this._search_start_unit_data = {};
         this._search_start_unit_parent_id = null;
-        this._search_start_unit_index = null;
+        this._search_start_unit_parent_slot_name = null;
+        this._search_start_unit_parent_index = null;
         this._search_start_graph_unit_spec = null;
-        this._search_start_component_index = null;
+        this._search_start_unit_children = [];
+        this._search_start_unit_children_slot_map = {};
         this._search_unit_id = null;
         this._search_unit_spec_id = null;
         this._search_unit_graph_position = null;
@@ -1670,7 +1672,7 @@ class Editor_ extends element_1.Element {
         this._blue_drag_hover_merge_swap = {};
         this._animating_enter_fullwindow = false;
         this._animating_sub_component_fullwindow = new Set();
-        this._animating_sub_component_base_id = new Set();
+        this._animating_sub_component_transfer = new Set();
         this._abort_sub_component_enter_base_animation = {};
         this._abort_sub_component_leave_base_animation = {};
         this._abort_sub_component_base_animation = {};
@@ -1962,8 +1964,8 @@ class Editor_ extends element_1.Element {
                         specs: {},
                     };
                     const center_of_screen = position !== null && position !== void 0 ? position : this._jiggle_world_screen_center();
-                    this._add_unit(new_unit_id, bundle, null, null, position, {}, center_of_screen);
-                    this._sim_add_sub_component(new_unit_id, undefined, undefined, undefined, undefined, image);
+                    this._add_unit(new_unit_id, bundle, null, null, null, position, {}, center_of_screen);
+                    this._sim_add_sub_component(new_unit_id, undefined, undefined, undefined, image);
                     this._connect_sub_component(new_unit_id);
                     image.onload = null;
                 };
@@ -2000,7 +2002,7 @@ class Editor_ extends element_1.Element {
                 specs: {},
             };
             const center_of_screen = position !== null && position !== void 0 ? position : this._jiggle_world_screen_center();
-            this._add_unit(new_unit_id, bundle, null, null, position, {}, center_of_screen);
+            this._add_unit(new_unit_id, bundle, null, null, null, position, {}, center_of_screen);
             this._sim_add_sub_component(new_unit_id);
             this._connect_sub_component(new_unit_id);
         };
@@ -2055,8 +2057,8 @@ class Editor_ extends element_1.Element {
                     specs: {},
                 };
                 const center_of_screen = position !== null && position !== void 0 ? position : this._jiggle_world_screen_center();
-                this._add_unit(new_unit_id, bundle, null, null, position, {}, center_of_screen);
-                this._sim_add_sub_component(new_unit_id, undefined, {}, undefined, undefined, element);
+                this._add_unit(new_unit_id, bundle, null, null, null, position, {}, center_of_screen);
+                this._sim_add_sub_component(new_unit_id, undefined, {}, undefined, element);
                 this._connect_sub_component(new_unit_id);
                 element.oncanplaythrough = null;
             };
@@ -2899,7 +2901,7 @@ class Editor_ extends element_1.Element {
         this.getZoom = () => {
             return this._zoom;
         };
-        this._dispatch_add_unit_action = (unit_id, unit) => {
+        this._make_add_unit_action = (unit_id, unit) => {
             const position = this._get_node_position(unit_id);
             const pin_position = this._get_unit_pin_position(unit_id);
             const is_component = this._is_unit_component(unit_id);
@@ -2909,25 +2911,24 @@ class Editor_ extends element_1.Element {
             const layout_parent_id = is_component
                 ? this._spec_get_sub_component_parent_id(unit_id)
                 : null;
+            const layout_slot = is_component
+                ? this._spec_get_sub_component_slot_name(unit_id)
+                : null;
             const layout_index = is_component
-                ? this._get_sub_component_index(unit_id)
+                ? this._spec_get_sub_component_index(unit_id)
                 : null;
             const layout_children = is_component
                 ? this._spec_get_sub_component_children(unit_id)
                 : null;
             const layout_children_slot = is_component
-                ? this._get_sub_component_children_slot(unit_id)
+                ? this._spec_get_sub_component_children_slot(unit_id)
                 : null;
             const bundle = (0, clone_1.clone)({ unit });
-            this._dispatch_action((0, G_1.makeAddUnitAction)(unit_id, bundle, {}, {}, layout_parent_id, layout_index, layout_children, layout_children_slot, position, pin_position, layout_position));
-        };
-        this._dispatch_swap_unit_action = (unit_id, unit_bundle, unit_merges, unit_plugs, unit_parent_id, unit_index, unit_children, unit_children_slot, new_unit_id, new_unit_bundle, new_unit_merges, new_unit_plugs, new_unit_parent_id, new_unit_index, new_unit_children, new_unit_children_slot) => {
-            const action = this._make_swap_unit_action(unit_id, unit_bundle, unit_merges, unit_plugs, unit_parent_id, unit_index, unit_children, unit_children_slot, new_unit_id, new_unit_bundle, new_unit_merges, new_unit_plugs, new_unit_parent_id, new_unit_index, new_unit_children, new_unit_children_slot);
-            this._dispatch_action(action);
+            return (0, G_1.makeAddUnitAction)(unit_id, bundle, {}, {}, layout_parent_id, layout_slot, layout_index, layout_children, layout_children_slot, position, pin_position, layout_position);
         };
-        this._make_swap_unit_action = (unit_id, unit_bundle, unit_merges, unit_plugs, unit_parent_id, unit_index, unit_children, unit_children_slot, new_unit_id, new_unit_bundle, new_unit_merges, new_unit_plugs, new_unit_parent_id, new_unit_index, new_unit_children, new_unit_children_slot) => {
-            const remove_unit_actions = (0, G_1.makeRemoveUnitAction)(unit_id, unit_bundle, unit_merges, unit_plugs, unit_parent_id, unit_index, unit_children, unit_children_slot, null, null, null);
-            const add_unit_action = (0, G_1.makeAddUnitAction)(new_unit_id, new_unit_bundle, new_unit_merges, new_unit_plugs, new_unit_parent_id, new_unit_index, new_unit_children, new_unit_children_slot, undefined, undefined, undefined);
+        this._make_swap_unit_action = (unit_id, unit_bundle, unit_merges, unit_plugs, unit_parent_id, unit_parent_slot, unit_index, unit_children, unit_children_slot, new_unit_id, new_unit_bundle, new_unit_merges, new_unit_plugs, new_unit_parent_id, new_unit_parent_slot, new_unit_index, new_unit_children, new_unit_children_slot) => {
+            const remove_unit_actions = (0, G_1.makeRemoveUnitAction)(unit_id, unit_bundle, unit_merges, unit_plugs, unit_parent_id, unit_parent_slot, unit_index, unit_children, unit_children_slot, null, null, null);
+            const add_unit_action = (0, G_1.makeAddUnitAction)(new_unit_id, new_unit_bundle, new_unit_merges, new_unit_plugs, new_unit_parent_id, new_unit_parent_slot, new_unit_index, new_unit_children, new_unit_children_slot, undefined, undefined, undefined);
             const actions = [remove_unit_actions, add_unit_action];
             return (0, G_1.makeBulkEditAction)(actions);
         };
@@ -2952,16 +2953,19 @@ class Editor_ extends element_1.Element {
             const layout_parent_id = is_component
                 ? this._spec_get_sub_component_parent_id(unit_id)
                 : null;
+            const layout_slot = is_component
+                ? this._spec_get_sub_component_slot_name(unit_id)
+                : null;
             const layout_index = is_component
-                ? this._get_sub_component_index(unit_id)
+                ? this._spec_get_sub_component_index(unit_id)
                 : null;
             const layout_children = is_component
                 ? this._spec_get_sub_component_children(unit_id)
                 : null;
             const layout_children_slot = is_component
-                ? this._get_sub_component_children_slot(unit_id)
+                ? this._spec_get_sub_component_children_slot(unit_id)
                 : null;
-            return (0, clone_1.clone)((0, G_1.makeRemoveUnitAction)(unit_id, bundle, includeMerges ? merges : undefined, includePlugs ? plugs : undefined, layout_parent_id, layout_index, layout_children, layout_children_slot, position, pin_position, layout_position));
+            return (0, clone_1.clone)((0, G_1.makeRemoveUnitAction)(unit_id, bundle, includeMerges ? merges : undefined, includePlugs ? plugs : undefined, layout_parent_id, layout_slot, layout_index, layout_children, layout_children_slot, position, pin_position, layout_position));
         };
         this._dispatch_action_remove_unit = (unit_id) => {
             const action = this._make_remove_unit_action(unit_id);
@@ -2990,6 +2994,10 @@ class Editor_ extends element_1.Element {
         this._spec_get_sub_component_children = (sub_component_id) => {
             return (0, component_2.getSubComponentChildren)(this._spec, sub_component_id);
         };
+        this._spec_get_sub_component_children_count = (sub_component_id) => {
+            const children = this._spec_get_sub_component_children(sub_component_id);
+            return children.length;
+        };
         this._spec_add_unit = (unitId, unit, specs, register = true, deep = true) => {
             // console.log('Graph', '_spec_add_unit', unitId, unit)
             const { parent } = this.$props;
@@ -3006,12 +3014,12 @@ class Editor_ extends element_1.Element {
             const mirrored_spec = (0, clone_1.clone)(spec);
             setSpec(spec.id, mirrored_spec);
         };
-        this._spec_append_component = (parent_id, unit_id, sub_component_spec = { children: [] }) => {
+        this._spec_append_component = (parent_id, unit_id, slot_name, sub_component_spec = { children: [] }) => {
             // console.log('Graph', '_spec_append_component', parent_id, id)
             this._spec.component = this._spec.component || { subComponents: {} };
             (0, component_1.setSubComponent)({ unitId: unit_id, subComponent: sub_component_spec }, this._spec.component);
             if (parent_id) {
-                (0, component_1.appendSubComponentChild)({ parentId: parent_id, childId: unit_id }, this._spec.component);
+                (0, component_1.appendSubComponentChild)({ parentId: parent_id, childId: unit_id, slotName: slot_name }, this._spec.component);
             }
             else {
                 (0, component_1.appendRoot)({ childId: unit_id }, this._spec.component);
@@ -3318,7 +3326,6 @@ class Editor_ extends element_1.Element {
             description.$element.style.height = `${height + 3}px`;
         };
         this._sim_add_unit_core = (unit_id, unit, position, init_size = {}) => {
-            // console.log('Graph', '_sim_add_core', unit_id, unit, position)
             var _a, _b, _c, _d;
             const { classes } = this.$system;
             const { config, specs, getSpec } = this.$props;
@@ -3807,11 +3814,11 @@ class Editor_ extends element_1.Element {
             if (this._tree_layout) {
                 const layout_core = this._layout_core[unit_id];
                 this._listen_layout_core(unit_id, layout_core);
+                this._move_core_content_graph_to_layout(unit_id);
                 if (parent_id && !this._layout_path.includes(parent_id)) {
                     //
                 }
                 else {
-                    this._move_core_content_graph_to_layout(unit_id);
                     this._show_layout_core(unit_id);
                 }
             }
@@ -4040,25 +4047,24 @@ class Editor_ extends element_1.Element {
             }
         };
         this._search_adding_unit = false;
-        this._sim_add_sub_component = (unit_id, sub_component, sub_sub_component_map = {}, at, add_to_parent = true, element = undefined) => {
+        this._sim_add_sub_component = (unit_id, sub_component, sub_sub_component_map = {}, add_to_parent = true, element = undefined) => {
             // console.log(
             //   'Graph',
             //   '_sim_add_unit_component',
             //   unit_id,
             //   sub_component_map,
-            //   at,
             //   add_to_parent
             // )
             this._mem_add_unit_component(unit_id, sub_component, sub_sub_component_map, element);
             if (add_to_parent) {
-                this._sim_add_sub_component_to_parent(unit_id, at);
+                this._sim_add_sub_component_to_parent(unit_id);
             }
         };
-        this._sim_add_sub_component_to_parent = (unit_id, at) => {
+        this._sim_add_sub_component_to_parent = (unit_id) => {
             // console.log('Graph', '_sim_add_sub_component_to_parent', unit_id)
             this._mem_add_unit_component_parent(unit_id);
             if (this._in_component_control) {
-                this._place_sub_component(unit_id, at);
+                this._place_sub_component(unit_id);
             }
         };
         this._set_sub_component_index = (sub_component_id, i) => {
@@ -4115,8 +4121,8 @@ class Editor_ extends element_1.Element {
                 const parent = this._get_sub_component(parent_id);
                 if (!parent.$parentRoot.includes(sub_component)) {
                     parent.pushParentRoot(sub_component, 'default');
+                    this._mem_layout_push_parent_root(parent_id, unit_id, 'default');
                 }
-                this._mem_layout_push_parent_root(parent_id, unit_id, 'default');
             }
             else {
                 if (!this._component.$root.includes(sub_component)) {
@@ -4323,7 +4329,7 @@ class Editor_ extends element_1.Element {
             newSpec(new_spec, new_spec_id);
             const unit_data = this._get_unit_data(unit_id);
             const { valid_pin_match, merged_pin_ids, merge_pin_index, exposed_pin_ids, exposed_pin_index, } = this._generate_identity_matches(unit_id);
-            this._state_swap_unit(unit_id, new_unit_id, new_spec, valid_pin_match, merged_pin_ids, merge_pin_index, exposed_pin_ids, exposed_pin_index);
+            this._state_swap_unit(unit_id, new_unit_id, new_spec, valid_pin_match, merged_pin_ids, merge_pin_index, exposed_pin_ids, exposed_pin_index, null, null, null, null, null);
             (0, IOOf_1.forIOObjKV)(unit_data, (type, pin_id, pin_data) => {
                 const pin_node_id = (0, id_1.getPinNodeId)(new_unit_id, type, pin_id);
                 this._graph_debug_set_pin_data_tree(pin_node_id, pin_data);
@@ -5322,11 +5328,20 @@ class Editor_ extends element_1.Element {
                 data: {},
                 ref: {},
             },
-        }, next_sub_component_index) => {
-            // console.log('Graph', '_sim_swap_unit', {
-            //   merged_pin_ids,
+        }, next_sub_component_parent_id, next_sub_component_parent_slot_name, next_sub_component_parent_index, next_sub_component_children, next_sub_component_children_slot_map) => {
+            // console.log('Graph', '_state_swap_unit', {
+            //   unit_id,
+            //   new_unit_id,
+            //   new_unit_spec,
             //   valid_pin_matches,
+            //   merged_pin_ids,
             //   exposed_pin_ids,
+            //   exposed_pin_index,
+            //   next_sub_component_parent_id,
+            //   next_sub_component_parent_index,
+            //   next_sub_component_parent_slot_name,
+            //   next_sub_component_children,
+            //   next_sub_component_children_slot_map,
             // })
             var _a;
             const { specs } = this.$props;
@@ -5349,11 +5364,6 @@ class Editor_ extends element_1.Element {
             const unit = this._get_unit(unit_id);
             const unit_spec = this._get_unit_spec(unit_id);
             const { inputs: unit_inputs = {}, outputs: unit_outputs = {} } = unit_spec;
-            const is_component = this._is_unit_component(unit_id);
-            let component_index;
-            if (is_component) {
-                component_index = this._get_sub_component_index(unit_id);
-            }
             const pin_bag = {
                 input: (0, clone_1.clone)(unit_inputs),
                 output: (0, clone_1.clone)(unit_outputs),
@@ -5523,6 +5533,14 @@ class Editor_ extends element_1.Element {
             const is_unit_component = this._is_unit_component(unit_id);
             const unit_parent_id = (is_unit_component && this._spec_get_sub_component_parent_id(unit_id)) ||
                 null;
+            const unit_parent_index = (is_unit_component && this._spec_get_sub_component_index(unit_id)) || null;
+            const unit_parent_slot_name = (is_unit_component && this._spec_get_sub_component_slot_name(unit_id)) ||
+                null;
+            const unit_children = (is_unit_component && this._spec_get_sub_component_children(unit_id)) ||
+                null;
+            const unit_children_slot_map = (is_unit_component &&
+                this._spec_get_sub_component_children_slot(unit_id)) ||
+                null;
             const is_swap_unit_component = (0, util_1.isComponentSpec)(new_unit_spec);
             if (is_unit_component && this._search_unit_id !== unit_id) {
                 this._disconnect_sub_component(unit_id);
@@ -5547,18 +5565,25 @@ class Editor_ extends element_1.Element {
             if (is_unit_component && is_swap_unit_component) {
                 (0, object_1.deepSet)(graph_unit_spec, ['metadata', 'component'], (0, object_1.deepGetOrDefault)(unit, ['metadata', 'component'], undefined));
             }
-            let next_sub_component_parent_id = (is_swap_unit_component && unit_parent_id) || null;
-            let next_sub_component_parent_index = (_a = (is_unit_component &&
-                is_swap_unit_component &&
-                this._get_sub_component_index(unit_id))) !== null && _a !== void 0 ? _a : null;
+            next_sub_component_parent_id =
+                next_sub_component_parent_id !== null && next_sub_component_parent_id !== void 0 ? next_sub_component_parent_id : ((is_swap_unit_component && unit_parent_id) || null);
+            next_sub_component_parent_index =
+                (_a = next_sub_component_parent_index !== null && next_sub_component_parent_index !== void 0 ? next_sub_component_parent_index : (is_unit_component && is_swap_unit_component && unit_parent_index)) !== null && _a !== void 0 ? _a : null;
+            next_sub_component_parent_slot_name =
+                next_sub_component_parent_slot_name !== null && next_sub_component_parent_slot_name !== void 0 ? next_sub_component_parent_slot_name : ((is_swap_unit_component && unit_parent_slot_name) || null);
+            next_sub_component_children =
+                next_sub_component_children !== null && next_sub_component_children !== void 0 ? next_sub_component_children : ((is_swap_unit_component && unit_children) || []);
+            next_sub_component_children_slot_map =
+                next_sub_component_children_slot_map !== null && next_sub_component_children_slot_map !== void 0 ? next_sub_component_children_slot_map : ((is_swap_unit_component && unit_children_slot_map) || {});
             const bundle = (0, bundle_1.unitBundleSpec)(graph_unit_spec, specs);
             const should_unregister = unit_id !== this._search_unit_id && unit_spec.id !== bundle.unit.id;
             this._state_remove_unit(unit_id, should_unregister);
-            this._state_add_unit(new_unit_id, bundle, next_sub_component_parent_id, next_sub_component_parent_index, position, new_unit_pin_position, layout_position, {}, should_unregister);
-            if (this._is_unit_component(new_unit_id) &&
-                this._search_unit_id !== unit_id) {
-                this._sim_add_sub_component(new_unit_id, undefined, {}, next_sub_component_index, true);
-                this._refresh_layout_node_target_position(unit_parent_id);
+            this._state_add_unit(new_unit_id, bundle, next_sub_component_parent_id, next_sub_component_parent_slot_name, next_sub_component_parent_index, position, new_unit_pin_position, layout_position, {}, should_unregister);
+            if (this._is_unit_component(new_unit_id)) {
+                if (this._search_unit_id !== unit_id) {
+                    this._sim_add_sub_component(new_unit_id, undefined, {}, true);
+                    this._refresh_layout_node_target_position(unit_parent_id);
+                }
             }
             const replace_exposed = (kind, tag) => {
                 var _a;
@@ -9919,20 +9944,20 @@ class Editor_ extends element_1.Element {
                 this._set_layout_search_offset_y(current_layer_id, offset_y);
             }
         };
-        this._state_swap_search_unit = (id, next_unit_id) => {
-            if (this._search_start_spec_id !== id) {
+        this._state_swap_search_unit = (unit_id, next_unit_id) => {
+            if (this._search_start_spec_id !== unit_id) {
                 this._search_unit_spec_id_changed = true;
             }
             if (this._mode === 'add' ||
                 this._mode === 'multiselect' ||
                 this._mode === 'remove') {
-                this._state_swap_add_search_unit(id);
+                this._state_swap_add_search_unit(unit_id);
             }
             else if (this._mode === 'change') {
-                this._state_swap_change_search_unit(id, next_unit_id);
+                this._state_swap_change_search_unit(unit_id, next_unit_id);
             }
             else if (this._mode === 'data') {
-                this._state_swap_data_search_unit(id);
+                this._state_swap_data_search_unit(unit_id);
             }
         };
         this._state_swap_add_search_unit = (id) => {
@@ -10010,7 +10035,7 @@ class Editor_ extends element_1.Element {
                         },
                     };
                     const spec = getSpec(spec_id);
-                    const { next_swap_merges, next_merged_pin_ids, next_ref_merge_id, next_ref_merge, next_merged_pin_index, next_exposed_pin_index, } = this._state_swap_unit(search_unit_id, new_unit_id, spec, valid_pin_match, this._search_unit_merged_pin_ids, this._search_unit_merged_pin_index, this._search_unit_exposed_pin_ids, this._search_unit_exposed_pin_index, this._search_start_component_index);
+                    const { next_swap_merges, next_merged_pin_ids, next_ref_merge_id, next_ref_merge, next_merged_pin_index, next_exposed_pin_index, } = this._state_swap_unit(search_unit_id, new_unit_id, spec, valid_pin_match, this._search_unit_merged_pin_ids, this._search_unit_merged_pin_index, this._search_unit_exposed_pin_ids, this._search_unit_exposed_pin_index, this._search_start_unit_parent_id, this._search_start_unit_parent_slot_name, this._search_start_unit_parent_index, this._search_start_unit_children, this._search_start_unit_children_slot_map);
                     this._search_unit_id = new_unit_id;
                     this._search_unit_merges = next_swap_merges;
                     this._search_unit_merged_pin_ids = next_merged_pin_ids;
@@ -10170,8 +10195,13 @@ class Editor_ extends element_1.Element {
             let parent_id = null;
             const is_component = this._is_unit_component(unit_id);
             if (is_component) {
-                parent_id = this._get_sub_component_target_parent_id();
-                this._spec_append_component(parent_id, unit_id);
+                if (this._mode === 'change') {
+                    parent_id = this._search_start_unit_parent_id;
+                }
+                else {
+                    parent_id = this._get_sub_component_target_parent_id();
+                }
+                this._spec_append_component(parent_id, unit_id, 'default');
             }
             this._sim_add_unit(unit_id, unit_spec, position, {}, pin_position, parent_id, layout_position);
             this._show_core_description(unit_id);
@@ -10500,9 +10530,12 @@ class Editor_ extends element_1.Element {
             const search_start_unit_merges = this._search_start_unit_merges;
             const search_start_unit_plugs = this._search_start_unit_plugs;
             const search_start_unit_parent_id = this._search_start_unit_parent_id;
-            const search_start_unit_index = this._search_start_unit_index;
+            const search_start_unit_parent_slot_name = this._search_start_unit_parent_slot_name;
+            const search_start_unit_parent_index = this._search_start_unit_parent_index;
+            const search_start_unit_children = this._search_start_unit_children;
+            const search_start_unit_children_slot_map = this._search_start_unit_children_slot_map;
             const search_unit_id = this._search_unit_id;
-            // const search_spec_id = this._search_unit_spec_id
+            const actions = [];
             if (search_unit_id) {
                 this._refresh_unit_layer(search_unit_id);
                 if (this._mode === 'add' ||
@@ -10523,30 +10556,18 @@ class Editor_ extends element_1.Element {
                         if (this._tree_layout) {
                             parent_id = this._get_current_layout_layer_id();
                         }
-                        const actions = [
-                            (0, G_1.makeAddUnitAction)(search_unit_id, search_unit_bundle, null, null, parent_id, null, null, null, null, null, null),
-                        ];
-                        const bulk_action = (0, G_1.makeBulkEditAction)(actions);
-                        this._dispatch_action(bulk_action);
-                        this._pod.$bulkEdit({ actions, fork, bubble });
-                        this._download_pod_data();
+                        actions.push((0, G_1.makeAddUnitAction)(search_unit_id, search_unit_bundle, null, null, parent_id, null, null, null, null, null, null));
                         should_add_component = true;
                     }
                     else if (this._mode === 'change') {
                         if (this._search_start_unit_id) {
-                            const is_component = (0, util_1.isComponentId)(specs, search_start_spec_id);
                             const search_start_unit_bundle = (0, bundle_1.unitBundleSpec)(this._search_start_graph_unit_spec, specs);
                             const search_unit_merges = (0, clone_1.clone)(this._get_unit_merges(search_unit_id));
                             const search_unit_plugs = (0, clone_1.clone)(this._get_unit_plugs(search_unit_id));
-                            this._dispatch_swap_unit_action(search_start_unit_id, search_start_unit_bundle, search_start_unit_merges, search_start_unit_plugs, search_start_unit_parent_id, search_start_unit_index, null, null, search_unit_id, search_unit_bundle, search_unit_merges, search_unit_plugs, search_start_unit_parent_id, search_start_unit_index, null, null);
-                            if (did_spec_id_change) {
-                                this._pod_remove_unit(search_start_unit_id, is_component);
-                                this._pod_add_unit(search_unit_id, search_unit_bundle);
-                            }
+                            actions.push(this._make_swap_unit_action(search_start_unit_id, search_start_unit_bundle, search_start_unit_merges, search_start_unit_plugs, search_start_unit_parent_id, search_start_unit_parent_slot_name, search_start_unit_parent_index, search_start_unit_children, search_start_unit_children_slot_map, search_unit_id, search_unit_bundle, search_unit_merges, search_unit_plugs, search_start_unit_parent_id, search_start_unit_parent_slot_name, search_start_unit_parent_index, search_start_unit_children, search_start_unit_children_slot_map));
                         }
                         else {
-                            this._dispatch_add_unit_action(search_unit_id, unit);
-                            this._pod_add_unit(search_unit_id, search_unit_bundle);
+                            actions.push(this._make_add_unit_action(search_unit_id, unit));
                         }
                         this._setup_pod(this._pod);
                         should_add_component = this._search_unit_spec_id_changed;
@@ -10579,10 +10600,10 @@ class Editor_ extends element_1.Element {
                                     type = 'output';
                                     pin_id = (0, object_1.getObjSingleKey)(merge_unit.output || {});
                                 }
-                                this.__pod_add_pin_to_merge(merge_id, search_unit_id, type, pin_id);
+                                actions.push((0, G_1.makeAddPinToMergeAction)(merge_id, search_unit_id, type, pin_id));
                             }
                             else {
-                                this._pod_add_merge(merge_id, merge);
+                                actions.push((0, G_1.makeAddMergeAction)(merge_id, merge));
                             }
                             if (!this._is_merge_ref(merge_node_id)) {
                                 this._refresh_merge_pin_pin_color(merge_node_id, 'input');
@@ -10590,13 +10611,18 @@ class Editor_ extends element_1.Element {
                             }
                         }
                         if (this._search_unit_ref_merge_id) {
-                            this._pod_add_merge(this._search_unit_ref_merge_id, this._search_unit_ref_merge);
+                            actions.push((0, G_1.makeAddMergeAction)(this._search_unit_ref_merge_id, this._search_unit_ref_merge));
                         }
                     }
+                    const bulk_action = (0, G_1.makeBulkEditAction)(actions);
+                    this._dispatch_action(bulk_action);
+                    this._pod.$bulkEdit({ actions, fork, bubble });
+                    this._download_pod_data();
                     if (should_add_component) {
                         if (this._is_unit_component(search_unit_id)) {
                             this._sim_add_sub_component(search_unit_id);
                             this._connect_sub_component(search_unit_id);
+                            this._search_change_return_start_children(search_unit_id, search_start_unit_children, search_start_unit_children_slot_map);
                         }
                     }
                     this._refresh_unit_compatibility(search_unit_id);
@@ -10623,6 +10649,24 @@ class Editor_ extends element_1.Element {
                 this._refresh_datum_color(datum_node_id);
             }
         };
+        this._search_change_return_start_children = (search_unit_id, search_start_unit_children, search_start_unit_children_slot_map) => {
+            if (search_start_unit_children) {
+                const parent_map = this._get_sub_components_parent_map(search_start_unit_children);
+                const slot_map = this._get_sub_components_slot_map(search_start_unit_children);
+                this._on_move_sub_component_root({
+                    prevParentIdMap: parent_map,
+                    prevSlotMap: slot_map,
+                    parentId: search_unit_id,
+                    children: search_start_unit_children,
+                    slotMap: search_start_unit_children_slot_map,
+                    index: 0,
+                }, true, () => { });
+                if (this._tree_layout) {
+                    this._refresh_current_layout_node_target_position();
+                    this._animate_all_current_layout_layer_node();
+                }
+            }
+        };
         this._shift_search = () => {
             // console.log('Graph', '_shift_search')
             if (this._is_shift_pressed() || this._mode === 'multiselect') {
@@ -10750,7 +10794,7 @@ class Editor_ extends element_1.Element {
             this._search_start_unit_plugs = null;
             this._search_start_unit_data = null;
             this._search_start_graph_unit_spec = null;
-            this._search_start_component_index = null;
+            this._search_start_unit_parent_index = null;
             this._search_unit_spec_id_changed = false;
             this._stop_zoom_target_animation();
         };
@@ -10800,6 +10844,8 @@ class Editor_ extends element_1.Element {
             const search_unit_start_data = this._search_start_unit_data;
             const search_unit_datum_node_id = this._search_unit_datum_node_id;
             const search_unit_spec_id_changed = this._search_unit_spec_id_changed;
+            const search_start_unit_children = this._search_start_unit_children;
+            const search_start_unit_children_slot_map = this._search_start_unit_children_slot_map;
             if (!search_adding_unit) {
                 if (search_unit_id) {
                     if (this._mode === 'add' ||
@@ -10816,9 +10862,10 @@ class Editor_ extends element_1.Element {
                                 this._connect_sub_component(search_start_unit_id);
                             }
                             (0, IOOf_1.forIOObjKV)(search_unit_start_data, (type, pin_id, data) => {
-                                const pin_node_id = (0, id_1.getPinNodeId)(search_unit_id, type, pin_id);
+                                const pin_node_id = (0, id_1.getPinNodeId)(search_start_unit_id, type, pin_id);
                                 this._graph_debug_set_pin_data_tree(pin_node_id, data);
                             });
+                            this._search_change_return_start_children(search_start_unit_id, search_start_unit_children, search_start_unit_children_slot_map);
                         }
                     }
                 }
@@ -11350,16 +11397,22 @@ class Editor_ extends element_1.Element {
             const ordered_selected_sub_component_ids = this._order_sub_component_ids(selected_sub_component_ids);
             this._enter_fullwindow(animate, ordered_selected_sub_component_ids);
         };
-        this._get_sub_component_index = (sub_component_id) => {
-            return (0, component_2.getSubComponentParentIndex)(this._spec, sub_component_id);
-        };
-        this._get_sub_component_root_index = (sub_component_id) => {
+        this._spec_get_sub_component_root_index = (sub_component_id) => {
             return (0, component_2.getSubComponentRootIndex)(this._spec, sub_component_id);
         };
         this._spec_get_sub_component_parent_root_index = (sub_component_id) => {
             const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
             return (0, component_2.getSubComponentParentRootIndex)(this._spec, parent_id, sub_component_id);
         };
+        this._spec_get_sub_component_index = (sub_component_id) => {
+            const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
+            if (parent_id) {
+                return this._spec_get_sub_component_parent_root_index(sub_component_id);
+            }
+            else {
+                return this._spec_get_sub_component_root_index(sub_component_id);
+            }
+        };
         this._get_sub_component_tree_index = (sub_component_id) => {
             const parent_sub_component_id = this._spec_get_sub_component_parent_id(sub_component_id);
             if (parent_sub_component_id) {
@@ -11370,7 +11423,7 @@ class Editor_ extends element_1.Element {
                 return index;
             }
             else {
-                return this._get_sub_component_root_index(sub_component_id);
+                return this._spec_get_sub_component_root_index(sub_component_id);
             }
         };
         this._get_sub_component_frame_context = (sub_component_id) => {
@@ -11518,13 +11571,29 @@ class Editor_ extends element_1.Element {
                 }
             }
         };
-        this._place_sub_component = (sub_component_id, at) => {
+        this._place_sub_component = (sub_component_id) => {
             // console.log('Graph', '_place_sub_component', sub_component_id)
             if (this._is_all_fullwindow) {
                 this._fullwindow_component_set.add(sub_component_id);
                 (0, array_1.push)(this._fullwindow_component_ids, sub_component_id);
+                const at = this._spec_get_sub_component_parent_root_index(sub_component_id);
                 this._couple_sub_component(sub_component_id, at);
             }
+            if (this._tree_layout) {
+                const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
+                if (!parent_id || this._is_layout_parent_visible(sub_component_id)) {
+                    this._enter_sub_component_frame(sub_component_id);
+                }
+                else {
+                    if (parent_id) {
+                        const at = this._spec_get_sub_component_parent_root_index(sub_component_id);
+                        this._couple_sub_component(sub_component_id, at);
+                    }
+                    else {
+                        this._enter_sub_component_frame(sub_component_id);
+                    }
+                }
+            }
             else {
                 this._enter_sub_component_frame(sub_component_id);
             }
@@ -12417,13 +12486,7 @@ class Editor_ extends element_1.Element {
         this._enter_tree_layout = () => {
             // console.log('Graph', '_enter_tree_layout')
             const { animate } = this._config();
-            const animating_sub_component_set = new Set();
-            for (const sub_component_id in this._component.$subComponent) {
-                const animating_sub_component = this._is_sub_component_animating(sub_component_id);
-                if (animating_sub_component) {
-                    animating_sub_component_set.add(sub_component_id);
-                }
-            }
+            const animating_sub_component_set = this._build_animating_sub_component_set();
             this._tree_layout = true;
             this._pointer_up_all_pressed_pointer_id();
             this._cancel_all_layout_parent_children_animation();
@@ -12455,22 +12518,19 @@ class Editor_ extends element_1.Element {
                 const visible = this._is_layout_component_layer_visible(sub_component_id);
                 const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
                 const children = this._spec_get_sub_component_children(sub_component_id);
-                const parent_visible = !parent_id || this._layout_path.includes(parent_id);
                 if (!visible && children.length > 0) {
-                    if (!this._animating_sub_component_base_id.has(sub_component_id)) {
+                    if (!this._is_sub_component_animating(sub_component_id)) {
                         for (const child_id of children) {
                             this._measure_sub_component_base(child_id);
                         }
                     }
                 }
-                if (parent_visible) {
-                    this._measure_sub_component_base(sub_component_id);
-                }
                 if (!animating_sub_component_set.has(sub_component_id)) {
+                    this._measure_sub_component_base(sub_component_id);
                     this._leave_sub_component_frame(sub_component_id);
-                    const sub_component_base = this._get_sub_component_base(sub_component_id);
+                    const sub_component_base = this._get_sub_component_root_base(sub_component_id);
                     const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
-                    const parent_layout_layer = this._get_layout_layer(parent_id);
+                    const parent_layout_layer = this._ensure_layout_layer(parent_id);
                     this._remove_sub_component_root_base(sub_component_id);
                     this._plug_sub_component_base(sub_component_id, sub_component_base, [], parent_layout_layer.foreground);
                 }
@@ -12503,7 +12563,8 @@ class Editor_ extends element_1.Element {
             // console.log('Graph', '_plug_leaf_frame', leaf_id, leaf_node)
             var _a, _b, _c;
             if (this._leaf_frame_active[leaf_id]) {
-                return;
+                this._unplug_leaf_frame(leaf_id);
+                this._leaf_frame_node[leaf_id] = leaf_node;
             }
             const { api: { text: { measureText }, }, } = this.$system;
             const { x, y, width, height, sx, sy, fontSize, opacity, color } = leaf_node;
@@ -12588,7 +12649,7 @@ class Editor_ extends element_1.Element {
                 }
                 else if (this._tree_layout) {
                     parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
-                    slot_name = this._get_sub_component_slot_name(sub_component_id);
+                    slot_name = this._spec_get_sub_component_slot_name(sub_component_id);
                     parent = this._get_sub_component(parent_id);
                 }
                 else if (this._is_fullwindow) {
@@ -12787,15 +12848,11 @@ class Editor_ extends element_1.Element {
             }
             return (0, callAll_1.callAll)(all_unlisten);
         };
-        this._plug_animate_sub_component_base = (sub_component_id, leaf_base, leaf_traits, leaf_layer, n1, callback) => {
-            return this._animate_sub_component_base(sub_component_id, leaf_base, leaf_traits, n1, callback);
-        };
         this._animate_sub_component_base = (sub_component_id, leaf_base, leaf_traits, n1, callback) => {
             // console.log('Graph', '_animate_sub_component_base', sub_component_id)
             const base_length = leaf_base.length;
             let i = 0;
             const all_unlisten = [];
-            this._animating_sub_component_base_id.add(sub_component_id);
             const leaf_ended = new Set();
             for (const leaf of leaf_base) {
                 const [leaf_path, leaf_comp] = leaf;
@@ -12822,10 +12879,9 @@ class Editor_ extends element_1.Element {
                     cancelAnimationFrame(frame);
                 });
             }
-            all_unlisten.push(() => {
-                this._animating_sub_component_base_id.delete(sub_component_id);
-            });
-            return (0, callAll_1.callAll)(all_unlisten);
+            const stop = (0, callAll_1.callAll)(all_unlisten);
+            this._abort_sub_component_base_animation[sub_component_id] = stop;
+            return stop;
         };
         this._cancel_enter_animation = () => {
             // console.log('Graph', '_cancel_enter_animation')
@@ -12975,6 +13031,15 @@ class Editor_ extends element_1.Element {
             }
             Promise.all(promises).then(callback);
         };
+        this._is_layout_parent_visible = (sub_component_id) => {
+            const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
+            if (!parent_id) {
+                return true;
+            }
+            const parent_fullwindow = this._is_sub_component_fullwindow(parent_id);
+            const parent_visible = !parent_fullwindow && this._layout_path.includes(parent_id);
+            return parent_visible;
+        };
         this._animate_enter_tree_layout = () => {
             // console.log('Graph', '_animate_enter_tree_layout')
             var _a, _b;
@@ -12988,6 +13053,7 @@ class Editor_ extends element_1.Element {
                 this._leaf_layer_offset_y = 0;
             }
             this._cancel_fullwindow_animation();
+            this._cancel_all_layout_parent_children_animation();
             this._cancel_all_sub_component_base_animation();
             this._cancel_enter_animation();
             let all_layout_opacity_animation_finished = false;
@@ -13007,6 +13073,7 @@ class Editor_ extends element_1.Element {
             const finish = () => {
                 (0, callAll_1.callAll)(all_stop)();
                 for (const sub_component_id of ordered_sub_component_ids) {
+                    this._cancel_layout_child_transfer_animation(sub_component_id);
                     this._cancel_sub_component_base_animation(sub_component_id);
                     this._unplug_sub_component_root_base_frame(sub_component_id);
                     this._append_sub_component_root_base(sub_component_id);
@@ -13052,7 +13119,7 @@ class Editor_ extends element_1.Element {
                     sub_component_count++;
                     const all_slot_children = {};
                     for (const child_id of children) {
-                        const slot_name = this._get_sub_component_slot_name(child_id);
+                        const slot_name = this._spec_get_sub_component_slot_name(child_id);
                         all_slot_children[slot_name] = all_slot_children[slot_name] || [];
                         all_slot_children[slot_name].push(child_id);
                     }
@@ -13077,8 +13144,6 @@ class Editor_ extends element_1.Element {
                     const sub_component_frame = this._get_sub_component_frame(sub_component_id);
                     const sub_component_frame_trait = (0, extractTrait_1.extractTrait)(sub_component_frame, measureText);
                     const sub_component_base = sub_component.getRootBase();
-                    const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
-                    const parent_layout_layer = this._get_layout_layer(parent_id);
                     let all_base = {};
                     let all_trait;
                     let all_leaf_count = {};
@@ -13157,7 +13222,6 @@ class Editor_ extends element_1.Element {
                             maybe_finish();
                         });
                         all_stop.push(stop);
-                        this._abort_sub_component_base_animation[sub_component_id] = stop;
                     }
                 }
             }
@@ -13176,7 +13240,7 @@ class Editor_ extends element_1.Element {
             if (!dont_plug_base) {
                 this._plug_sub_component_base(sub_component_id, leaf_base, leaf_traits, leaf_layer);
             }
-            const stop = this._plug_animate_sub_component_base(sub_component_id, leaf_base, leaf_traits, leaf_layer, (leaf_id) => {
+            const stop = this._animate_sub_component_base(sub_component_id, leaf_base, leaf_traits, (leaf_id) => {
                 const { $width, $height } = this.$context;
                 const layout_node = this._layout_node[sub_component_id];
                 const { x, y, width, height, color } = layout_node;
@@ -13219,7 +13283,6 @@ class Editor_ extends element_1.Element {
                         : sub_component_id;
                     delete this._leaf_target_trait[leaf_id];
                 }
-                delete this._abort_sub_component_parent_animation[sub_component_id];
             });
             this._abort_sub_component_parent_animation[sub_component_id] = stop;
             return stop;
@@ -13269,22 +13332,28 @@ class Editor_ extends element_1.Element {
                     (0, callAll_1.callAll)(all_stop)();
                     finished = true;
                     for (const sub_component_id of visible_root) {
+                        this._cancel_layout_parent_children_all_slot_animation(sub_component_id);
                         this._cancel_sub_component_base_animation(sub_component_id);
-                        delete this._abort_sub_component_base_animation[sub_component_id];
                         this._unplug_sub_component_root_base_frame(sub_component_id);
                         this._append_sub_component_root_base(sub_component_id);
                         this._enter_sub_component_frame(sub_component_id);
                     }
                     for (const sub_component_id of visible_parent_root) {
+                        this._cancel_layout_parent_children_all_slot_animation(sub_component_id);
+                        this._cancel_sub_component_base_animation(sub_component_id);
                         const all_slot_children = visible_parent_slot_children[sub_component_id];
                         for (const slot_name in all_slot_children) {
                             this._cancel_layout_parent_children_animation(sub_component_id, slot_name);
                             this._end_layout_sub_component_transfer_children_animation(sub_component_id, slot_name);
+                            const children = all_slot_children[slot_name];
+                            for (const child_id of children) {
+                                this._cancel_layout_child_transfer_animation(child_id);
+                            }
                         }
-                        delete this._abort_sub_component_base_animation[sub_component_id];
                         const children = this._spec_get_sub_component_children(sub_component_id);
                         for (const child_id of children) {
-                            delete this._abort_sub_component_base_animation[child_id];
+                            this._cancel_layout_child_transfer_animation(child_id);
+                            this._cancel_sub_component_base_animation(child_id);
                             this._enter_sub_component_frame(child_id);
                             this._append_sub_component_root_base(child_id);
                         }
@@ -13297,14 +13366,12 @@ class Editor_ extends element_1.Element {
                 }
                 const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
                 const children = this._spec_get_sub_component_children(sub_component_id);
-                const { foreground: leaf_layer } = this._get_sub_component_layout_layer(sub_component_id);
-                const leaf_traits = [];
                 if (!this._layout_path.includes(sub_component_id) &&
                     children.length > 0) {
                     visible_parent_root_slot_finished[sub_component_id] = 0;
                     const all_slot_children = {};
                     for (const child_id of children) {
-                        const slot_name = this._get_sub_component_slot_name(child_id);
+                        const slot_name = this._spec_get_sub_component_slot_name(child_id);
                         all_slot_children[slot_name] = all_slot_children[slot_name] || [];
                         all_slot_children[slot_name].push(child_id);
                     }
@@ -13346,8 +13413,7 @@ class Editor_ extends element_1.Element {
                         const leaf_node = this._leaf_frame_node[leaf_id];
                         leaf_node.opacity *= layer_opacity;
                     }
-                    this._plug_sub_component_base(sub_component_id, leaf_base, leaf_traits, leaf_layer);
-                    const stop = this._plug_animate_sub_component_base(sub_component_id, leaf_base, leaf_traits, leaf_layer, (leaf_id) => {
+                    const stop = this._animate_sub_component_base(sub_component_id, leaf_base, [], (leaf_id) => {
                         const { x, y } = this._get_node_screen_position(sub_component_id);
                         if (i === 0) {
                             const trait = this._get_graph_sub_component_node_trait(sub_component_id);
@@ -13383,7 +13449,6 @@ class Editor_ extends element_1.Element {
                         return true;
                     });
                     all_stop.push(stop);
-                    this._abort_sub_component_base_animation[sub_component_id] = stop;
                 }
             }
         };
@@ -13531,16 +13596,28 @@ class Editor_ extends element_1.Element {
             return { x, y };
         };
         this._is_sub_component_animating = (sub_component_id) => {
-            let animating_sub_component = !!(this._animating_sub_component_base_id.has(sub_component_id) ||
-                this._abort_sub_component_enter_base_animation[sub_component_id] ||
-                this._abort_sub_component_base_animation[sub_component_id]);
+            if (this._abort_sub_component_enter_base_animation[sub_component_id]) {
+                return true;
+            }
+            if (this._abort_sub_component_base_animation[sub_component_id]) {
+                return true;
+            }
+            if (this._animating_sub_component_transfer.has(sub_component_id)) {
+                return true;
+            }
+            if (this._abort_sub_component_parent_animation[sub_component_id]) {
+                return true;
+            }
             const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
             if (parent_id) {
-                animating_sub_component =
-                    animating_sub_component ||
-                        !!this._abort_sub_component_parent_animation[parent_id];
+                if (this._abort_sub_component_parent_animation[parent_id]) {
+                    return true;
+                }
+                if (this._layout_parent_children_animation_frame[parent_id] !== undefined) {
+                    return true;
+                }
             }
-            return animating_sub_component;
+            return false;
         };
         this._animate_zoom_opacity = (to) => {
             if (this._zoom_opacity_animation) {
@@ -13550,10 +13627,7 @@ class Editor_ extends element_1.Element {
                 this._zoom_opacity_animation = undefined;
             });
         };
-        this._leave_tree_layout = () => {
-            // console.log('Graph', '_leave_tree_layout')
-            const { animate } = this._config();
-            this._pointer_up_all_pressed_pointer_id();
+        this._build_animating_sub_component_set = () => {
             const animating_sub_component_set = new Set();
             for (const sub_component_id in this._component.$subComponent) {
                 const animating_sub_component = this._is_sub_component_animating(sub_component_id);
@@ -13561,10 +13635,18 @@ class Editor_ extends element_1.Element {
                     animating_sub_component_set.add(sub_component_id);
                 }
             }
+            return animating_sub_component_set;
+        };
+        this._leave_tree_layout = () => {
+            // console.log('Graph', '_leave_tree_layout')
+            const { animate } = this._config();
+            this._pointer_up_all_pressed_pointer_id();
+            const animating_sub_component_set = this._build_animating_sub_component_set();
             this._cancel_fullwindow_animation();
             this._cancel_all_sub_component_base_animation();
             this._cancel_all_layout_parent_children_animation();
             this._cancel_all_sub_component_parent_animation();
+            this._cancel_all_sub_component_parent_animation();
             this._tree_layout = false;
             if (animate) {
                 this._animate_zoom_opacity(1);
@@ -13593,8 +13675,23 @@ class Editor_ extends element_1.Element {
                 }
             }
             for (const sub_component_id in this._component.$subComponent) {
-                const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
                 const children = this._spec_get_sub_component_children(sub_component_id);
+                if (!this._layout_path.includes(sub_component_id) &&
+                    children.length > 0) {
+                    for (const child_id of children) {
+                        if (!animating_sub_component_set.has(child_id)) {
+                            this._remove_sub_component_parent_root(sub_component_id, child_id);
+                            this._remove_sub_component_root_base(child_id);
+                            const child = this._get_sub_component(child_id);
+                            if (child.$mounted) {
+                                child.unmount();
+                            }
+                        }
+                    }
+                }
+            }
+            for (const sub_component_id in this._component.$subComponent) {
+                const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
                 if (animate) {
                     if (!parent_id || this._layout_path.includes(parent_id)) {
                         const animating_sub_component = animating_sub_component_set.has(sub_component_id);
@@ -13605,15 +13702,9 @@ class Editor_ extends element_1.Element {
                         }
                     }
                 }
-                if (!this._layout_path.includes(sub_component_id) &&
-                    children.length > 0) {
-                    for (const child_id of children) {
-                        if (!this._animating_sub_component_base_id.has(child_id)) {
-                            this._remove_sub_component_parent_root(sub_component_id, child_id);
-                            this._remove_sub_component_root_base(child_id);
-                        }
-                    }
-                }
+                const leaf_base = this._get_sub_component_root_base(sub_component_id);
+                const { foreground: leaf_layer } = this._get_sub_component_layout_layer(sub_component_id);
+                this._plug_sub_component_base(sub_component_id, leaf_base, [], leaf_layer);
                 this._refresh_component_children_counter(sub_component_id);
                 this._unlisten_sub_component(sub_component_id);
                 this._move_core_content_layout_to_graph(sub_component_id);
@@ -14638,10 +14729,10 @@ class Editor_ extends element_1.Element {
             const merges_ = (0, util_1.remapUnitMerges)(merges, { [unit_id]: next_unit_id }, { [unit_id]: next_unit_pin_map });
             const plugs_ = (0, util_1.remapUnitPlugs)(plugs, next_unit_pin_map);
             actions.push(this._make_remove_unit_action(unit_id, undefined, true, true));
-            actions.push(this._make_add_unit_action(next_unit_id, class_bundle, merges_, plugs_));
+            actions.push(this._make_add_unit_bundle_action(next_unit_id, class_bundle, merges_, plugs_));
             const action = (0, G_1.makeBulkEditAction)(actions);
             this._remove_datum(datum_node_id);
-            this._state_swap_unit(unit_id, next_unit_id, class_spec, valid_pin_match, merged_pin_ids, merge_pin_index, exposed_pin_ids, exposed_pin_index);
+            this._state_swap_unit(unit_id, next_unit_id, class_spec, valid_pin_match, merged_pin_ids, merge_pin_index, exposed_pin_ids, exposed_pin_index, null, null, null, null, null);
             if (memory) {
                 this._set_unit_memory(next_unit_id, memory);
             }
@@ -17136,6 +17227,7 @@ class Editor_ extends element_1.Element {
         this._animate_sub_component_graph_leave = (sub_component_id, base, base_node, measure, callback) => {
             // console.log('Graph', '_animate_sub_component_graph_leave', base, base_node)
             return this._animate_sub_component_graph_move__template(sub_component_id, base, base_node, false, measure, () => {
+                this._cancel_sub_component_base_animation(sub_component_id);
                 this._unplug_sub_component_base_frame(sub_component_id);
                 this._compose_sub_component(sub_component_id);
                 this._append_sub_component_base(sub_component_id);
@@ -17155,7 +17247,7 @@ class Editor_ extends element_1.Element {
                 i++;
             }
             this._leave_sub_component_frame(sub_component_id);
-            if (this._animating_sub_component_base_id.has(sub_component_id)) {
+            if (this._is_sub_component_animating(sub_component_id)) {
                 //
             }
             else {
@@ -17269,8 +17361,10 @@ class Editor_ extends element_1.Element {
                 return;
             }
             const { datumId } = (0, id_1.segmentDatumNodeId)(datum_node_id);
-            const value = this._get_datum_value(datum_node_id);
-            removeData({ datumId, value });
+            if (this._has_node(datum_node_id)) {
+                const value = this._get_datum_value(datum_node_id);
+                removeData({ datumId, value });
+            }
         };
         this._action_buffer = [];
         this._action_buffer_cursor = -1;
@@ -17697,9 +17791,11 @@ class Editor_ extends element_1.Element {
             const unit_layout_position = geometry_1.NULL_VECTOR;
             this._spec_add_unit(new_unit_id, new_unit, specs);
             let parent_id = null;
+            let slot_name;
             if (this._is_unit_component(new_unit_id)) {
                 parent_id = this._spec_get_sub_component_parent_id(unit_id);
-                this._spec_append_component(parent_id, new_unit_id);
+                slot_name = this._spec_get_sub_component_slot_name(unit_id);
+                this._spec_append_component(parent_id, new_unit_id, slot_name);
             }
             this._sim_add_unit(new_unit_id, new_unit, unit_position, {}, unit_pin_position, parent_id, unit_layout_position);
             if (this._is_unit_component(new_unit_id)) {
@@ -17937,7 +18033,7 @@ class Editor_ extends element_1.Element {
             if (parent) {
                 this._register_unit(unit.id, specs, true);
             }
-            this._add_unit(new_unit_id, bundle, null, null, position, pin_position, layout_position);
+            this._add_unit(new_unit_id, bundle, null, null, null, position, pin_position, layout_position);
             this.temp_fixate_node(new_unit_id);
             if (this._is_unit_component(new_unit_id)) {
                 this._sim_add_sub_component(new_unit_id);
@@ -18114,6 +18210,7 @@ class Editor_ extends element_1.Element {
             }
             this._plunk_pod();
             const position = this._get_node_position(unit_id);
+            const is_component = this._is_unit_component(unit_id);
             this._search_to_be_focused_by_click = true;
             this._search_start_unit_id = unit_id;
             this._search_start_spec_id = spec_id;
@@ -18122,12 +18219,21 @@ class Editor_ extends element_1.Element {
             this._search_start_unit_plugs = (0, clone_1.clone)(this._get_unit_plugs(unit_id));
             this._search_start_unit_data = (0, clone_1.clone)(this._get_unit_data(unit_id));
             this._search_start_graph_unit_spec = (0, clone_1.clone)(this._get_unit(unit_id));
+            this._search_start_unit_parent_id =
+                (is_component && this._spec_get_sub_component_parent_id(unit_id)) || null;
+            this._search_start_unit_parent_slot_name =
+                (is_component && this._spec_get_sub_component_slot_name(unit_id)) || null;
+            this._search_start_unit_parent_index =
+                (is_component && this._spec_get_sub_component_index(unit_id)) || null;
+            this._search_start_unit_children =
+                (is_component && (0, clone_1.clone)(this._spec_get_sub_component_children(unit_id))) ||
+                    null;
+            this._search_start_unit_children_slot_map =
+                (is_component && this._spec_get_sub_component_children_slot(unit_id)) ||
+                    null;
             this._search_unit_id = unit_id;
             this._search_unit_spec_id = spec_id;
             this._search_unit_spec_id_changed = false;
-            if (this._is_unit_component(unit_id)) {
-                this._search_start_component_index = this._sub_component_index[unit_id];
-            }
             this._search_unit_merges = this._get_unit_merges(unit_id);
             this._search_unit_merged_pin_ids = {
                 input: {
@@ -18885,7 +18991,7 @@ class Editor_ extends element_1.Element {
                 if (this._animating_sub_component_fullwindow.has(unit_id)) {
                     this._cancel_fullwindow_animation();
                     this._end_leave_fullwindow_animation([unit_id]);
-                    this._animating_sub_component_base_id.delete(unit_id);
+                    this._cancel_sub_component_base_animation(unit_id);
                 }
                 if (this._is_sub_component_fullwindow(unit_id)) {
                     fullwindow = true;
@@ -18921,7 +19027,6 @@ class Editor_ extends element_1.Element {
             const animating_sub_component = this._is_sub_component_animating(unit_id);
             if (is_component) {
                 if (animating_sub_component) {
-                    const sub_component = this._get_sub_component(unit_id);
                     this._unplug_sub_component_root_base_frame(unit_id);
                     this._cancel_sub_component_base_animation(unit_id);
                     this._uncollapse_sub_component(unit_id);
@@ -19028,7 +19133,7 @@ class Editor_ extends element_1.Element {
                 }
                 this._component.decompose();
                 if (component_collapsed) {
-                    if (!this._animating_sub_component_base_id.has(sub_component_id)) {
+                    if (this._is_sub_component_animating(sub_component_id)) {
                         this._remove_sub_component_root_base(sub_component_id);
                     }
                 }
@@ -19041,14 +19146,14 @@ class Editor_ extends element_1.Element {
                     }
                 }
                 const trait = (0, extractTrait_1.extractTrait)(frame, measureText);
-                if (!this._animating_sub_component_base_id.has(sub_component_id)) {
+                if (!this._is_sub_component_animating(sub_component_id)) {
                     this._plug_sub_component_base(sub_component_id, base, base_node, leaf_layer);
                 }
                 let base_trait = this._reflect_sub_component_base_trait(sub_component_id, base, trait, false);
                 const base_length = base.length;
                 i = 0;
                 this._abort_sub_component_enter_base_animation[sub_component_id] =
-                    this._plug_animate_sub_component_base(sub_component_id, base, base_node, leaf_layer, (leaf_id) => {
+                    this._animate_sub_component_base(sub_component_id, base, base_node, (leaf_id) => {
                         if (i === 0) {
                             const trait = (0, extractTrait_1.extractTrait)(frame, measureText);
                             base_trait = this._reflect_sub_component_base_trait(sub_component_id, base, trait, false);
@@ -19070,6 +19175,7 @@ class Editor_ extends element_1.Element {
                         };
                     }, async () => {
                         await wait_for;
+                        this._cancel_sub_component_base_animation(sub_component_id);
                         this._cancel_enter_sub_component_animation(sub_component_id);
                         this._end_sub_component_enter_base_animation(sub_component_id);
                         return true;
@@ -19161,7 +19267,7 @@ class Editor_ extends element_1.Element {
                         leaf_trait.height /= this.$context.$sy;
                     }
                     for (const sub_component_id in this._component.$subComponent) {
-                        if (this._animating_sub_component_base_id.has(sub_component_id)) {
+                        if (this._is_sub_component_animating(sub_component_id)) {
                             this._unplug_sub_component_root_base_frame(sub_component_id);
                         }
                         if (this._abort_sub_component_enter_base_animation[sub_component_id]) {
@@ -19324,7 +19430,7 @@ class Editor_ extends element_1.Element {
         this._append_sub_component_base = (sub_component_id) => {
             // console.log('Graph', '_append_sub_component_base', sub_component_id)
             return this.__commit_sub_component_base(sub_component_id, (parent, leaf_comp) => {
-                const slot_name = this._get_sub_component_slot_name(sub_component_id);
+                const slot_name = this._spec_get_sub_component_slot_name(sub_component_id);
                 const i = parent.$parentRoot.indexOf(leaf_comp);
                 parent.insertParentRootAt(leaf_comp, i, slot_name);
             }, (leaf_parent, leaf_comp, at) => {
@@ -19335,7 +19441,7 @@ class Editor_ extends element_1.Element {
         this._append_sub_component_root_base = (sub_component_id) => {
             // console.log('Graph', '_append_sub_component_root_base', sub_component_id)
             return this.__commit_sub_component_root_base(sub_component_id, (parent, leaf_comp) => {
-                const slot_name = this._get_sub_component_slot_name(sub_component_id);
+                const slot_name = this._spec_get_sub_component_slot_name(sub_component_id);
                 const i = parent.$parentRoot.indexOf(leaf_comp);
                 parent.insertParentRootAt(leaf_comp, i, slot_name);
             }, (parent, leaf_comp, at) => {
@@ -19441,10 +19547,10 @@ class Editor_ extends element_1.Element {
                 leaf_node.y += offset_y;
             }
         };
-        this._animate_layout_leave_sub_component = () => {
+        this._layout_leave_sub_component = (animate = true) => {
             // console.log('Graph', '_animate_layout_leave_sub_component')
-            const { animate } = this._config();
             const sub_component_id = this._get_current_layout_layer_id();
+            const animating_sub_component_set = this._build_animating_sub_component_set();
             this._measure_sub_component_base(sub_component_id);
             const children = this._spec_get_sub_component_children(sub_component_id);
             this._layout_path.pop();
@@ -19458,11 +19564,21 @@ class Editor_ extends element_1.Element {
             layout_layer.children.$element.style.opacity = '0';
             layout_layer.children.$element.style.overflowY = 'initial';
             layout_layer.children.$element.style.overflowX = 'initial';
-            if (next_unit_id) {
-                this._animate_layout_layer_element_opacity(next_unit_id, 1);
+            if (animate) {
+                if (next_unit_id) {
+                    this._animate_layout_layer_element_opacity(next_unit_id, 1);
+                }
+                else {
+                    this._animate_layout_root_element_opacity(1);
+                }
             }
             else {
-                this._animate_layout_root_element_opacity(1);
+                if (next_unit_id) {
+                    next_layout_layer.children.$element.style.opacity = `1`;
+                }
+                else {
+                    this._layout_root.children.$element.style.opacity = `1`;
+                }
             }
             next_layout_layer.content.$element.style.overflowY = 'auto';
             next_layout_layer.content.$element.style.overflowX = 'auto';
@@ -19474,7 +19590,7 @@ class Editor_ extends element_1.Element {
             if (animate) {
                 const all_slot_children = {};
                 for (const child_id of children) {
-                    const slot_name = this._get_sub_component_slot_name(child_id);
+                    const slot_name = this._spec_get_sub_component_slot_name(child_id);
                     all_slot_children[slot_name] = all_slot_children[slot_name] || [];
                     all_slot_children[slot_name].push(child_id);
                     this._measure_sub_component_base(child_id);
@@ -19483,6 +19599,8 @@ class Editor_ extends element_1.Element {
                 const parent_layer = this._get_layout_layer(parent_id);
                 const all_unlisten = [];
                 const finish = async () => {
+                    this._cancel_parent_animation(sub_component_id);
+                    this._cancel_sub_component_base_animation(sub_component_id);
                     for (const slot_name in all_slot_children) {
                         if (next_unit_id) {
                             if (this._layout_layer_opacity_animation[next_unit_id]) {
@@ -19519,7 +19637,7 @@ class Editor_ extends element_1.Element {
                 });
                 all_unlisten.push(stop);
                 for (const child_id of children) {
-                    if (!this._animating_sub_component_base_id.has(child_id)) {
+                    if (!animating_sub_component_set.has(child_id)) {
                         this._leave_sub_component_frame(child_id);
                         this._remove_sub_component_root_base(child_id);
                     }
@@ -19540,7 +19658,7 @@ class Editor_ extends element_1.Element {
                 }
             }
             else {
-                // TODO
+                //
             }
         };
         this._ensure_layout_layer = (parent_id) => {
@@ -19847,7 +19965,7 @@ class Editor_ extends element_1.Element {
         this._get_sub_components_slot_map = (sub_component_ids) => {
             const slot_map = {};
             for (const sub_component_id of sub_component_ids) {
-                const slot_name = this._get_sub_component_slot_name(sub_component_id);
+                const slot_name = this._spec_get_sub_component_slot_name(sub_component_id);
                 slot_map[slot_name] = sub_component_id;
             }
             return slot_map;
@@ -19865,9 +19983,9 @@ class Editor_ extends element_1.Element {
             const prev_parent_map = this._get_sub_components_parent_map(children);
             const slot_map = (0, object_1.makeTagObj)(children, slot_name);
             this._dispatch_action((0, C_1.makeMoveSubComponentRootAction)(parent_id, prev_parent_map, children, index, slot_map, prev_slot_map));
-            this._move_sub_component_root(parent_id, children, slot_name);
+            this._layout_move_sub_component_root(parent_id, children, slot_name);
         };
-        this._move_sub_component_root = (parent_id, children, slot_name = 'default', animate, callback) => {
+        this._layout_move_sub_component_root = (parent_id, children, slot_name = 'default', animate, emit = true, callback) => {
             // console.log(
             //   'Graph',
             //   '_move_sub_component_root',
@@ -19877,9 +19995,15 @@ class Editor_ extends element_1.Element {
             // )
             const config = this._config();
             animate = animate !== null && animate !== void 0 ? animate : config.animate;
-            // this._cancel_tree_layout_animation()
+            const animating_sub_component_set = this._build_animating_sub_component_set();
+            for (const child_id of children) {
+                this._cancel_sub_component_base_animation(child_id);
+            }
             this._ensure_layout_layer(parent_id);
             let finish;
+            let stop_core_animation = [];
+            let layout_core_remaining_set = new Set(children);
+            let finished = false;
             const current_layer_id = this._get_current_layout_layer_id();
             animate = animate && !this._is_layout_component_layer_visible(parent_id);
             if (animate) {
@@ -19899,34 +20023,37 @@ class Editor_ extends element_1.Element {
                 for (const child_id of all_children) {
                     this._measure_sub_component_base(child_id);
                 }
-                for (const child_id of children) {
-                    const child_component = this._get_sub_component(child_id);
-                    this._cancel_sub_component_base_animation(child_id);
-                    const prev_parent_id = this._spec_get_sub_component_parent_id(child_id);
-                    if (prev_parent_id) {
-                        const prev_parent_component = this._get_sub_component(prev_parent_id);
-                        prev_parent_component.pullParentRoot(child_component);
-                    }
-                    else {
-                        this._component.pullRoot(child_component);
-                    }
-                    this._pre_append_sub_component_child(parent_id, child_id, slot_name);
-                }
                 for (const child_id of all_children) {
-                    if (!this._animating_sub_component_base_id.has(child_id)) {
+                    if (!animating_sub_component_set.has(child_id)) {
                         this._remove_sub_component_root_base(child_id);
                     }
                 }
                 for (const child_id of slot_children) {
-                    if (!this._animating_sub_component_base_id.has(child_id)) {
+                    if (!animating_sub_component_set.has(child_id)) {
                         this._remove_sub_component_parent_root(parent_id, child_id);
                     }
                 }
                 for (const child_id of children) {
-                    if (!this._animating_sub_component_base_id.has(child_id)) {
-                        this._leave_sub_component_frame(child_id);
+                    if (!animating_sub_component_set.has(child_id)) {
+                        const parent_id = this._spec_get_sub_component_parent_id(child_id);
+                        const parent_visible = this._is_layout_component_layer_visible(parent_id);
+                        if (!parent_id || parent_visible) {
+                            this._leave_sub_component_frame(child_id);
+                        }
                     }
                 }
+                for (const child_id of children) {
+                    const child_component = this._get_sub_component(child_id);
+                    const prev_parent_id = this._spec_get_sub_component_parent_id(child_id);
+                    if (prev_parent_id) {
+                        const prev_parent_component = this._get_sub_component(prev_parent_id);
+                        prev_parent_component.pullParentRoot(child_component);
+                    }
+                    else {
+                        this._component.pullRoot(child_component);
+                    }
+                    this._pre_append_sub_component_child(parent_id, child_id, slot_name, emit);
+                }
                 const parent_animating = this._is_sub_component_animating(parent_id);
                 const parent_leaf_traits = [];
                 const parent_layer = this._get_sub_component_layout_layer(parent_id);
@@ -19952,31 +20079,49 @@ class Editor_ extends element_1.Element {
                     return maybe_finish();
                 });
                 finish = () => {
+                    if (finished) {
+                        return;
+                    }
+                    finished = true;
+                    this._cancel_parent_animation(parent_id);
+                    this._cancel_layout_parent_children_all_slot_animation(parent_id);
+                    this._cancel_sub_component_base_animation(parent_id);
+                    (0, callAll_1.callAll)(stop_core_animation)();
                     stop_parent_animation();
                     stop_children_animation();
+                    for (const child_id of layout_core_remaining_set) {
+                        this._layout_layer_move_sub_component_child(current_layer_id, parent_id, child_id, i);
+                    }
                     this._unplug_sub_component_root_base_frame(parent_id);
                     this._append_sub_component_root_base(parent_id);
                     this._enter_sub_component_frame(parent_id);
                     this._end_layout_sub_component_transfer_children_animation(parent_id, slot_name);
                     for (const child_id of slot_children) {
+                        this._cancel_layout_child_transfer_animation(child_id);
+                        this._cancel_sub_component_base_animation(child_id);
                         this._insert_sub_component_child(parent_id, child_id);
                     }
                     for (const child_id of children) {
+                        this._cancel_layout_child_transfer_animation(child_id);
+                        this._cancel_sub_component_base_animation(child_id);
                         this._insert_sub_component_child(parent_id, child_id);
                     }
                     this._layout_sub_components_commit_base(all_children);
-                    this._animate_all_current_layout_layer_node();
                     callback && callback();
                 };
                 let i = slot_children.length;
                 for (const child_id of children) {
                     const stop = this._animate_layout_core_anchor(child_id, this._layout_node[child_id], () => {
                         stop();
+                        layout_core_remaining_set.delete(child_id);
                         this._layout_layer_move_sub_component_child(current_layer_id, parent_id, child_id, i);
                         i++;
                     });
+                    stop_core_animation.push(stop);
                 }
             }
+            this._refresh_layout_node_target_position(current_layer_id);
+            this._animate_all_current_layout_layer_node();
             if (animate) {
                 //
             }
@@ -20006,14 +20151,14 @@ class Editor_ extends element_1.Element {
             }
             return finish;
         };
-        this._mem_append_sub_component_child = (parent_id, child_id, slot_name) => { };
-        this._pre_append_sub_component_child = (parent_id, child_id, slot_name) => {
+        this._pre_append_sub_component_child = (parent_id, child_id, slot_name, emit = true) => {
             // console.log('Graph', '_pre_append_sub_component_child', parent_id, child_id)
             const next_index = this._get_component_children_count(parent_id);
             this._state_pre_append_sub_component_child(parent_id, child_id, slot_name);
-            this._pod_move_sub_component_root(parent_id, [child_id], {
-                [child_id]: slot_name,
-            }, next_index, {}, {});
+            emit &&
+                this._pod_move_sub_component_root(parent_id, [child_id], {
+                    [child_id]: slot_name,
+                }, next_index, {}, {});
         };
         this._state_pre_append_sub_component_child = (parent_id, child_id, slot_name) => {
             // console.log(
@@ -20022,7 +20167,7 @@ class Editor_ extends element_1.Element {
             //   parent_id,
             //   child_id
             // )
-            const index = this._get_component_children_count(parent_id);
+            const index = this._spec_get_sub_component_children_count(parent_id);
             this._state_pre_insert_sub_component_child(parent_id, child_id, slot_name, index);
         };
         this._state_pre_insert_sub_component_child = (parent_id, child_id, slot_name, at) => {
@@ -20090,7 +20235,7 @@ class Editor_ extends element_1.Element {
             this._leaf_layer_offset_y = 0;
             for (const sub_component_id of sub_component_ids) {
                 const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
-                if (!this._animating_sub_component_base_id.has(sub_component_id) &&
+                if (!this._is_sub_component_animating(sub_component_id) &&
                     !this._animating_sub_component_fullwindow.has(sub_component_id)) {
                     if (this._tree_layout) {
                         if (parent_id) {
@@ -20119,7 +20264,7 @@ class Editor_ extends element_1.Element {
                     this._plug_sub_component_base(sub_component_id, base, [], layer);
                 }
                 this._animating_sub_component_fullwindow.add(sub_component_id);
-                const stop = this._plug_animate_sub_component_base(sub_component_id, base, [], layer, (leaf_id) => {
+                const stop = this._animate_sub_component_base(sub_component_id, base, [], (leaf_id) => {
                     if (i === 0) {
                         const color = sub_component.getColor();
                         let target_slot = frame_slot;
@@ -20214,7 +20359,7 @@ class Editor_ extends element_1.Element {
                             ];
                         }
                         else {
-                            const slot_name = this._get_sub_component_slot_name(sub_component_id);
+                            const slot_name = this._spec_get_sub_component_slot_name(sub_component_id);
                             all_parent_base[parent_id] = all_parent_base[parent_id] || {};
                             all_parent_base[parent_id][slot_name] =
                                 all_parent_base[parent_id][slot_name] || [];
@@ -20273,7 +20418,7 @@ class Editor_ extends element_1.Element {
                 this._component.decompose();
             }
             for (const sub_component_id of sub_component_ids) {
-                if (!this._animating_sub_component_base_id.has(sub_component_id) &&
+                if (!this._is_sub_component_animating(sub_component_id) &&
                     !this._animating_sub_component_fullwindow.has(sub_component_id)) {
                     this._remove_sub_component_root_base(sub_component_id);
                     this._remove_sub_component_all_root(sub_component_id);
@@ -20289,7 +20434,7 @@ class Editor_ extends element_1.Element {
                 let i = 0;
                 const leaf_total = base.length;
                 this._plug_sub_component_base(sub_component_id, base, [], layer);
-                const stop = this._plug_animate_sub_component_base(sub_component_id, base, [], layer, (leaf_id) => {
+                const stop = this._animate_sub_component_base(sub_component_id, base, [], (leaf_id) => {
                     if (i === 0) {
                         reset_all_trait();
                     }
@@ -20374,6 +20519,9 @@ class Editor_ extends element_1.Element {
             this._cancel_layout_parent_children_animation(parent_id, slot_name);
             this._reset_layout_transfer_parent(parent_id, slot_name);
             this._reset_layout_transfer_parent_children(parent_id, slot_name, children);
+            for (const child_id of children) {
+                this._animating_sub_component_transfer.add(child_id);
+            }
             const parent_child_leaf_style = [];
             const sub_component = this._get_sub_component(parent_id);
             const frame = this._get_sub_component_frame(parent_id);
@@ -20409,12 +20557,18 @@ class Editor_ extends element_1.Element {
             for (const sub_component_id in {
                 ...this._layout_parent_children_animation_frame,
             }) {
-                // console.log('_cancel_all_layout_parent_children_animation')
-                for (const slot_name in {
-                    ...this._layout_parent_children_animation_frame[sub_component_id],
-                }) {
-                    this._cancel_layout_parent_children_animation(sub_component_id, slot_name);
-                }
+                this._cancel_layout_parent_children_all_slot_animation(sub_component_id);
+            }
+        };
+        this._cancel_layout_parent_children_all_slot_animation = (sub_component_id) => {
+            // console.log(
+            //   '_cancel_layout_parent_children_all_slot_animation',
+            //   sub_component_id
+            // )
+            for (const slot_name in {
+                ...this._layout_parent_children_animation_frame[sub_component_id],
+            }) {
+                this._cancel_layout_parent_children_animation(sub_component_id, slot_name);
             }
         };
         this._cancel_all_sub_component_parent_animation = () => {
@@ -20443,10 +20597,16 @@ class Editor_ extends element_1.Element {
                     //   slot_name
                     // )
                     cancelAnimationFrame(this._layout_parent_children_animation_frame[parent_id][slot_name]);
-                    delete this._layout_parent_children_animation_frame[parent_id][slot_name];
+                    (0, object_1.deepDestroy)(this._layout_parent_children_animation_frame, [
+                        parent_id,
+                        slot_name,
+                    ]);
                 }
             }
         };
+        this._cancel_layout_child_transfer_animation = (child_id) => {
+            this._animating_sub_component_transfer.delete(child_id);
+        };
         this._start_layout_children_animation = (parent_id, slot_name, frame) => {
             // console.log(
             //   'Graph',
@@ -20465,7 +20625,7 @@ class Editor_ extends element_1.Element {
             //   include_scroll,
             //   slot_name
             // )
-            // this._cancel_layout_current_children_transfer_animation()
+            this._cancel_all_layout_parent_children_animation();
             this._cancel_layout_parent_children_animation(sub_component_id, slot_name);
             this._setup_layout_sub_component_append_children_animation(sub_component_id, children, slot_name);
             this._layout_transfer_parent_callback[sub_component_id] = callback;
@@ -20479,7 +20639,6 @@ class Editor_ extends element_1.Element {
             return this._play_layout_sub_component_transfer_children_animation(sub_component_id, slot_name, children, pack, true, anticipate, offset, include_scroll, callback);
         };
         this._play_layout_sub_component_transfer_children_animation = (parent_id, slot_name, children, pack, expand, anticipate, offset, include_scroll, callback) => {
-            const { api: { animation: { requestAnimationFrame }, }, } = this.$system;
             const frame = () => {
                 this._tick_animate_layout_transfer_children(parent_id, slot_name, pack, expand, anticipate, offset, include_scroll);
                 if (this._layout_transfer_parent_leaf_end_count[parent_id][slot_name] <
@@ -20496,7 +20655,7 @@ class Editor_ extends element_1.Element {
                     callback();
                 }
             };
-            requestAnimationFrame(frame);
+            this._start_layout_children_animation(parent_id, slot_name, frame);
             return () => {
                 this._cancel_layout_parent_children_animation(parent_id, slot_name);
             };
@@ -20767,21 +20926,7 @@ class Editor_ extends element_1.Element {
             else {
                 component.pullRoot(child_component);
             }
-        };
-        this._mem_push_parent_child = (parent_id, child_id, slot_name) => {
-            // console.log(
-            //   'Graph',
-            //   '_mem_push_parent_child',
-            //   parent_id,
-            //   child_id,
-            //   slot_name,
-            // )
-            const parent_component = this._get_sub_component(parent_id);
-            const child_component = this._get_sub_component(child_id);
-            const slot = this._get_sub_component_slot_name(child_id);
-            parent_component.pushParentRoot(child_component, slot);
-            this._layout_sub_component_parent[child_id] = parent_id;
-            this._mem_layout_push_parent_root(parent_id, child_id, slot_name);
+            this._layout_mem_move_sub_component_child(parent_id, child_id, null);
         };
         this._mem_insert_parent_child = (parent_id, child_id, slot_name, at) => {
             // console.log(
@@ -20793,8 +20938,6 @@ class Editor_ extends element_1.Element {
             //   at
             // )
             this._mem_place_parent_root(parent_id, child_id, slot_name, at);
-            this._layout_sub_component_parent[child_id] = parent_id;
-            this._mem_layout_insert_parent_root(parent_id, child_id, slot_name, at);
         };
         this._mem_layout_push_parent_root = (parent_id, child_id, slot_name) => {
             // console.log(
@@ -20830,6 +20973,8 @@ class Editor_ extends element_1.Element {
             const parent = this._get_sub_component(parent_id);
             const child = this._get_sub_component(child_id);
             parent.placeParentRoot(child, at, slot_name);
+            this._layout_sub_component_parent[child_id] = parent_id;
+            this._mem_layout_insert_parent_root(parent_id, child_id, slot_name, at);
         };
         this._layout_layer_move_sub_component_child = (parent_id, next_parent_id, child_id, next_index) => {
             // console.log(
@@ -20855,17 +21000,6 @@ class Editor_ extends element_1.Element {
                 next_parent_layout_layer.layers.insertChild(layout_layer.layer, 'default', next_index);
             }
         };
-        this._layout_layer_move_sub_component_child_append = (parent_id, next_parent_id, child_id) => {
-            // console.log(
-            //   'Graph',
-            //   '_layout_layer_move_sub_component_child',
-            //   parent_id,
-            //   next_parent_id,
-            //   child_id
-            // )
-            const next_index = this._get_component_children_count(next_parent_id);
-            this._layout_layer_move_sub_component_child(parent_id, next_parent_id, child_id, next_index);
-        };
         this._ensure_parent_layout_layer = (sub_component_id) => {
             const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
             if (parent_id) {
@@ -20902,25 +21036,29 @@ class Editor_ extends element_1.Element {
             // )
             const parent_component = this._get_sub_component(parent_id);
             const child_component = this._get_sub_component(child_id);
-            const slot = this._get_sub_component_slot_name(child_id);
+            const slot = this._spec_get_sub_component_slot_name(child_id);
             parent_component.appendParentRoot(child_component, slot);
         };
         this._insert_sub_component_parent_root_at = (parent_id, child_id, at) => {
             // console.log('Graph', '_insert_sub_component_parent_root_at', unit_id)
             const parent_component = this._get_sub_component(parent_id);
             const child_component = this._get_sub_component(child_id);
-            const slot = this._get_sub_component_slot_name(child_id);
+            const slot = this._spec_get_sub_component_slot_name(child_id);
             parent_component.insertParentRootAt(child_component, at, slot);
         };
         this._remove_sub_component_parent_root = (sub_component_id, child_id) => {
             const sub_component = this._get_sub_component(sub_component_id);
             const sub_component_child = this._get_sub_component(child_id);
-            sub_component.removeParentRoot(sub_component_child);
+            if (sub_component.$mountParentRoot.includes(sub_component_child)) {
+                sub_component.removeParentRoot(sub_component_child);
+            }
         };
         this._remove_sub_component_from_root = (sub_component_id) => {
             // console.log('Graph', '_remove_sub_component_from_root', sub_component_id)
             const sub_component = this._get_sub_component(sub_component_id);
-            this._component.removeRoot(sub_component);
+            if (this.$mountRoot.includes(sub_component)) {
+                this._component.removeRoot(sub_component);
+            }
         };
         this._layout_collapse_sub_component = (sub_component_id, parent) => {
             // console.log('Graph', '_layout_collapse_sub_component')
@@ -21048,7 +21186,7 @@ class Editor_ extends element_1.Element {
         };
         this.__spec_append_sub_component_child = (parent_id, child_id, slot_name) => {
             if (parent_id) {
-                (0, component_1.appendSubComponentChild)({ parentId: parent_id, childId: child_id }, this._spec.component);
+                (0, component_1.appendSubComponentChild)({ parentId: parent_id, childId: child_id, slotName: slot_name }, this._spec.component);
                 this._layout_sub_component_parent[child_id] = parent_id;
             }
             else {
@@ -21132,29 +21270,74 @@ class Editor_ extends element_1.Element {
             this._layout_transfer_parent_leaf_end_set[parent_id][slot_name] = new Set();
             this._layout_transfer_parent_leaf_count[parent_id][slot_name] = 0;
         };
-        this.remove_sub_component_all_children = (parent_id, slot_name, next_parent_id, next_slot_name) => {
-            const children = this._spec_get_sub_component_children(parent_id);
-            const index = this._get_sub_component_index(parent_id);
+        this.remove_sub_component_all_children = (parent_id, slot_name, next_parent_id, next_slot_name, emit, callback) => {
+            const children = (0, clone_1.clone)(this._spec_get_sub_component_children(parent_id));
+            const index = this._spec_get_sub_component_index(parent_id);
             const slot_map = this._get_sub_components_slot_map(children);
             const parent_map = this._get_sub_components_parent_map(children);
             this._dispatch_action((0, C_1.makeMoveSubComponentRootAction)(null, parent_map, children, index, {}, slot_map));
-            this._remove_sub_component_all_children(parent_id, slot_name, next_parent_id, next_slot_name);
+            this._remove_sub_component_children(parent_id, slot_name, next_parent_id, next_slot_name, children, emit, callback);
         };
-        this._remove_sub_component_all_children = (parent_id, slot_name, next_parent_id, next_slot_name) => {
-            const children = (0, clone_1.clone)(this._spec_get_sub_component_children(parent_id));
-            this.remove_sub_component_children(parent_id, slot_name, next_parent_id, next_slot_name, children);
+        this.remove_sub_component_children = (parent_id, slot_name, next_parent_id, next_slot_name, children, emit = true, callback) => {
+            const prev_parent_id_map = {};
+            const prev_slot_map = {};
+            const next_slot_map = {};
+            for (const child_id of children) {
+                prev_parent_id_map[child_id] = parent_id;
+                prev_slot_map[child_id] = slot_name;
+                next_slot_map[child_id] = next_slot_name;
+            }
+            const index = this._spec_get_sub_component_children_count(next_parent_id);
+            this._dispatch_action((0, C_1.makeMoveSubComponentRootAction)(next_parent_id, prev_parent_id_map, children, index, next_slot_map, prev_slot_map));
+            this._remove_sub_component_children(parent_id, slot_name, next_parent_id, next_slot_name, children, emit, callback);
         };
-        this.remove_sub_component_children = (parent_id, slot_name, next_parent_id, next_slot_name, children, emit = true) => {
+        this._remove_sub_component_children = (parent_id, slot_name, next_parent_id, next_slot_name, children, emit = true, callback) => {
             let { animate } = this._config();
             const parent_visible = this._is_layout_component_layer_visible(parent_id);
             animate = animate && !parent_visible;
             const layout_parent_node = this._layout_node[parent_id];
             const { x, y, width, height } = layout_parent_node;
-            const parent_index = this._get_sub_component_index(parent_id);
+            const all_stop = [];
+            const parent_index = this._spec_get_sub_component_index(parent_id);
+            for (const child_id of children) {
+                this._cancel_sub_component_base_animation(child_id);
+            }
+            this._cancel_layout_parent_children_animation(parent_id, slot_name);
             this._measure_sub_component_base(parent_id);
+            let finish = NOOP_1.NOOP;
+            let finish_parent = () => {
+                this._cancel_parent_animation(parent_id);
+                this._cancel_sub_component_base_animation(parent_id);
+                this._unplug_sub_component_root_base_frame(parent_id);
+                this._append_sub_component_root_base(parent_id);
+                this._enter_sub_component_frame(parent_id);
+            };
+            let finish_children = () => {
+                this._end_layout_sub_component_transfer_children_animation(parent_id, slot_name);
+                for (const child_id of children) {
+                    this._cancel_layout_child_transfer_animation(child_id);
+                    this._enter_sub_component_frame(child_id);
+                    this._append_sub_component_base(child_id);
+                }
+            };
+            if (animate) {
+                finish = () => {
+                    (0, callAll_1.callAll)(all_stop);
+                    if (!parent_animation_finished) {
+                        parent_animation_finished = true;
+                        finish_parent();
+                    }
+                    if (!children_animation_finished) {
+                        children_animation_finished = true;
+                        finish_children();
+                    }
+                    callback();
+                };
+            }
             let i = parent_index + 1;
+            let parent_animation_finished = false;
+            let children_animation_finished = false;
             for (const child_id of children) {
-                this._cancel_sub_component_base_animation(child_id);
                 this._layout_layer_move_sub_component_child(parent_id, next_parent_id, child_id, i);
                 i++;
                 if (animate) {
@@ -21165,7 +21348,7 @@ class Editor_ extends element_1.Element {
             }
             if (this._tree_layout) {
                 for (const child_id of children) {
-                    if (!this._animating_sub_component_base_id.has(child_id)) {
+                    if (!this._is_sub_component_animating(child_id)) {
                         if (!this._is_layout_component_layer_visible(parent_id)) {
                             this._remove_sub_component_parent_root(parent_id, child_id);
                         }
@@ -21178,7 +21361,6 @@ class Editor_ extends element_1.Element {
                     }
                 }
             }
-            this._cancel_layout_parent_children_animation(parent_id, slot_name);
             if (this._tree_layout) {
                 if (animate) {
                     this._setup_layout_sub_component_remove_parent_children_animation(parent_id, slot_name, children);
@@ -21199,24 +21381,21 @@ class Editor_ extends element_1.Element {
             if (this._tree_layout) {
                 if (animate) {
                     const parent_animating = this._is_sub_component_animating(parent_id);
-                    const parent_leaf_traits = [];
                     const parent_layer = this._get_sub_component_layout_layer(parent_id);
-                    const stop = this._animate_parent_component(parent_id, parent_animating, parent_animating, parent_leaf_traits, parent_layer.foreground, 1, false, () => ({ x: 0, y: -parent_layer.content.$element.scrollTop }), () => {
-                        stop();
-                        this._unplug_sub_component_root_base_frame(parent_id);
-                        this._append_sub_component_root_base(parent_id);
-                        this._enter_sub_component_frame(parent_id);
-                        return true;
+                    const parent_leaf_traits = [];
+                    const stop_parent_animation = this._animate_parent_component(parent_id, parent_animating, parent_animating, parent_leaf_traits, parent_layer.foreground, 1, false, () => ({ x: 0, y: -parent_layer.content.$element.scrollTop }), () => {
+                        stop_parent_animation();
+                        parent_animation_finished = true;
+                        finish_parent();
                     });
+                    all_stop.push(stop_parent_animation);
                     this._animate_all_layout_layer_node(next_parent_id);
-                    const stop_ = this._play_layout_sub_component_remove_children_animation(parent_id, slot_name, children, true, () => {
-                        stop_();
-                        this._end_layout_sub_component_transfer_children_animation(parent_id, slot_name);
-                        for (const child_id of children) {
-                            this._enter_sub_component_frame(child_id);
-                            this._append_sub_component_base(child_id);
-                        }
+                    const stop_children_animation = this._play_layout_sub_component_remove_children_animation(parent_id, slot_name, children, true, () => {
+                        stop_children_animation();
+                        children_animation_finished = true;
+                        finish_children();
                     });
+                    all_stop.push(stop_children_animation);
                 }
                 else {
                     if (!parent_visible) {
@@ -21228,6 +21407,10 @@ class Editor_ extends element_1.Element {
                     this._force_layout_node_traits(next_parent_id);
                 }
             }
+            if (!animate) {
+                callback();
+            }
+            return finish;
         };
         this._pre_remove_sub_component_child = (parent_id, child_id, next_parent_id, next_index) => {
             const is_child_fullwindow = this._is_sub_component_fullwindow(child_id);
@@ -21261,11 +21444,11 @@ class Editor_ extends element_1.Element {
             }
         };
         this._sim_move_out_sub_component_layout_children = (parent_id, next_parent_id) => {
+            // console.log('_sim_move_out_sub_component_layout_children', parent_id)
             const children = this._spec_get_sub_component_children(parent_id);
-            const parent_index = this._get_sub_component_index(parent_id);
+            const parent_index = this._spec_get_sub_component_index(parent_id);
             let i = parent_index;
             for (const child_id of children) {
-                this._layout_mem_move_sub_component_child(parent_id, child_id, next_parent_id);
                 this._layout_layer_move_sub_component_child(parent_id, next_parent_id, child_id, i);
                 i++;
             }
@@ -21274,9 +21457,11 @@ class Editor_ extends element_1.Element {
             const parent_component = this._get_sub_component(parent_id);
             const child_component = this._get_sub_component(child_id);
             parent_component.removeParentRoot(child_component);
+            this._layout_mem_move_sub_component_child(parent_id, child_id, null);
         };
         this._mem_move_out_sub_component_child = (parent_id, child_id, next_parent_id, next_index) => {
             this._mem_pull_sub_component_child(parent_id, child_id);
+            this._layout_mem_move_sub_component_child(parent_id, child_id, next_parent_id);
             if (next_parent_id) {
                 this._mem_insert_sub_component_child(next_parent_id, child_id, 'default', next_index);
             }
@@ -21325,7 +21510,7 @@ class Editor_ extends element_1.Element {
         this._spec_remove_component_children = (parent_id, next_parent_id) => {
             const children = this._spec_get_sub_component_children(parent_id);
             let i = 0;
-            const parent_index = this._get_sub_component_index(parent_id);
+            const parent_index = this._spec_get_sub_component_index(parent_id);
             for (const child_id of [...children]) {
                 this._spec_move_sub_component_child(parent_id, child_id, next_parent_id, 'default', parent_index + i);
                 i++;
@@ -21350,7 +21535,12 @@ class Editor_ extends element_1.Element {
                 (0, component_1.removeRoot)({ childId: child_id }, this._spec.component);
             }
             if (next_parent_id) {
-                (0, component_1.insertSubComponentChild)({ parentId: next_parent_id, childId: child_id, at: next_index }, this._spec.component);
+                (0, component_1.insertSubComponentChild)({
+                    parentId: next_parent_id,
+                    childId: child_id,
+                    slotName: next_slot_id,
+                    at: next_index,
+                }, this._spec.component);
                 this._layout_sub_component_parent[child_id] = next_parent_id;
             }
             else {
@@ -21434,7 +21624,7 @@ class Editor_ extends element_1.Element {
                         }
                         this._cancel_node_long_click = true;
                         const next_parent_id = this._get_current_layout_layer_id();
-                        this._remove_sub_component_all_children(node_id, 'default', next_parent_id, 'default');
+                        this.remove_sub_component_all_children(node_id, 'default', next_parent_id, 'default', true, () => { });
                         this.deselect_node(node_id);
                     }
                     else {
@@ -21642,7 +21832,7 @@ class Editor_ extends element_1.Element {
                         if (this._is_unit_node_id(selected_node_id) &&
                             this._is_unit_component(selected_node_id)) {
                             const parent_id = this._spec_get_sub_component_parent_id(selected_node_id);
-                            const parent_index = this._get_sub_component_index(selected_node_id);
+                            const parent_index = this._spec_get_sub_component_index(selected_node_id);
                             if (parent_id !== unit_id) {
                                 this._collapse_animation_next_parent[selected_node_id] = unit_id;
                                 this._collapse_animation_next_parent_slot[selected_node_id] =
@@ -21756,7 +21946,7 @@ class Editor_ extends element_1.Element {
                 next_unit.id = new_spec.id;
                 const new_bundle = (0, bundle_1.unitBundleSpec)(next_unit, specs);
                 actions.push(this._make_remove_unit_action(unit_id, bundle, true, true));
-                actions.push(this._make_add_unit_action(next_unit_id, new_bundle, merges_, plugs));
+                actions.push(this._make_add_unit_bundle_action(next_unit_id, new_bundle, merges_, plugs));
                 actions.push(this._make_add_bundle_datum_action(datum_id, bundle));
                 const action = (0, G_1.makeBulkEditAction)(actions);
                 this._dispatch_action(action);
@@ -21771,7 +21961,7 @@ class Editor_ extends element_1.Element {
             const { fork, bubble } = this.$props;
             this._pod.$bulkEdit({ actions, fork, bubble });
         };
-        this._make_add_unit_action = (unit_id, bundle, merges, plugs) => {
+        this._make_add_unit_bundle_action = (unit_id, bundle, merges, plugs) => {
             return (0, G_1.makeAddUnitAction)(unit_id, bundle, merges, plugs);
         };
         this._is_link_pin_default_ignored = (pin_node_id) => {
@@ -21929,7 +22119,7 @@ class Editor_ extends element_1.Element {
             const { x: prev_x, y: prev_y, width: prev_width, height: prev_height, } = unit_node;
             const new_unit_id = this._new_unit_id(new_spec.id);
             const { valid_pin_match, merge_pin_index, exposed_pin_index, merged_pin_ids, exposed_pin_ids, } = this._generate_identity_matches(unit_id);
-            this._state_swap_unit(unit_id, new_unit_id, new_spec, valid_pin_match, merged_pin_ids, merge_pin_index, exposed_pin_ids, exposed_pin_index);
+            this._state_swap_unit(unit_id, new_unit_id, new_spec, valid_pin_match, merged_pin_ids, merge_pin_index, exposed_pin_ids, exposed_pin_index, null, null, null, null, null);
             const { x, y, width, height } = this._node[new_unit_id];
             const target_trait = {
                 x,
@@ -22068,14 +22258,19 @@ class Editor_ extends element_1.Element {
             const position = this._get_node_position(unit_id);
             let sub_component_map = {};
             if (this._is_unit_component(unit_id)) {
+                const sub_component = this._get_sub_component(unit_id);
                 this._decompose_sub_component(unit_id);
                 this._displace_sub_component(unit_id);
                 this._decouple_sub_component(unit_id);
-                const sub_component = this._get_sub_component(unit_id);
-                this._component.removeSubComponent(unit_id);
+                this._pull_sub_component(unit_id);
+                this._remove_sub_component(unit_id);
                 for (const sub_sub_component_id in sub_component.$subComponent) {
                     const sub_sub_component = sub_component.$subComponent[sub_sub_component_id];
-                    const next_sub_sub_component_id = (0, object_1.deepGetOrDefault)(map, ['mappaing', 'unit', sub_sub_component_id, 'in', 'unit', 'unitId'], sub_sub_component_id);
+                    const next_sub_sub_component_id = (0, object_1.deepGetOrDefault)(map, ['mapping', 'unit', sub_sub_component_id, 'in', 'unit', 'unitId'], sub_sub_component_id);
+                    const sub_sub_component_parent = sub_component.getSubComponentParent(sub_sub_component_id);
+                    if (sub_sub_component_parent) {
+                        sub_sub_component_parent.pullParentRoot(sub_sub_component);
+                    }
                     sub_component_map[next_sub_sub_component_id] = sub_sub_component;
                 }
             }
@@ -24989,7 +25184,7 @@ class Editor_ extends element_1.Element {
             this._start_graph_simulation(exports.LAYER_NONE);
         };
         this._sim_remove_component = (unit_id, displace, pull_from_parent = true, destroy = true) => {
-            // console.log('Graph', '_sim_remove_component', unit_id, remove_roots)
+            // console.log('Graph', '_sim_remove_component', unit_id)
             const collapsing = this._collapse_init_node_id_set.has(unit_id);
             displace = displace && !collapsing;
             pull_from_parent = pull_from_parent && !collapsing;
@@ -24999,8 +25194,15 @@ class Editor_ extends element_1.Element {
             const animating = this._is_sub_component_animating(unit_id);
             this._cancel_parent_animation(unit_id);
             this._cancel_layout_core_animation(unit_id);
+            this._cancel_layout_child_transfer_animation(unit_id);
+            this._cancel_layout_parent_children_all_slot_animation(unit_id);
+            this._cancel_sub_component_base_animation(unit_id);
             this._cancel_enter_sub_component_animation(unit_id);
             this._cancel_leave_sub_component_animation(unit_id);
+            if (animating) {
+                const base = this._get_sub_component_base(unit_id);
+                this._unplug_base_frame(unit_id, base);
+            }
             if (this._tree_layout) {
                 if (children.length > 0) {
                     for (const child_id of children) {
@@ -25015,7 +25217,13 @@ class Editor_ extends element_1.Element {
                 if (this._in_component_control) {
                     if (displace) {
                         if (!animating) {
-                            this._displace_sub_component(unit_id);
+                            if (this._tree_layout) {
+                                this._decouple_sub_component(unit_id);
+                                this._pull_sub_component(unit_id);
+                            }
+                            else {
+                                this._displace_sub_component(unit_id);
+                            }
                         }
                     }
                 }
@@ -25032,29 +25240,51 @@ class Editor_ extends element_1.Element {
                     });
                 }
             }
-            if (this._animating_sub_component_base_id.has(unit_id)) {
+            if (this._is_sub_component_animating(unit_id)) {
                 this._unplug_sub_component_base_frame(unit_id);
-                this._animating_sub_component_base_id.delete(unit_id);
+            }
+            if (this._layout_path.includes(unit_id)) {
+                const index = this._layout_path.indexOf(unit_id);
+                let i = this._layout_path.length - 1;
+                while (i >= index) {
+                    this._layout_leave_sub_component(false);
+                    i--;
+                }
             }
             if (this._tree_layout) {
                 if (children.length > 0) {
-                    const current_layer = this._get_current_layout_layer_id();
-                    const current_slot = 'default';
-                    const parent_index = this._get_sub_component_index(unit_id);
-                    let at = parent_index;
+                    const parent_id = this._spec_get_sub_component_parent_id(unit_id);
+                    const parent_index = this._spec_get_sub_component_index(unit_id);
+                    const parent_slot = this._spec_get_sub_component_slot_name(unit_id);
                     for (const child_id of children) {
                         this._remove_sub_component_child(unit_id, child_id);
-                        this._remove_sub_component_root_base(child_id);
-                        this._mem_insert_sub_component_child(current_layer, child_id, current_slot, at);
+                    }
+                    let at = parent_index;
+                    for (const child_id of children) {
+                        this._mem_insert_sub_component_child(parent_id, child_id, parent_slot, parent_index + at);
                         at++;
                     }
-                    this._animate_layout_sub_component_remove_children(unit_id, 'default', children, false, () => {
-                        this._end_layout_sub_component_transfer_children_animation(unit_id, 'default');
+                    if (this._is_layout_parent_visible(unit_id)) {
                         for (const child_id of children) {
-                            this._append_sub_component_base(child_id);
-                            this._enter_sub_component_frame(child_id);
+                            this._remove_sub_component_root_base(child_id);
                         }
-                    });
+                        this._animate_layout_sub_component_remove_children(unit_id, 'default', children, false, () => {
+                            this._cancel_layout_parent_children_all_slot_animation(unit_id);
+                            for (const child_id of children) {
+                                this._cancel_layout_child_transfer_animation(child_id);
+                            }
+                            this._end_layout_sub_component_transfer_children_animation(unit_id, 'default');
+                            for (const child_id of children) {
+                                this._append_sub_component_base(child_id);
+                                this._enter_sub_component_frame(child_id);
+                            }
+                        });
+                    }
+                    else {
+                        for (const child_id of children) {
+                            this._insert_sub_component_child(parent_id, child_id);
+                        }
+                    }
                 }
             }
             if (this._is_sub_component_fullwindow(unit_id)) {
@@ -25066,7 +25296,11 @@ class Editor_ extends element_1.Element {
                 if (!this._tree_layout) {
                     this._sim_move_out_sub_component_children(unit_id, parent_id);
                 }
-                this._sim_remove_sub_component_roots(unit_id);
+                const sub_component = this._get_sub_component(unit_id);
+                if (sub_component) {
+                    this._pull_sub_component(unit_id);
+                    this._remove_sub_component(unit_id);
+                }
             }
             this._sim_remove_layout_core(unit_id);
             this._mem_remove_component(unit_id);
@@ -25074,19 +25308,15 @@ class Editor_ extends element_1.Element {
                 sub_component.destroy();
             }
         };
-        this._sim_remove_sub_component_roots = (unit_id) => {
+        this._pull_sub_component = (unit_id) => {
             const sub_component = this._get_sub_component(unit_id);
             if (sub_component) {
-                if (this._abort_sub_component_enter_base_animation[unit_id] ||
-                    this._abort_sub_component_leave_base_animation[unit_id]) {
-                    const base = this._get_sub_component_base(unit_id);
-                    this._unplug_base_frame(unit_id, base);
-                }
                 const sub_component_parent_id = this._spec_get_sub_component_parent_id(unit_id);
                 const parent_sub_component = this._get_sub_component(sub_component_parent_id);
                 if (sub_component_parent_id) {
                     if (parent_sub_component.hasParentRoot(sub_component)) {
                         parent_sub_component.pullParentRoot(sub_component);
+                        this._layout_mem_move_sub_component_child(sub_component_parent_id, unit_id, null);
                     }
                 }
                 else {
@@ -25094,10 +25324,11 @@ class Editor_ extends element_1.Element {
                         this._component.pullRoot(sub_component);
                     }
                 }
-                this._component.removeSubComponent(unit_id);
-                sub_component.destroy();
             }
         };
+        this._remove_sub_component = (unit_id) => {
+            this._component.removeSubComponent(unit_id);
+        };
         this._sim_remove_layout_core = (unit_id) => {
             // console.log('Graph', '_sim_remove_layout_core', unit_id)
             const layout_core = this._layout_core[unit_id];
@@ -25111,10 +25342,6 @@ class Editor_ extends element_1.Element {
                     parent_layout_layer.layers.removeChild(layout_layer.layer);
                 }
             }
-            const layout_parent_id = this._layout_sub_component_parent[unit_id] || null;
-            if (layout_parent_id) {
-                this._refresh_component_children_counter_up(layout_parent_id, -(1 + (this._layout_component_count[unit_id] || 0)));
-            }
             delete this._layout_core[unit_id];
         };
         this._cancel_graph_core_size_animation = (unit_id) => {
@@ -26080,7 +26307,7 @@ class Editor_ extends element_1.Element {
                     parent_sub_component.removeParentRoot(sub_component);
                 }
                 parent_sub_component.pullParentRoot(sub_component);
-                const slot = this._get_sub_component_slot_name(unit_id);
+                const slot = this._spec_get_sub_component_slot_name(unit_id);
                 parent_sub_component.placeParentRoot(sub_component, i, slot);
                 if (!parent_layer_visible) {
                     parent_sub_component.insertParentRootAt(sub_component, i, slot);
@@ -28033,7 +28260,7 @@ class Editor_ extends element_1.Element {
                 const new_unit_id = this._new_unit_id(id);
                 const pin_position = (0, emptyIO_1.emptyIO)({}, {});
                 const layout_position = { x: 0, y: 0 };
-                this._add_unit(new_unit_id, bundle, null, null, position, pin_position, layout_position);
+                this._add_unit(new_unit_id, bundle, null, null, null, position, pin_position, layout_position);
                 this._sim_add_sub_component(new_unit_id);
                 this._connect_sub_component(new_unit_id);
                 this._move_contained_nodes(new_unit_id, contained_nodes, true);
@@ -28780,11 +29007,12 @@ class Editor_ extends element_1.Element {
         };
         this._on_background_long_click = (event) => {
             const { api: { window: { setTimeout }, }, } = this.$system;
+            const { animate } = this._config();
             if (this._tree_layout) {
                 const current_layout_layer = this._get_current_layout_layer_id();
                 if (current_layout_layer) {
                     if (this._mode === 'none') {
-                        this._animate_layout_leave_sub_component();
+                        this._layout_leave_sub_component(animate);
                     }
                 }
             }
@@ -29070,7 +29298,7 @@ class Editor_ extends element_1.Element {
                 const new_unit_bundle = (0, bundle_1.unitBundleSpecById)(graph_spec.id, specs);
                 graph_id = new_unit_id;
                 graph_unit_bundle = new_unit_bundle;
-                this._state_add_unit(new_unit_id, new_unit_bundle, lowest_common_ancestor, undefined, { x, y }, { input: {}, output: {} }, { x: 0, y: 0 }, { width: 2, height: 2 }, true, false);
+                this._state_add_unit(new_unit_id, new_unit_bundle, lowest_common_ancestor, undefined, undefined, { x, y }, { input: {}, output: {} }, { x: 0, y: 0 }, { width: 2, height: 2 }, true, false);
                 if (there_is_selected_sub_component) {
                     this._sim_add_sub_component(new_unit_id);
                 }
@@ -29137,7 +29365,7 @@ class Editor_ extends element_1.Element {
             const actions = [];
             if (!this._collapse_unit_id) {
                 const position = this._get_node_position(graph_id);
-                actions.push((0, G_1.makeAddUnitAction)(graph_id, (0, clone_1.clone)(new_bundle), undefined, undefined, undefined, undefined, undefined, undefined, position));
+                actions.push((0, G_1.makeAddUnitAction)(graph_id, (0, clone_1.clone)(new_bundle), undefined, undefined, undefined, undefined, undefined, undefined, undefined, position));
             }
             this._refresh_compatible();
             const moves = (0, buildMoves_1.buildMoves)(selection, (0, clone_1.clone)(map));
@@ -30194,7 +30422,7 @@ class Editor_ extends element_1.Element {
                 const selected_children = children.filter(this._is_node_selected);
                 if (parent_id) {
                     if (selected_children) {
-                        this.remove_sub_component_children(parent_id, slot_name, next_parent_id, next_slot_name, selected_children);
+                        this.remove_sub_component_children(parent_id, slot_name, next_parent_id, next_slot_name, selected_children, true, () => { });
                         this._refresh_layout_node_target_position(parent_id);
                         this._move_all_current_layout_node_target_position();
                     }
@@ -31180,26 +31408,25 @@ class Editor_ extends element_1.Element {
                 if (parent_id) {
                     const children = (0, component_2.getSubComponentChildren)(graph, parent_id);
                     at = children.indexOf(unit_id);
-                    this._spec_insert_component(parent_id, unit_id, at);
+                    this._spec_insert_component(parent_id, unit_id, 'default', at);
                 }
                 else {
                     const children = (_d = (_c = graph.component) === null || _c === void 0 ? void 0 : _c.children) !== null && _d !== void 0 ? _d : [];
                     at = children.indexOf(unit_id);
-                    this._spec_insert_component(null, unit_id, at);
+                    this._spec_insert_component(null, unit_id, 'default', at);
                 }
             }
             for (const unit_id in subComponents) {
                 const parent_id = parent_map[unit_id] || fallback_parent_id;
                 const layout_position = geometry_1.NULL_VECTOR;
                 this._sim_add_core_component(unit_id, parent_id, layout_position);
-                mount &&
-                    this._sim_add_sub_component(unit_id, undefined, undefined, undefined, false);
+                mount && this._sim_add_sub_component(unit_id, undefined, undefined, false);
             }
             const sub_component_ids = (0, f_7.keys)(subComponents);
             const ordered_sub_component_ids = this._order_sub_component_ids(sub_component_ids);
             if (mount) {
                 for (const unit_id of ordered_sub_component_ids) {
-                    this._sim_add_sub_component_to_parent(unit_id, undefined);
+                    this._sim_add_sub_component_to_parent(unit_id);
                 }
             }
             for (const datum_id in data) {
@@ -31250,7 +31477,9 @@ class Editor_ extends element_1.Element {
                 const sub_component_spec = component.subComponents[sub_component_id];
                 const { children = [] } = sub_component_spec;
                 const index = this._get_component_children_count(sub_component_id);
-                bulk_actions.push((0, C_1.makeMoveSubComponentRootAction)(sub_component_id, {}, children, index, {}, {}));
+                if (children.length) {
+                    bulk_actions.push((0, C_1.makeMoveSubComponentRootAction)(sub_component_id, {}, children, index, {}, {}));
+                }
             }
             for (const merge_id in merges) {
                 const merge = merges[merge_id];
@@ -31419,8 +31648,8 @@ class Editor_ extends element_1.Element {
                         const parentId = data_.parentId && this._spec_has_unit(data_.parentId)
                             ? data_.parentId
                             : null;
-                        this._add_unit(data_.unitId, data_.bundle, parentId, data_.parentIndex, data_.position, data_.pinPosition, data_.layoutPosition, false);
-                        actions.push((0, G_1.makeAddUnitAction)(data_.unitId, data_.bundle, null, null, data_.parentId, data_.parentIndex, null, null, data_.position));
+                        this._add_unit(data_.unitId, data_.bundle, parentId, data_.parentSlot, data_.parentIndex, data_.position, data_.pinPosition, data_.layoutPosition, false);
+                        actions.push((0, G_1.makeAddUnitAction)(data_.unitId, data_.bundle, null, null, data_.parentId, data_.parentSlot, data_.parentIndex, null, null, data_.position));
                         if (emit) {
                             const { fork, bubble } = this.$props;
                             this._pod.$bulkEdit({ actions, fork, bubble });
@@ -31428,7 +31657,7 @@ class Editor_ extends element_1.Element {
                         if (this._is_unit_component(data_.unitId)) {
                             if (this._in_component_control) {
                                 const sub_component = sub_component_map === null || sub_component_map === void 0 ? void 0 : sub_component_map[data_.unitId];
-                                this._sim_add_sub_component(data_.unitId, sub_component, undefined, undefined, true);
+                                this._sim_add_sub_component(data_.unitId, sub_component, undefined, true);
                                 if (sub_component) {
                                     //
                                 }
@@ -31443,10 +31672,18 @@ class Editor_ extends element_1.Element {
                                 }
                                 const children = (_a = data_.children) !== null && _a !== void 0 ? _a : [];
                                 const childrenSlot = (_b = data_.childrenSlot) !== null && _b !== void 0 ? _b : {};
+                                const prevParentIdMap = this._get_sub_components_parent_map(children);
+                                const prevSlotMap = this._get_sub_components_slot_map(children);
                                 if (this._tree_layout) {
                                     const animate = children.length > 0;
-                                    const finish = this._move_sub_component_root(data_.unitId, children, 'default', animate, () => {
-                                        this._animate_all_current_layout_layer_node();
+                                    const finish = this._on_move_sub_component_root({
+                                        parentId: data_.unitId,
+                                        slotMap: childrenSlot,
+                                        children,
+                                        prevParentIdMap,
+                                        prevSlotMap,
+                                        index: 0,
+                                    }, emit, () => {
                                         this._force_finish_last_action = undefined;
                                     });
                                     actions.push((0, C_1.makeMoveSubComponentRootAction)(data_.unitId, {}, children, 0, data_.childrenSlot, {}));
@@ -31532,7 +31769,13 @@ class Editor_ extends element_1.Element {
                 }
                 case C_1.MOVE_SUB_COMPONENT_ROOT:
                     {
-                        this._on_move_sub_component_root(data, emit);
+                        const finish = this._on_move_sub_component_root(data, emit, () => {
+                            this._force_finish_last_action = undefined;
+                        });
+                        this._force_finish_last_action = () => {
+                            finish();
+                            this._force_finish_last_action = undefined;
+                        };
                     }
                     break;
                 case G_1.SET_UNIT_PIN_CONSTANT:
@@ -32138,15 +32381,16 @@ class Editor_ extends element_1.Element {
                 this._search.stop_microphone();
             }
         };
-        this._get_sub_component_children_slot = (sub_component_id) => {
+        this._spec_get_sub_component_children_slot = (sub_component_id) => {
             const children = this._spec_get_sub_component_children(sub_component_id);
             const children_slot_map = {};
             for (const child_id of children) {
-                children_slot_map[child_id] = this._get_sub_component_slot_name(child_id);
+                children_slot_map[child_id] =
+                    this._spec_get_sub_component_slot_name(child_id);
             }
             return children_slot_map;
         };
-        this._get_sub_component_slot_name = (sub_component_id) => {
+        this._spec_get_sub_component_slot_name = (sub_component_id) => {
             const parent_id = this._spec_get_sub_component_parent_id(sub_component_id);
             if (parent_id) {
                 const parent_component_spec = this._get_sub_component_spec(parent_id);
@@ -32165,7 +32409,7 @@ class Editor_ extends element_1.Element {
             //   sub_component_id
             // )
             if (!this._is_fullwindow) {
-                const slot = this._get_sub_component_slot_name(sub_component_id);
+                const slot = this._spec_get_sub_component_slot_name(sub_component_id);
                 const i = this._spec_get_sub_component_parent_root_index(sub_component_id);
                 this.__insert_sub_component_child(parent_id, sub_component_id, slot, i);
             }
@@ -32177,15 +32421,6 @@ class Editor_ extends element_1.Element {
                 parent_component.insertParentRootAt(sub_component, i, slot);
             }
         };
-        this._mem_push_sub_component = (parent_id, child_id, slot_name) => {
-            // console.log('Graph', '_mem_push_sub_component', parent_id, child_id, slot_name)
-            if (parent_id === null) {
-                this._mem_push_root(child_id);
-            }
-            else {
-                this._mem_push_parent_child(parent_id, child_id, slot_name);
-            }
-        };
         this._mem_insert_sub_component_child = (parent_id, child_id, slot_name, at) => {
             // console.log(
             //   'Graph',
@@ -32211,7 +32446,7 @@ class Editor_ extends element_1.Element {
             const parent_component = this._get_sub_component(parent_id);
             const sub_component = this._get_sub_component(sub_component_id);
             if (!this._is_fullwindow) {
-                const slot = this._get_sub_component_slot_name(sub_component_id);
+                const slot = this._spec_get_sub_component_slot_name(sub_component_id);
                 const i = this._spec_get_sub_component_parent_root_index(sub_component_id);
                 if (parent_component.$mountParentRoot.length > i) {
                     parent_component.domInsertParentRootAt(sub_component, i, slot);
@@ -32231,7 +32466,7 @@ class Editor_ extends element_1.Element {
             const parent_component = this._get_sub_component(parent_id);
             const sub_component = this._get_sub_component(sub_component_id);
             if (!this._is_fullwindow) {
-                const slot = this._get_sub_component_slot_name(sub_component_id);
+                const slot = this._spec_get_sub_component_slot_name(sub_component_id);
                 const i = this._spec_get_sub_component_parent_root_index(sub_component_id);
                 if (parent_component.$mountParentRoot.length > i) {
                     parent_component.postInsertParentRootAt(sub_component, i, slot);
@@ -33374,7 +33609,7 @@ class Editor_ extends element_1.Element {
         this._componentify_core = (unit_id, sub_component_map, should_add_component = true) => {
             // console.log('Graph', '_componentify_core', unit_id)
             this._set_core_shape(unit_id, 'rect');
-            this._spec_append_component(null, unit_id);
+            this._spec_append_component(null, unit_id, 'default');
             this._sim_add_core_component(unit_id, null, { x: 0, y: 0 });
             this._mem_add_unit_component(unit_id, undefined, sub_component_map);
             this._mem_add_unit_component_parent(unit_id);
@@ -33430,7 +33665,7 @@ class Editor_ extends element_1.Element {
                 const specs_ = (0, weakMerge_1.weakMerge)(specs, (_a = bundle.specs) !== null && _a !== void 0 ? _a : {});
                 this._spec_add_unit(unitId, unit, specs_);
                 if (this._is_unit_component(unitId)) {
-                    this._spec_append_component(null, unitId);
+                    this._spec_append_component(null, unitId, 'default');
                 }
                 this._sim_add_unit(unitId, unit, position, {}, { input: {}, output: {} }, null);
                 if (this._is_unit_component(unitId)) {
@@ -33520,7 +33755,7 @@ class Editor_ extends element_1.Element {
             // console.log('Graph', '_on_graph_unit_add_unit_moment', data, this._id)
             var _a, _b, _c, _d, _e, _f;
             const { getSpec, setSpec, injectSpecs, specs, parent } = this.$props;
-            let { path, unitId, bundle, merges = {}, plugs: plugss = {}, parentId, parentIndex, children = [], childrenSlot = {}, } = data;
+            let { path, unitId, bundle, merges = {}, plugs: plugss = {}, parentId, parentIndex, parentSlot, children = [], childrenSlot = {}, } = data;
             merges = merges !== null && merges !== void 0 ? merges : {};
             plugss = plugss !== null && plugss !== void 0 ? plugss : {};
             children = children !== null && children !== void 0 ? children : [];
@@ -33554,10 +33789,15 @@ class Editor_ extends element_1.Element {
                     (0, component_1.setSubComponent)({ unitId, subComponent: {} }, next_spec.component);
                     if (parentId) {
                         if (parentIndex === null || parentIndex === undefined) {
-                            (0, component_1.appendSubComponentChild)({ parentId, childId: unitId }, next_spec.component);
+                            (0, component_1.appendSubComponentChild)({ parentId, childId: unitId, slotName: parentSlot }, next_spec.component);
                         }
                         else {
-                            (0, component_1.insertSubComponentChild)({ parentId, childId: unitId, at: parentIndex }, next_spec.component);
+                            (0, component_1.insertSubComponentChild)({
+                                parentId,
+                                childId: unitId,
+                                slotName: parentSlot,
+                                at: parentIndex,
+                            }, next_spec.component);
                         }
                     }
                     else {
@@ -34217,34 +34457,57 @@ class Editor_ extends element_1.Element {
                 this._state_reorder_sub_component(data.childId, data.to);
             }
         };
-        this._on_move_sub_component_root = (data, emit = true) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+        this._on_move_sub_component_root = (data, emit = true, callback) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             const { fork, bubble } = this.$props;
-            if (data.parentId) {
-                if (this._tree_layout) {
-                    this._move_sub_component_root(data.parentId, data.children, 'default', true);
+            let unlisten;
+            const prevParentId = (_a = data.prevParentIdMap[data.children[0]]) !== null && _a !== void 0 ? _a : null;
+            const prevSlotName = (_b = data.prevSlotMap[data.children[0]]) !== null && _b !== void 0 ? _b : 'default';
+            const parentId = data.parentId;
+            const slotName = (_c = data.slotMap[data.children[0]]) !== null && _c !== void 0 ? _c : 'default';
+            const children = data.children;
+            if (this._tree_layout) {
+                if (!data.parentId ||
+                    this._is_layout_component_layer_visible(data.parentId)) {
+                    unlisten = this._remove_sub_component_children(prevParentId, prevSlotName, parentId, slotName, children, emit, callback);
+                }
+                else if (data.parentId &&
+                    this._is_layout_parent_visible(data.parentId)) {
+                    unlisten = this._layout_move_sub_component_root(data.parentId, data.children, 'default', true, emit, callback);
                 }
                 else {
                     let i = 0;
                     for (const child_id of data.children) {
-                        const slot_name = (_b = (_a = data.slotMap) === null || _a === void 0 ? void 0 : _a[child_id]) !== null && _b !== void 0 ? _b : 'default';
-                        const prev_parent_id = (_d = (_c = data.prevParentIdMap) === null || _c === void 0 ? void 0 : _c[child_id]) !== null && _d !== void 0 ? _d : null;
+                        const slot_name = (_e = (_d = data.slotMap) === null || _d === void 0 ? void 0 : _d[child_id]) !== null && _e !== void 0 ? _e : 'default';
+                        const prev_parent_id = (_g = (_f = data.prevParentIdMap) === null || _f === void 0 ? void 0 : _f[child_id]) !== null && _g !== void 0 ? _g : null;
+                        if (this._is_layout_parent_visible(child_id) || !prev_parent_id) {
+                            this._leave_sub_component_frame(child_id);
+                        }
+                        else {
+                            this._decouple_sub_component(child_id);
+                        }
+                        this._pull_sub_component(child_id);
                         this._state_pre_append_sub_component_child(data.parentId, child_id, slot_name);
+                        this._append_sub_component_parent_root(data.parentId, child_id);
                         this._layout_layer_move_sub_component_child(prev_parent_id, data.parentId, child_id, data.index);
                     }
                     i++;
+                    unlisten = NOOP_1.NOOP;
+                    callback();
                 }
             }
             else {
+                let i = 0;
                 for (const child_id of data.children) {
-                    this._measure_sub_component_base(child_id);
+                    const slot_name = (_j = (_h = data.slotMap) === null || _h === void 0 ? void 0 : _h[child_id]) !== null && _j !== void 0 ? _j : 'default';
+                    const prev_parent_id = (_l = (_k = data.prevParentIdMap) === null || _k === void 0 ? void 0 : _k[child_id]) !== null && _l !== void 0 ? _l : null;
+                    this._pull_sub_component(child_id);
+                    this._state_pre_append_sub_component_child(data.parentId, child_id, slot_name);
+                    this._layout_layer_move_sub_component_child(prev_parent_id, data.parentId, child_id, data.index + i);
                 }
-                const prevParentId = (_e = data.prevParentIdMap[data.children[0]]) !== null && _e !== void 0 ? _e : null;
-                const prevSlotName = (_f = data.prevSlotMap[data.children[0]]) !== null && _f !== void 0 ? _f : 'default';
-                const parentId = data.parentId;
-                const slotName = (_g = data.slotMap[data.children[0]]) !== null && _g !== void 0 ? _g : 'default';
-                const children = data.children;
-                this.remove_sub_component_children(prevParentId, prevSlotName, parentId, slotName, children, emit);
+                i++;
+                unlisten = NOOP_1.NOOP;
+                callback();
             }
             emit &&
                 this._pod.$moveSubComponentRoot({
@@ -34252,13 +34515,14 @@ class Editor_ extends element_1.Element {
                     prevSlotMap: data.prevSlotMap,
                     parentId: data.parentId,
                     children: data.children,
-                    slotMap: (_h = data.slotMap) !== null && _h !== void 0 ? _h : {},
+                    slotMap: (_m = data.slotMap) !== null && _m !== void 0 ? _m : {},
                     index: data.index,
                     fork,
                     bubble,
                 });
             this._refresh_layout_node_target_position(null);
             this._animate_all_current_layout_layer_node();
+            return unlisten;
         };
         this._on_set_unit_pin_constant = (data) => {
             // console.log('Graph', '_on_set_unit_pin_constant', data)
@@ -36216,19 +36480,18 @@ class Editor_ extends element_1.Element {
             height: max_height,
         };
     }
-    _add_unit(unit_id, bundle, parent_id, parent_index, position, pin_position = {
+    _add_unit(unit_id, bundle, parent_id, parent_slot, parent_index, position, pin_position = {
         input: {},
         output: {},
     }, layout_position, emit = true) {
         // console.trace('Graph', '_add_unit')
-        this._state_add_unit(unit_id, bundle, parent_id, parent_index, position, pin_position, layout_position);
+        this._state_add_unit(unit_id, bundle, parent_id, parent_slot, parent_index, position, pin_position, layout_position);
         emit && this._pod_add_unit(unit_id, bundle);
     }
-    _state_add_unit(unit_id, bundle, sub_component_parent_id, sub_component_index, position, pin_position = {
+    _state_add_unit(unit_id, bundle, sub_component_parent_id, sub_component_parent_slot_name, sub_component_parent_index, position, pin_position = {
         input: {},
         output: {},
     }, sub_component_layout_position, size = {}, register = true, deep = true) {
-        // console.trace('Graph', '_add_unit')
         var _a;
         const { specs, injectSpecs } = this.$props;
         const id_map = injectSpecs((_a = bundle.specs) !== null && _a !== void 0 ? _a : {});
@@ -36238,17 +36501,17 @@ class Editor_ extends element_1.Element {
         this._spec_add_unit(unit_id, unit, specs, register, deep);
         const is_component = this._is_unit_component(unit_id);
         if (is_component) {
-            if (sub_component_index === undefined) {
-                this._spec_append_component(sub_component_parent_id, unit_id);
+            if (sub_component_parent_index === undefined) {
+                this._spec_append_component(sub_component_parent_id, unit_id, sub_component_parent_slot_name);
             }
             else {
-                this._spec_insert_component(sub_component_parent_id, unit_id, sub_component_index);
+                this._spec_insert_component(sub_component_parent_id, unit_id, sub_component_parent_slot_name, sub_component_parent_index);
             }
         }
         if (is_component) {
             if (sub_component_parent_id) {
                 this._mem_add_unit_component(unit_id);
-                this._mem_insert_sub_component_child(sub_component_parent_id, unit_id, 'default', sub_component_index);
+                this._mem_insert_sub_component_child(sub_component_parent_id, unit_id, 'default', sub_component_parent_index);
             }
         }
         this._sim_add_unit(unit_id, unit, position, size, pin_position, sub_component_parent_id, sub_component_layout_position);
@@ -36259,10 +36522,11 @@ class Editor_ extends element_1.Element {
         output: {},
     }, layout_position) {
         const parent_index = parent_id
-            ? this._get_component_children_count(unit_id)
+            ? this._get_component_children_count(parent_id)
             : this._spec_get_component_children_count();
-        this._dispatch_action((0, G_1.makeAddUnitAction)(unit_id, (0, clone_1.clone)(bundle), null, null, parent_id, parent_index, null, null, position, pin_position, layout_position));
-        this._add_unit(unit_id, bundle, parent_id, null, position, pin_position, layout_position);
+        const parent_slot = 'default';
+        this._dispatch_action((0, G_1.makeAddUnitAction)(unit_id, (0, clone_1.clone)(bundle), null, null, parent_id, parent_slot, parent_index, null, null, position, pin_position, layout_position));
+        this._add_unit(unit_id, bundle, parent_id, null, null, position, pin_position, layout_position);
     }
     _enter_all_sub_component_frame() {
         for (const sub_component_id in this._component.$subComponent) {
@@ -36284,7 +36548,7 @@ class Editor_ extends element_1.Element {
         const sub_component = this._get_sub_component(unit_id);
         sub_component.compose();
     }
-    _spec_insert_component(parent_id, unit_id, at) {
+    _spec_insert_component(parent_id, unit_id, slot_name, at) {
         var _a;
         this._spec.component = this._spec.component || { subComponents: {} };
         const current_sub_component_spec = (_a = this._get_sub_component_spec(unit_id)) !== null && _a !== void 0 ? _a : {};
@@ -36293,7 +36557,7 @@ class Editor_ extends element_1.Element {
             subComponent: { ...current_sub_component_spec },
         }, this._spec.component);
         if (parent_id) {
-            (0, component_1.insertSubComponentChild)({ parentId: parent_id, childId: unit_id, at }, this._spec.component);
+            (0, component_1.insertSubComponentChild)({ parentId: parent_id, childId: unit_id, slotName: slot_name, at }, this._spec.component);
         }
         else {
             (0, component_1.insertRoot)({ childId: unit_id, at }, this._spec.component);
@@ -36818,6 +37082,8 @@ class Editor_ extends element_1.Element {
         const parent_layer = this._get_layout_layer(parent_id);
         const scroll_top = parent_layer.content.$element.scrollTop;
         const finish = () => {
+            this._cancel_parent_animation(sub_component_id);
+            this._cancel_sub_component_base_animation(sub_component_id);
             stop_parent_animation();
             stop_children_animation();
             this._unplug_sub_component_root_base_frame(sub_component_id);
@@ -36825,6 +37091,7 @@ class Editor_ extends element_1.Element {
             this._append_sub_component_root_base(sub_component_id);
             this._end_layout_sub_component_transfer_children_animation(sub_component_id, 'default');
             for (const child_id of children) {
+                this._cancel_layout_child_transfer_animation(child_id);
                 this._enter_sub_component_frame(child_id);
                 this._append_sub_component_base(child_id);
             }
@@ -36835,7 +37102,7 @@ class Editor_ extends element_1.Element {
             this._measure_sub_component_base(child_id);
         }
         for (const child_id of children) {
-            if (!this._animating_sub_component_base_id.has(child_id)) {
+            if (!this._is_sub_component_animating(child_id)) {
                 this._remove_sub_component_parent_root(sub_component_id, child_id);
                 this._remove_sub_component_root_base(child_id);
             }
@@ -37345,7 +37612,7 @@ class Editor_ extends element_1.Element {
         const target_position = this._get_node_position(target_node_id);
         const position = (0, geometry_1.mediumPoint)(source_position, target_position);
         const layout_position = this._screen_center();
-        this._add_unit(new_unit_id, bundle, null, null, position, undefined, layout_position);
+        this._add_unit(new_unit_id, bundle, null, null, null, position, undefined, layout_position);
         const new_unit_source_pin_id = (0, id_1.getPinNodeId)(new_unit_id, 'input', 'a');
         const new_unit_target_pin_id = (0, id_1.getPinNodeId)(new_unit_id, 'output', 'a');
         const new_source_merge_id = this._merge_pin_pin(new_unit_source_pin_id, source_node_id);