@_unit/unit 1.0.71 → 1.0.73

package/src/system/platform/component/app/Editor/Component.ts

@@ -555,7 +555,6 @@ import {
 import {
   getSubComponentChildren,
   getSubComponentParentId,
-  getSubComponentParentIndex,
   getSubComponentParentRootIndex,
   getSubComponentRootIndex,
   getSubComponentSpec,
@@ -687,6 +686,7 @@ import { randomIdNotIn } from '../../../../../util/id'
 import {
   deepDec,
   deepDelete,
+  deepDestroy,
   deepGet,
   deepGetOrDefault,
   deepInc,
@@ -2919,10 +2919,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
   private _search_start_unit_plugs: GraphUnitPlugs = {}
   private _search_start_unit_data: IOOf<Dict<TreeNode>> = {}
   private _search_start_unit_parent_id: string | null = null
-  private _search_start_unit_index: number | null = null
+  private _search_start_unit_parent_slot_name: string | null = null
+  private _search_start_unit_parent_index: number | null = null
   private _search_start_graph_unit_spec: GraphUnitSpec | null = null
-
-  private _search_start_component_index: number | null = null
+  private _search_start_unit_children: string[] = []
+  private _search_start_unit_children_slot_map: Dict<string> = {}
 
   private _search_unit_id: string | null = null
   private _search_unit_spec_id: string | null = null
@@ -3045,7 +3046,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
   private _animating_enter_fullwindow = false
   private _animating_sub_component_fullwindow: Set<string> = new Set()
-  private _animating_sub_component_base_id: Set<string> = new Set()
+
+  private _animating_sub_component_transfer: Set<string> = new Set()
 
   private _abort_sub_component_enter_base_animation: Dict<Unlisten> = {}
   private _abort_sub_component_leave_base_animation: Dict<Unlisten> = {}
@@ -3808,6 +3810,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           bundle,
           null,
           null,
+          null,
           position,
           {},
           center_of_screen
@@ -3818,7 +3821,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           undefined,
           undefined,
           undefined,
-          undefined,
           image
         )
 
@@ -3877,6 +3879,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       bundle,
       null,
       null,
+      null,
       position,
       {},
       center_of_screen
@@ -3955,6 +3958,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         bundle,
         null,
         null,
+        null,
         position,
         {},
         center_of_screen
@@ -3965,7 +3969,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         undefined,
         {},
         undefined,
-        undefined,
         element
       )
 
@@ -6017,6 +6020,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     unit_id: string,
     bundle: UnitBundleSpec,
     parent_id: string | null,
+    parent_slot: string | null,
     parent_index: number | null,
     position: Position,
     pin_position: UnitPinPosition = {
@@ -6032,6 +6036,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       unit_id,
       bundle,
       parent_id,
+      parent_slot,
       parent_index,
       position,
       pin_position,
@@ -6045,7 +6050,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     unit_id: string,
     bundle: UnitBundleSpec,
     sub_component_parent_id: string | null,
-    sub_component_index: number | null,
+    sub_component_parent_slot_name: string | null,
+    sub_component_parent_index: number | null,
     position: Position,
     pin_position: UnitPinPosition = {
       input: {},
@@ -6056,8 +6062,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     register: boolean = true,
     deep: boolean = true
   ): void {
-    // console.trace('Graph', '_add_unit')
-
     const { specs, injectSpecs } = this.$props
 
     const id_map = injectSpecs(bundle.specs ?? {})
@@ -6073,13 +6077,18 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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
+          sub_component_parent_slot_name,
+          sub_component_parent_index
         )
       }
     }
@@ -6091,7 +6100,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           sub_component_parent_id,
           unit_id,
           'default',
-          sub_component_index
+          sub_component_parent_index
         )
       }
     }
@@ -6121,9 +6130,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     layout_position: Position
   ): void {
     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()
 
+    const parent_slot = 'default'
+
     this._dispatch_action(
       makeAddUnitAction(
         unit_id,
@@ -6131,6 +6142,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         null,
         null,
         parent_id,
+        parent_slot,
         parent_index,
         null,
         null,
@@ -6145,16 +6157,17 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       bundle,
       parent_id,
       null,
+      null,
       position,
       pin_position,
       layout_position
     )
   }
 
-  private _dispatch_add_unit_action = (
+  private _make_add_unit_action = (
     unit_id: string,
     unit: GraphUnitSpec
-  ): void => {
+  ): Action => {
     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)
@@ -6165,73 +6178,35 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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 = clone({ unit })
 
-    this._dispatch_action(
-      makeAddUnitAction(
-        unit_id,
-        bundle,
-        {},
-        {},
-        layout_parent_id,
-        layout_index,
-        layout_children,
-        layout_children_slot,
-        position,
-        pin_position,
-        layout_position
-      )
-    )
-  }
-
-  private _dispatch_swap_unit_action = (
-    unit_id: string,
-    unit_bundle: UnitBundleSpec,
-    unit_merges: GraphUnitMerges,
-    unit_plugs: GraphUnitPlugs,
-    unit_parent_id: string | null,
-    unit_index: number | null,
-    unit_children: string[],
-    unit_children_slot: Dict<string>,
-    new_unit_id: string,
-    new_unit_bundle: UnitBundleSpec,
-    new_unit_merges: GraphUnitMerges,
-    new_unit_plugs: GraphUnitPlugs,
-    new_unit_parent_id: string | null,
-    new_unit_index: number | null,
-    new_unit_children: string[],
-    new_unit_children_slot: Dict<string>
-  ) => {
-    const action = this._make_swap_unit_action(
+    return makeAddUnitAction(
       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
+      bundle,
+      {},
+      {},
+      layout_parent_id,
+      layout_slot,
+      layout_index,
+      layout_children,
+      layout_children_slot,
+      position,
+      pin_position,
+      layout_position
     )
-
-    this._dispatch_action(action)
   }
 
   private _make_swap_unit_action = (
@@ -6240,6 +6215,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     unit_merges: GraphUnitMerges,
     unit_plugs: GraphUnitPlugs,
     unit_parent_id: string | null,
+    unit_parent_slot: string | null,
     unit_index: number | null,
     unit_children: string[],
     unit_children_slot: Dict<string>,
@@ -6248,6 +6224,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     new_unit_merges: GraphUnitMerges,
     new_unit_plugs: GraphUnitPlugs,
     new_unit_parent_id: string | null,
+    new_unit_parent_slot: string | null,
     new_unit_index: number | null,
     new_unit_children: string[],
     new_unit_children_slot: Dict<string>
@@ -6258,6 +6235,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       unit_merges,
       unit_plugs,
       unit_parent_id,
+      unit_parent_slot,
       unit_index,
       unit_children,
       unit_children_slot,
@@ -6271,6 +6249,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       new_unit_merges,
       new_unit_plugs,
       new_unit_parent_id,
+      new_unit_parent_slot,
       new_unit_index,
       new_unit_children,
       new_unit_children_slot,
@@ -6324,14 +6303,17 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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 clone(
@@ -6341,6 +6323,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         includeMerges ? merges : undefined,
         includePlugs ? plugs : undefined,
         layout_parent_id,
+        layout_slot,
         layout_index,
         layout_children,
         layout_children_slot,
@@ -6403,6 +6386,14 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     return getSubComponentChildren(this._spec, sub_component_id)
   }
 
+  private _spec_get_sub_component_children_count = (
+    sub_component_id: string
+  ): number => {
+    const children = this._spec_get_sub_component_children(sub_component_id)
+
+    return children.length
+  }
+
   private _decompose_sub_component(
     unit_id: string,
     deep: boolean = true
@@ -6454,6 +6445,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
   private _spec_append_component = (
     parent_id: string | null,
     unit_id: string,
+    slot_name: string | null,
     sub_component_spec: GraphSubComponentSpec = { children: [] }
   ): void => {
     // console.log('Graph', '_spec_append_component', parent_id, id)
@@ -6467,7 +6459,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     if (parent_id) {
       appendSubComponentChild(
-        { parentId: parent_id, childId: unit_id },
+        { parentId: parent_id, childId: unit_id, slotName: slot_name },
         this._spec.component
       )
     } else {
@@ -6484,6 +6476,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
   private _spec_insert_component(
     parent_id: string | null,
     unit_id: string,
+    slot_name: string,
     at: number
   ) {
     this._spec.component = this._spec.component || { subComponents: {} }
@@ -6501,7 +6494,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     if (parent_id) {
       insertSubComponentChild(
-        { parentId: parent_id, childId: unit_id, at },
+        { parentId: parent_id, childId: unit_id, slotName: slot_name, at },
         this._spec.component
       )
     } else {
@@ -7051,8 +7044,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     position: Position | undefined,
     init_size: { width?: number; height?: number } = {}
   ): void => {
-    // console.log('Graph', '_sim_add_core', unit_id, unit, position)
-
     const { classes } = this.$system
 
     const { config, specs, getSpec } = this.$props
@@ -7777,11 +7768,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       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)
       }
     }
@@ -8118,7 +8109,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     unit_id: string,
     sub_component?: Component,
     sub_sub_component_map: Dict<Component> = {},
-    at?: number,
     add_to_parent: boolean = true,
     element: IOElement = undefined
   ): void => {
@@ -8127,7 +8117,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     //   '_sim_add_unit_component',
     //   unit_id,
     //   sub_component_map,
-    //   at,
     //   add_to_parent
     // )
 
@@ -8139,20 +8128,17 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     )
 
     if (add_to_parent) {
-      this._sim_add_sub_component_to_parent(unit_id, at)
+      this._sim_add_sub_component_to_parent(unit_id)
     }
   }
 
-  private _sim_add_sub_component_to_parent = (
-    unit_id: string,
-    at?: number
-  ): void => {
+  private _sim_add_sub_component_to_parent = (unit_id: string): void => {
     // 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)
     }
   }
 
@@ -8249,9 +8235,9 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       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)) {
         this._component.pushRoot(sub_component)
@@ -8608,7 +8594,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       merged_pin_ids,
       merge_pin_index,
       exposed_pin_ids,
-      exposed_pin_index
+      exposed_pin_index,
+      null,
+      null,
+      null,
+      null,
+      null
     )
 
     forIOObjKV(unit_data, (type, pin_id, pin_data) => {
@@ -10133,7 +10124,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         ref: {},
       },
     },
-    next_sub_component_index?: number
+    next_sub_component_parent_id: string,
+    next_sub_component_parent_slot_name: string,
+    next_sub_component_parent_index: number,
+    next_sub_component_children: string[],
+    next_sub_component_children_slot_map: Dict<string>
   ): {
     next_swap_merges: GraphMergesSpec
     next_ref_merge_id: string | null
@@ -10145,10 +10140,19 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     next_merged_pin_index: IOOf<{ data: Dict<number>; ref: Dict<number> }>
     next_exposed_pin_index: IOOf<{ data: Dict<number>; ref: Dict<number> }>
   } => {
-    // console.log('Graph', '_sim_swap_unit', {
-    //   merged_pin_ids,
+    // 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,
     // })
 
     const { specs } = this.$props
@@ -10181,14 +10185,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     const { inputs: unit_inputs = {}, outputs: unit_outputs = {} } = unit_spec
 
-    const is_component = this._is_unit_component(unit_id)
-
-    let component_index: number
-
-    if (is_component) {
-      component_index = this._get_sub_component_index(unit_id)
-    }
-
     const pin_bag = {
       input: clone(unit_inputs),
       output: clone(unit_outputs),
@@ -10421,6 +10417,22 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       (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 = isComponentSpec(new_unit_spec)
 
     if (is_unit_component && this._search_unit_id !== unit_id) {
@@ -10454,15 +10466,27 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       )
     }
 
-    let next_sub_component_parent_id =
-      (is_swap_unit_component && unit_parent_id) || null
+    next_sub_component_parent_id =
+      next_sub_component_parent_id ??
+      ((is_swap_unit_component && unit_parent_id) || null)
 
-    let next_sub_component_parent_index =
-      (is_unit_component &&
-        is_swap_unit_component &&
-        this._get_sub_component_index(unit_id)) ??
+    next_sub_component_parent_index =
+      next_sub_component_parent_index ??
+      (is_unit_component && is_swap_unit_component && unit_parent_index) ??
       null
 
+    next_sub_component_parent_slot_name =
+      next_sub_component_parent_slot_name ??
+      ((is_swap_unit_component && unit_parent_slot_name) || null)
+
+    next_sub_component_children =
+      next_sub_component_children ??
+      ((is_swap_unit_component && unit_children) || [])
+
+    next_sub_component_children_slot_map =
+      next_sub_component_children_slot_map ??
+      ((is_swap_unit_component && unit_children_slot_map) || {})
+
     const bundle = unitBundleSpec(graph_unit_spec, specs)
 
     const should_unregister =
@@ -10474,6 +10498,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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,
@@ -10482,19 +10507,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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
-      )
+    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)
+        this._refresh_layout_node_target_position(unit_parent_id)
+      }
     }
 
     const replace_exposed = (kind: IO, tag: 'ref' | 'data'): void => {
@@ -16733,8 +16751,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
   }
 
-  private _state_swap_search_unit = (id: string, next_unit_id?: string) => {
-    if (this._search_start_spec_id !== id) {
+  private _state_swap_search_unit = (
+    unit_id: string,
+    next_unit_id?: string
+  ) => {
+    if (this._search_start_spec_id !== unit_id) {
       this._search_unit_spec_id_changed = true
     }
 
@@ -16743,11 +16764,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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)
     }
   }
 
@@ -16887,7 +16908,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           this._search_unit_merged_pin_index,
           this._search_unit_exposed_pin_ids,
           this._search_unit_exposed_pin_index,
-          this._search_start_component_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
@@ -17140,9 +17165,13 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     const is_component = this._is_unit_component(unit_id)
 
     if (is_component) {
-      parent_id = this._get_sub_component_target_parent_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)
+      this._spec_append_component(parent_id, unit_id, 'default')
     }
 
     this._sim_add_unit(
@@ -17773,10 +17802,16 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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: Action[] = []
 
     if (search_unit_id) {
       this._refresh_unit_layer(search_unit_id)
@@ -17818,7 +17853,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
             parent_id = this._get_current_layout_layer_id()
           }
 
-          const actions: Action[] = [
+          actions.push(
             makeAddUnitAction(
               search_unit_id,
               search_unit_bundle,
@@ -17831,22 +17866,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
               null,
               null,
               null
-            ),
-          ]
-
-          const bulk_action = makeBulkEditAction(actions)
-
-          this._dispatch_action(bulk_action)
-
-          this._pod.$bulkEdit({ actions, fork, bubble })
-
-          this._download_pod_data()
+            )
+          )
 
           should_add_component = true
         } else if (this._mode === 'change') {
           if (this._search_start_unit_id) {
-            const is_component = isComponentId(specs, search_start_spec_id)
-
             const search_start_unit_bundle = unitBundleSpec(
               this._search_start_graph_unit_spec,
               specs
@@ -17859,33 +17884,30 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
               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
+            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
+              )
             )
-
-            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)
-            }
           } 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)
@@ -17927,14 +17949,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
                 pin_id = getObjSingleKey(merge_unit.output || {})
               }
 
-              this.__pod_add_pin_to_merge(
-                merge_id,
-                search_unit_id,
-                type,
-                pin_id
+              actions.push(
+                makeAddPinToMergeAction(merge_id, search_unit_id, type, pin_id)
               )
             } else {
-              this._pod_add_merge(merge_id, merge)
+              actions.push(makeAddMergeAction(merge_id, merge))
             }
 
             if (!this._is_merge_ref(merge_node_id)) {
@@ -17944,17 +17963,33 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           }
 
           if (this._search_unit_ref_merge_id) {
-            this._pod_add_merge(
-              this._search_unit_ref_merge_id,
-              this._search_unit_ref_merge
+            actions.push(
+              makeAddMergeAction(
+                this._search_unit_ref_merge_id,
+                this._search_unit_ref_merge
+              )
             )
           }
         }
 
+        const bulk_action = 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
+            )
           }
         }
 
@@ -17990,6 +18025,39 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
   }
 
+  private _search_change_return_start_children = (
+    search_unit_id: string,
+    search_start_unit_children: string[],
+    search_start_unit_children_slot_map: Dict<string>
+  ) => {
+    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()
+      }
+    }
+  }
+
   private _shift_search = (): void => {
     // console.log('Graph', '_shift_search')
 
@@ -18162,7 +18230,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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
 
@@ -18235,6 +18303,9 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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) {
@@ -18258,10 +18329,20 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
             }
 
             forIOObjKV(search_unit_start_data, (type, pin_id, data) => {
-              const pin_node_id = getPinNodeId(search_unit_id, type, pin_id)
+              const pin_node_id = 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
+            )
           }
         }
       }
@@ -18972,11 +19053,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     this._enter_fullwindow(animate, ordered_selected_sub_component_ids)
   }
 
-  private _get_sub_component_index = (sub_component_id: string): number => {
-    return getSubComponentParentIndex(this._spec, sub_component_id)
-  }
-
-  private _get_sub_component_root_index = (
+  private _spec_get_sub_component_root_index = (
     sub_component_id: string
   ): number => {
     return getSubComponentRootIndex(this._spec, sub_component_id)
@@ -18994,6 +19071,16 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     )
   }
 
+  private _spec_get_sub_component_index = (sub_component_id: string) => {
+    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)
+    }
+  }
+
   private _get_sub_component_tree_index = (
     sub_component_id: string
   ): number => {
@@ -19010,7 +19097,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       const index = parent_sub_component_index + sub_component_index
       return index
     } else {
-      return this._get_sub_component_root_index(sub_component_id)
+      return this._spec_get_sub_component_root_index(sub_component_id)
     }
   }
 
@@ -19207,10 +19294,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
   }
 
-  private _place_sub_component = (
-    sub_component_id: string,
-    at?: number
-  ): void => {
+  private _place_sub_component = (sub_component_id: string): void => {
     // console.log('Graph', '_place_sub_component', sub_component_id)
 
     if (this._is_all_fullwindow) {
@@ -19218,7 +19302,26 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       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)
     }
@@ -19294,6 +19397,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     root_callback: () => void
   ): void => {
     const parent_id = this._spec_get_sub_component_parent_id(sub_component_id)
+
     if (parent_id) {
       parent_root_callback(parent_id)
     } else {
@@ -20483,16 +20587,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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
 
@@ -20543,30 +20639,26 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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) {
+      if (!animating_sub_component_set.has(sub_component_id)) {
         this._measure_sub_component_base(sub_component_id)
-      }
 
-      if (!animating_sub_component_set.has(sub_component_id)) {
         this._leave_sub_component_frame(sub_component_id)
 
         const sub_component_base =
-          this._get_sub_component_base(sub_component_id)
+          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)
 
@@ -20620,7 +20712,9 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     // console.log('Graph', '_plug_leaf_frame', leaf_id, leaf_node)
 
     if (this._leaf_frame_active[leaf_id]) {
-      return
+      this._unplug_leaf_frame(leaf_id)
+
+      this._leaf_frame_node[leaf_id] = leaf_node
     }
 
     const {
@@ -20740,7 +20834,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       } 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) {
         const [sub_component_id] = leaf_path
@@ -21039,27 +21133,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     return callAll(all_unlisten)
   }
 
-  private _plug_animate_sub_component_base = (
-    sub_component_id: string,
-    leaf_base: LayoutBase,
-    leaf_traits: LayoutNode[],
-    leaf_layer: Component<HTMLElement>,
-    n1: (
-      leaf_id: string,
-      leaf_path: string[],
-      leaf_comp: Component
-    ) => LayoutNode,
-    callback: () => void
-  ): Unlisten => {
-    return this._animate_sub_component_base(
-      sub_component_id,
-      leaf_base,
-      leaf_traits,
-      n1,
-      callback
-    )
-  }
-
   private _animate_sub_component_base = (
     sub_component_id: string,
     leaf_base: LayoutBase,
@@ -21079,8 +21152,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     const all_unlisten = []
 
-    this._animating_sub_component_base_id.add(sub_component_id)
-
     const leaf_ended = new Set()
 
     for (const leaf of leaf_base) {
@@ -21122,11 +21193,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       })
     }
 
-    all_unlisten.push(() => {
-      this._animating_sub_component_base_id.delete(sub_component_id)
-    })
+    const stop = callAll(all_unlisten)
 
-    return callAll(all_unlisten)
+    this._abort_sub_component_base_animation[sub_component_id] = stop
+
+    return stop
   }
 
   private _cancel_enter_animation = (): void => {
@@ -21373,6 +21444,20 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     Promise.all(promises).then(callback)
   }
 
+  private _is_layout_parent_visible = (sub_component_id: string) => {
+    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
+  }
+
   private _animate_enter_tree_layout = (): void => {
     // console.log('Graph', '_animate_enter_tree_layout')
 
@@ -21393,6 +21478,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
 
     this._cancel_fullwindow_animation()
+    this._cancel_all_layout_parent_children_animation()
     this._cancel_all_sub_component_base_animation()
     this._cancel_enter_animation()
 
@@ -21423,6 +21509,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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)
 
@@ -21495,7 +21582,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         const all_slot_children: Dict<string[]> = {}
 
         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)
@@ -21541,11 +21628,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
         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: Dict<LayoutBase> = {}
         let all_trait: Dict<LayoutNode>
         let all_leaf_count: Dict<number> = {}
@@ -21688,8 +21770,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           )
 
           all_stop.push(stop)
-
-          this._abort_sub_component_base_animation[sub_component_id] = stop
         }
       }
     }
@@ -21735,11 +21815,10 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       )
     }
 
-    const stop = this._plug_animate_sub_component_base(
+    const stop = this._animate_sub_component_base(
       sub_component_id,
       leaf_base,
       leaf_traits,
-      leaf_layer,
       (leaf_id: string) => {
         const { $width, $height } = this.$context
 
@@ -21805,8 +21884,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
           delete this._leaf_target_trait[leaf_id]
         }
-
-        delete this._abort_sub_component_parent_animation[sub_component_id]
       }
     )
 
@@ -21883,16 +21960,22 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         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]
 
@@ -21906,15 +21989,20 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
               sub_component_id,
               slot_name
             )
-          }
 
-          delete this._abort_sub_component_base_animation[sub_component_id]
+            const children = all_slot_children[slot_name]
+
+            for (const child_id of children) {
+              this._cancel_layout_child_transfer_animation(child_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)
@@ -21931,11 +22019,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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
@@ -21945,7 +22028,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         const all_slot_children: Dict<string[]> = {}
 
         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)
@@ -22019,18 +22102,10 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           leaf_node.opacity *= layer_opacity
         }
 
-        this._plug_sub_component_base(
+        const stop = this._animate_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: string) => {
             const { x, y } = this._get_node_screen_position(sub_component_id)
 
@@ -22092,8 +22167,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         )
 
         all_stop.push(stop)
-
-        this._abort_sub_component_base_animation[sub_component_id] = stop
       }
     }
   }
@@ -22291,21 +22364,37 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
   }
 
   private _is_sub_component_animating = (sub_component_id: string): boolean => {
-    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
   }
 
   private _zoom_opacity_animation: Animation
@@ -22324,13 +22413,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     )
   }
 
-  private _leave_tree_layout = (): void => {
-    // console.log('Graph', '_leave_tree_layout')
-
-    const { animate } = this._config()
-
-    this._pointer_up_all_pressed_pointer_id()
-
+  private _build_animating_sub_component_set = () => {
     const animating_sub_component_set = new Set()
 
     for (const sub_component_id in this._component.$subComponent) {
@@ -22342,10 +22425,24 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       }
     }
 
+    return animating_sub_component_set
+  }
+
+  private _leave_tree_layout = (): void => {
+    // 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
 
@@ -22386,9 +22483,30 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
 
     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 =
@@ -22404,17 +22522,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         }
       }
 
-      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)
@@ -24013,7 +24126,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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_)
+      this._make_add_unit_bundle_action(
+        next_unit_id,
+        class_bundle,
+        merges_,
+        plugs_
+      )
     )
 
     const action = makeBulkEditAction(actions)
@@ -24028,7 +24146,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       merged_pin_ids,
       merge_pin_index,
       exposed_pin_ids,
-      exposed_pin_index
+      exposed_pin_index,
+      null,
+      null,
+      null,
+      null,
+      null
     )
 
     if (memory) {
@@ -27993,6 +28116,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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)
@@ -28031,7 +28156,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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 {
       this._remove_sub_component_base(sub_component_id)
@@ -28207,9 +28332,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     const { datumId } = segmentDatumNodeId(datum_node_id)
 
-    const value = this._get_datum_value(datum_node_id)
+    if (this._has_node(datum_node_id)) {
+      const value = this._get_datum_value(datum_node_id)
 
-    removeData({ datumId, value })
+      removeData({ datumId, value })
+    }
   }
 
   private _action_buffer: Action[] = []
@@ -28898,11 +29025,13 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     this._spec_add_unit(new_unit_id, new_unit, specs)
 
     let parent_id: string | null = null
+    let slot_name: string | null
 
     if (this._is_unit_component(new_unit_id)) {
       parent_id = this._spec_get_sub_component_parent_id(unit_id)
+      slot_name = this._spec_get_sub_component_slot_name(unit_id)
 
-      this._spec_append_component(parent_id, new_unit_id)
+      this._spec_append_component(parent_id, new_unit_id, slot_name)
     }
 
     this._sim_add_unit(
@@ -29276,6 +29405,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       bundle,
       null,
       null,
+      null,
       position,
       pin_position,
       layout_position
@@ -29541,6 +29671,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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
@@ -29550,15 +29682,23 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     this._search_start_unit_plugs = clone(this._get_unit_plugs(unit_id))
     this._search_start_unit_data = clone(this._get_unit_data(unit_id))
     this._search_start_graph_unit_spec = 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 && 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 = {
@@ -30827,7 +30967,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         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)) {
@@ -30881,8 +31021,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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)
@@ -31097,7 +31235,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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)
         }
       } else {
@@ -31112,7 +31250,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       const trait = 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,
@@ -31133,11 +31271,10 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       i = 0
 
       this._abort_sub_component_enter_base_animation[sub_component_id] =
-        this._plug_animate_sub_component_base(
+        this._animate_sub_component_base(
           sub_component_id,
           base,
           base_node,
-          leaf_layer,
           (leaf_id) => {
             if (i === 0) {
               const trait = extractTrait(frame, measureText)
@@ -31172,6 +31309,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           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)
@@ -31325,7 +31463,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         }
 
         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)
           }
 
@@ -31625,7 +31763,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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)
 
@@ -31647,7 +31786,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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)
@@ -31830,13 +31970,14 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
   }
 
-  private _animate_layout_leave_sub_component = () => {
+  private _layout_leave_sub_component = (animate: boolean = 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)
@@ -31859,10 +32000,18 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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'
@@ -31881,7 +32030,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       const all_slot_children: Dict<string[]> = {}
 
       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)
@@ -31896,6 +32045,9 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       const all_unlisten: 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]) {
@@ -31958,7 +32110,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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)
         }
@@ -31992,7 +32144,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         all_unlisten.push(stop)
       }
     } else {
-      // TODO
+      //
     }
   }
 
@@ -32417,7 +32569,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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
     }
@@ -32461,14 +32613,15 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       )
     )
 
-    this._move_sub_component_root(parent_id, children, slot_name)
+    this._layout_move_sub_component_root(parent_id, children, slot_name)
   }
 
-  private _move_sub_component_root = (
+  private _layout_move_sub_component_root = (
     parent_id: string,
     children: string[],
     slot_name: string = 'default',
     animate?: boolean,
+    emit: boolean = true,
     callback?: Callback
   ): Unlisten => {
     // console.log(
@@ -32483,12 +32636,22 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     animate = 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: Unlisten
 
+    let stop_core_animation: Unlisten[] = []
+    let layout_core_remaining_set: Set<string> = 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)
@@ -32516,41 +32679,51 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         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 = []
@@ -32606,9 +32779,30 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       )
 
       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)
+
+        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)
@@ -32619,14 +32813,19 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         )
 
         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()
       }
@@ -32640,6 +32839,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           () => {
             stop()
 
+            layout_core_remaining_set.delete(child_id)
+
             this._layout_layer_move_sub_component_child(
               current_layer_id,
               parent_id,
@@ -32650,9 +32851,15 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
             i++
           }
         )
+
+        stop_core_animation.push(stop)
       }
     }
 
+    this._refresh_layout_node_target_position(current_layer_id)
+
+    this._animate_all_current_layout_layer_node()
+
     if (animate) {
       //
     } else {
@@ -32700,16 +32907,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     return finish
   }
 
-  private _mem_append_sub_component_child = (
-    parent_id: string,
-    child_id: string,
-    slot_name: string
-  ): void => {}
-
   private _pre_append_sub_component_child = (
     parent_id: string,
     child_id: string,
-    slot_name: string
+    slot_name: string,
+    emit: boolean = true
   ): void => {
     // console.log('Graph', '_pre_append_sub_component_child', parent_id, child_id)
 
@@ -32717,16 +32919,17 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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,
+        {},
+        {}
+      )
   }
 
   private _state_pre_append_sub_component_child = (
@@ -32741,7 +32944,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     //   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,
@@ -32880,7 +33083,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       const parent_id = this._spec_get_sub_component_parent_id(sub_component_id)
 
       if (
-        !this._animating_sub_component_base_id.has(sub_component_id) &&
+        !this._is_sub_component_animating(sub_component_id) &&
         !this._animating_sub_component_fullwindow.has(sub_component_id)
       ) {
         if (this._tree_layout) {
@@ -32916,11 +33119,10 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       this._animating_sub_component_fullwindow.add(sub_component_id)
 
-      const stop = this._plug_animate_sub_component_base(
+      const stop = this._animate_sub_component_base(
         sub_component_id,
         base,
         [],
-        layer,
         (leaf_id: string) => {
           if (i === 0) {
             const color = sub_component.getColor()
@@ -33072,7 +33274,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
             ]
           } else {
             const slot_name =
-              this._get_sub_component_slot_name(sub_component_id)
+              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] =
@@ -33147,7 +33349,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     for (const sub_component_id of sub_component_ids) {
       if (
-        !this._animating_sub_component_base_id.has(sub_component_id) &&
+        !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)
@@ -33171,11 +33373,10 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       this._plug_sub_component_base(sub_component_id, base, [], layer)
 
-      const stop = this._plug_animate_sub_component_base(
+      const stop = this._animate_sub_component_base(
         sub_component_id,
         base,
         [],
-        layer,
         (leaf_id: string) => {
           if (i === 0) {
             reset_all_trait()
@@ -33333,6 +33534,10 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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)
@@ -33400,15 +33605,22 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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)
+    }
+  }
+
+  private _cancel_layout_parent_children_all_slot_animation = (
+    sub_component_id: string
+  ) => {
+    // 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)
     }
   }
 
@@ -33451,13 +33663,20 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           this._layout_parent_children_animation_frame[parent_id][slot_name]
         )
 
-        delete this._layout_parent_children_animation_frame[parent_id][
-          slot_name
-        ]
+        deepDestroy(this._layout_parent_children_animation_frame, [
+          parent_id,
+          slot_name,
+        ])
       }
     }
   }
 
+  private _cancel_layout_child_transfer_animation = (
+    child_id: string
+  ): void => {
+    this._animating_sub_component_transfer.delete(child_id)
+  }
+
   private _start_layout_children_animation = (
     parent_id: string,
     slot_name: string,
@@ -33495,7 +33714,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     //   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(
@@ -33541,12 +33760,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     include_scroll: () => boolean,
     callback: Callback
   ): Unlisten => {
-    const {
-      api: {
-        animation: { requestAnimationFrame },
-      },
-    } = this.$system
-
     const frame = () => {
       this._tick_animate_layout_transfer_children(
         parent_id,
@@ -33576,7 +33789,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       }
     }
 
-    requestAnimationFrame(frame)
+    this._start_layout_children_animation(parent_id, slot_name, frame)
 
     return () => {
       this._cancel_layout_parent_children_animation(parent_id, slot_name)
@@ -34069,30 +34282,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     } else {
       component.pullRoot(child_component)
     }
-  }
-
-  private _mem_push_parent_child = (
-    parent_id: string,
-    child_id: string,
-    slot_name: string
-  ): void => {
-    // 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)
   }
 
   private _mem_insert_parent_child = (
@@ -34111,10 +34302,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     // )
 
     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)
   }
 
   private _mem_layout_push_parent_root = (
@@ -34181,6 +34368,10 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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)
   }
 
   private _layout_layer_move_sub_component_child = (
@@ -34226,29 +34417,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
   }
 
-  private _layout_layer_move_sub_component_child_append = (
-    parent_id: string,
-    next_parent_id: string | null,
-    child_id: string
-  ): void => {
-    // 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
-    )
-  }
-
   private _ensure_parent_layout_layer = (
     sub_component_id: string
   ): LayoutLayer => {
@@ -34300,7 +34468,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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)
   }
@@ -34313,7 +34481,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     // 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)
   }
 
@@ -34324,7 +34492,9 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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)
+    }
   }
 
   private _remove_sub_component_from_root = (
@@ -34334,7 +34504,9 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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)
+    }
   }
 
   private _layout_collapse_sub_component = (
@@ -34542,7 +34714,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
   ): void => {
     if (parent_id) {
       appendSubComponentChild(
-        { parentId: parent_id, childId: child_id },
+        { parentId: parent_id, childId: child_id, slotName: slot_name },
         this._spec.component
       )
 
@@ -34667,10 +34839,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     parent_id: string,
     slot_name: string,
     next_parent_id: string | null,
-    next_slot_name: string
+    next_slot_name: string,
+    emit: boolean,
+    callback: Callback
   ): void => {
-    const children = this._spec_get_sub_component_children(parent_id)
-    const index = this._get_sub_component_index(parent_id)
+    const children = 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)
@@ -34686,39 +34860,71 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       )
     )
 
-    this._remove_sub_component_all_children(
+    this._remove_sub_component_children(
       parent_id,
       slot_name,
       next_parent_id,
-      next_slot_name
+      next_slot_name,
+      children,
+      emit,
+      callback
     )
   }
 
-  private _remove_sub_component_all_children = (
+  public remove_sub_component_children = (
     parent_id: string,
     slot_name: string,
     next_parent_id: string | null,
-    next_slot_name: string
+    next_slot_name: string,
+    children: string[],
+    emit: boolean = true,
+    callback: Callback
   ): void => {
-    const children = clone(this._spec_get_sub_component_children(parent_id))
+    const prev_parent_id_map = {}
+    const prev_slot_map = {}
 
-    this.remove_sub_component_children(
+    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(
+      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
+      children,
+      emit,
+      callback
     )
   }
 
-  private remove_sub_component_children = (
+  private _remove_sub_component_children = (
     parent_id: string,
     slot_name: string,
     next_parent_id: string | null,
     next_slot_name: string,
     children: string[],
-    emit: boolean = true
-  ): void => {
+    emit: boolean = true,
+    callback: Callback
+  ): Unlisten => {
     let { animate } = this._config()
 
     const parent_visible = this._is_layout_component_layer_visible(parent_id)
@@ -34729,15 +34935,69 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     const { x, y, width, height } = layout_parent_node
 
-    const parent_index = this._get_sub_component_index(parent_id)
+    const all_stop: Unlisten[] = []
+
+    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
+
+    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 = () => {
+        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
 
-    for (const child_id of children) {
-      this._cancel_sub_component_base_animation(child_id)
+    let parent_animation_finished = false
+    let children_animation_finished = false
 
+    for (const child_id of children) {
       this._layout_layer_move_sub_component_child(
         parent_id,
         next_parent_id,
@@ -34757,7 +35017,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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)
           } else {
@@ -34771,8 +35031,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       }
     }
 
-    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(
@@ -34817,12 +35075,11 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     if (this._tree_layout) {
       if (animate) {
         const parent_animating = this._is_sub_component_animating(parent_id)
+        const parent_layer = this._get_sub_component_layout_layer(parent_id)
 
         const parent_leaf_traits = []
 
-        const parent_layer = this._get_sub_component_layout_layer(parent_id)
-
-        const stop = this._animate_parent_component(
+        const stop_parent_animation = this._animate_parent_component(
           parent_id,
           parent_animating,
           parent_animating,
@@ -34832,37 +35089,34 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           false,
           () => ({ x: 0, y: -parent_layer.content.$element.scrollTop }),
           () => {
-            stop()
+            stop_parent_animation()
 
-            this._unplug_sub_component_root_base_frame(parent_id)
-            this._append_sub_component_root_base(parent_id)
-            this._enter_sub_component_frame(parent_id)
+            parent_animation_finished = true
 
-            return 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_()
+        const stop_children_animation =
+          this._play_layout_sub_component_remove_children_animation(
+            parent_id,
+            slot_name,
+            children,
+            true,
+            () => {
+              stop_children_animation()
 
-            this._end_layout_sub_component_transfer_children_animation(
-              parent_id,
-              slot_name
-            )
+              children_animation_finished = true
 
-            for (const child_id of children) {
-              this._enter_sub_component_frame(child_id)
-              this._append_sub_component_base(child_id)
+              finish_children()
             }
-          }
-        )
+          )
+
+        all_stop.push(stop_children_animation)
       } else {
         if (!parent_visible) {
           for (const child_id of children) {
@@ -34874,6 +35128,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         this._force_layout_node_traits(next_parent_id)
       }
     }
+
+    if (!animate) {
+      callback()
+    }
+
+    return finish
   }
 
   private _pre_remove_sub_component_child = (
@@ -34945,17 +35205,14 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     parent_id: string,
     next_parent_id: string | null
   ): void => {
+    // 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,
@@ -34975,6 +35232,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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)
   }
 
   private _mem_move_out_sub_component_child = (
@@ -34985,6 +35244,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
   ) => {
     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,
@@ -35060,7 +35325,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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(
@@ -35107,7 +35372,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     if (next_parent_id) {
       insertSubComponentChild(
-        { parentId: next_parent_id, childId: child_id, at: next_index },
+        {
+          parentId: next_parent_id,
+          childId: child_id,
+          slotName: next_slot_id,
+          at: next_index,
+        },
         this._spec.component
       )
 
@@ -35223,11 +35493,13 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
           const next_parent_id = this._get_current_layout_layer_id()
 
-          this._remove_sub_component_all_children(
+          this.remove_sub_component_all_children(
             node_id,
             'default',
             next_parent_id,
-            'default'
+            'default',
+            true,
+            () => {}
           )
 
           this.deselect_node(node_id)
@@ -35619,7 +35891,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
             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
@@ -35869,7 +36142,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       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)
+        this._make_add_unit_bundle_action(
+          next_unit_id,
+          new_bundle,
+          merges_,
+          plugs
+        )
       )
       actions.push(this._make_add_bundle_datum_action(datum_id, bundle))
 
@@ -35892,7 +36170,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     this._pod.$bulkEdit({ actions, fork, bubble })
   }
 
-  private _make_add_unit_action = (
+  private _make_add_unit_bundle_action = (
     unit_id: string,
     bundle: UnitBundleSpec,
     merges: GraphUnitMerges,
@@ -36168,7 +36446,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       merged_pin_ids,
       merge_pin_index,
       exposed_pin_ids,
-      exposed_pin_index
+      exposed_pin_index,
+      null,
+      null,
+      null,
+      null,
+      null
     )
 
     const { x, y, width, height } = this._node[new_unit_id]
@@ -36391,13 +36674,13 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     let sub_component_map: Dict<Component> = {}
 
     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 =
@@ -36405,10 +36688,17 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
         const next_sub_sub_component_id = deepGetOrDefault(
           map,
-          ['mappaing', 'unit', sub_sub_component_id, 'in', 'unit', 'unitId'],
+          ['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
       }
     }
@@ -37084,6 +37374,9 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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()
 
@@ -37097,6 +37390,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       )
 
       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)
       }
@@ -37110,7 +37405,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
 
     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)
       }
@@ -41332,7 +41627,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     pull_from_parent: boolean = true,
     destroy: boolean = true
   ): void => {
-    // 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)
 
@@ -41348,9 +41643,18 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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) {
@@ -41365,7 +41669,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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)
+            }
           }
         }
       }
@@ -41389,53 +41698,78 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       }
     }
 
-    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)
+    }
+
+    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)
 
-      this._animating_sub_component_base_id.delete(unit_id)
+        i--
+      }
     }
 
     if (this._tree_layout) {
       if (children.length > 0) {
-        const current_layer = this._get_current_layout_layer_id()
-
-        const current_slot = 'default'
+        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)
 
-        const parent_index = this._get_sub_component_index(unit_id)
+        for (const child_id of children) {
+          this._remove_sub_component_child(unit_id, child_id)
+        }
 
         let at = parent_index
 
         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,
+            parent_id,
             child_id,
-            current_slot,
-            at
+            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._remove_sub_component_root_base(child_id)
+          }
 
-            for (const child_id of children) {
-              this._append_sub_component_base(child_id)
-              this._enter_sub_component_frame(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)
           }
-        )
+        }
       }
     }
 
@@ -41452,7 +41786,12 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         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)
@@ -41502,19 +41841,10 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     delete this._resize_component_start_size[unit_id]
   }
 
-  private _sim_remove_sub_component_roots = (unit_id: string) => {
+  private _pull_sub_component = (unit_id: string) => {
     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)
 
@@ -41525,19 +41855,25 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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 {
         if (this._component.hasRoot(sub_component)) {
           this._component.pullRoot(sub_component)
         }
       }
-
-      this._component.removeSubComponent(unit_id)
-
-      sub_component.destroy()
     }
   }
 
+  private _remove_sub_component = (unit_id: string) => {
+    this._component.removeSubComponent(unit_id)
+  }
+
   private _sim_remove_layout_core = (unit_id: string): void => {
     // console.log('Graph', '_sim_remove_layout_core', unit_id)
 
@@ -41556,14 +41892,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       }
     }
 
-    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]
   }
 
@@ -43177,7 +43505,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       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)
 
@@ -46614,6 +46942,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         bundle,
         null,
         null,
+        null,
         position,
         pin_position,
         layout_position
@@ -47714,12 +48043,14 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       },
     } = 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)
         }
       }
     } else {
@@ -48110,6 +48441,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         new_unit_bundle,
         lowest_common_ancestor,
         undefined,
+        undefined,
         { x, y },
         { input: {}, output: {} },
         { x: 0, y: 0 },
@@ -48228,6 +48560,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           undefined,
           undefined,
           undefined,
+          undefined,
           position
         )
       )
@@ -49110,6 +49443,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       bundle,
       null,
       null,
+      null,
       position,
       undefined,
       layout_position
@@ -50135,7 +50469,9 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
             slot_name,
             next_parent_id,
             next_slot_name,
-            selected_children
+            selected_children,
+            true,
+            () => {}
           )
 
           this._refresh_layout_node_target_position(parent_id)
@@ -51746,13 +52082,13 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
         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 = graph.component?.children ?? []
 
         at = children.indexOf(unit_id)
 
-        this._spec_insert_component(null, unit_id, at)
+        this._spec_insert_component(null, unit_id, 'default', at)
       }
     }
 
@@ -51763,14 +52099,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       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 = keys(subComponents)
@@ -51780,7 +52109,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
     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)
       }
     }
 
@@ -51882,16 +52211,18 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
       const index = this._get_component_children_count(sub_component_id)
 
-      bulk_actions.push(
-        makeMoveSubComponentRootAction(
-          sub_component_id,
-          {},
-          children,
-          index,
-          {},
-          {}
+      if (children.length) {
+        bulk_actions.push(
+          makeMoveSubComponentRootAction(
+            sub_component_id,
+            {},
+            children,
+            index,
+            {},
+            {}
+          )
         )
-      )
+      }
     }
 
     for (const merge_id in merges) {
@@ -52151,6 +52482,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
             data_.unitId,
             data_.bundle,
             parentId,
+            data_.parentSlot,
             data_.parentIndex,
             data_.position,
             data_.pinPosition,
@@ -52165,6 +52497,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
               null,
               null,
               data_.parentId,
+              data_.parentSlot,
               data_.parentIndex,
               null,
               null,
@@ -52186,7 +52519,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
                 data_.unitId,
                 sub_component,
                 undefined,
-                undefined,
                 true
               )
 
@@ -52205,18 +52537,24 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
               const children = data_.children ?? []
               const childrenSlot = data_.childrenSlot ?? {}
+              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,
+                const finish = this._on_move_sub_component_root(
+                  {
+                    parentId: data_.unitId,
+                    slotMap: childrenSlot,
+                    children,
+                    prevParentIdMap,
+                    prevSlotMap,
+                    index: 0,
+                  },
+                  emit,
                   () => {
-                    this._animate_all_current_layout_layer_node()
-
                     this._force_finish_last_action = undefined
                   }
                 )
@@ -52350,7 +52688,15 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       }
       case 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 SET_UNIT_PIN_CONSTANT:
@@ -53258,19 +53604,24 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
   }
 
-  private _get_sub_component_children_slot = (sub_component_id: string) => {
+  private _spec_get_sub_component_children_slot = (
+    sub_component_id: string
+  ) => {
     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
   }
 
-  private _get_sub_component_slot_name = (sub_component_id: string): string => {
+  private _spec_get_sub_component_slot_name = (
+    sub_component_id: string
+  ): string => {
     const parent_id = this._spec_get_sub_component_parent_id(sub_component_id)
 
     if (parent_id) {
@@ -53296,7 +53647,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     // )
 
     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)
@@ -53316,20 +53667,6 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     }
   }
 
-  private _mem_push_sub_component = (
-    parent_id: string | null,
-    child_id: string,
-    slot_name: string
-  ) => {
-    // 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)
-    }
-  }
-
   private _mem_insert_sub_component_child = (
     parent_id: string,
     child_id: string,
@@ -53366,7 +53703,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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) {
@@ -53392,7 +53729,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     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) {
@@ -55294,7 +55631,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     // 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 })
 
@@ -55376,7 +55713,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       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(
@@ -55553,6 +55890,7 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
       plugs: plugss = {},
       parentId,
       parentIndex,
+      parentSlot,
       children = [],
       childrenSlot = {},
     } = data
@@ -55613,12 +55951,17 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         if (parentId) {
           if (parentIndex === null || parentIndex === undefined) {
             appendSubComponentChild(
-              { parentId, childId: unitId },
+              { parentId, childId: unitId, slotName: parentSlot },
               next_spec.component
             )
           } else {
             insertSubComponentChild(
-              { parentId, childId: unitId, at: parentIndex },
+              {
+                parentId,
+                childId: unitId,
+                slotName: parentSlot,
+                at: parentIndex,
+              },
               next_spec.component
             )
           }
@@ -56609,17 +56952,44 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
 
   private _on_move_sub_component_root = (
     data: GraphMoveSubComponentRootData,
-    emit: boolean = true
-  ) => {
+    emit: boolean = true,
+    callback: Callback
+  ): Unlisten => {
     const { fork, bubble } = this.$props
 
-    if (data.parentId) {
-      if (this._tree_layout) {
-        this._move_sub_component_root(
+    let unlisten: Unlisten
+
+    const prevParentId = data.prevParentIdMap[data.children[0]] ?? null
+    const prevSlotName = data.prevSlotMap[data.children[0]] ?? 'default'
+    const parentId = data.parentId
+    const slotName = data.slotMap[data.children[0]] ?? '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
+          true,
+          emit,
+          callback
         )
       } else {
         let i = 0
@@ -56628,11 +56998,22 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
           const slot_name = data.slotMap?.[child_id] ?? 'default'
           const prev_parent_id = data.prevParentIdMap?.[child_id] ?? 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,
@@ -56642,26 +57023,38 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
         }
 
         i++
+
+        unlisten = NOOP
+
+        callback()
       }
     } else {
+      let i = 0
+
       for (const child_id of data.children) {
-        this._measure_sub_component_base(child_id)
+        const slot_name = data.slotMap?.[child_id] ?? 'default'
+        const prev_parent_id = data.prevParentIdMap?.[child_id] ?? 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 = data.prevParentIdMap[data.children[0]] ?? null
-      const prevSlotName = data.prevSlotMap[data.children[0]] ?? 'default'
-      const parentId = data.parentId
-      const slotName = data.slotMap[data.children[0]] ?? 'default'
-      const children = data.children
+      i++
 
-      this.remove_sub_component_children(
-        prevParentId,
-        prevSlotName,
-        parentId,
-        slotName,
-        children,
-        emit
-      )
+      unlisten = NOOP
+
+      callback()
     }
 
     emit &&
@@ -56679,6 +57072,8 @@ export class Editor_ extends Element<HTMLDivElement, Props_> {
     this._refresh_layout_node_target_position(null)
 
     this._animate_all_current_layout_layer_node()
+
+    return unlisten
   }
 
   private _on_set_unit_pin_constant = (