@joint/core 4.2.0-alpha.1 → 4.2.0-beta.2

package/dist/joint.nowrap.js

@@ -1,4 +1,4 @@
-/*! JointJS v4.2.0-alpha.1 (2025-09-25) - JavaScript diagramming library
+/*! JointJS v4.2.0-beta.2 (2025-11-04) - JavaScript diagramming library
 
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -12517,7 +12517,9 @@ var joint = (function (exports) {
 	  defaultTheme: 'default',
 	  // The maximum delay required for two consecutive touchend events to be interpreted
 	  // as a double-tap.
-	  doubleTapInterval: 300
+	  doubleTapInterval: 300,
+	  // Name of the attribute used to store the layer id on the cell model.
+	  layerAttribute: 'layer'
 	};
 
 	// TODO: should not read config outside the mvc package
@@ -14447,16 +14449,12 @@ var joint = (function (exports) {
 	var Model = function (attributes, options) {
 	  var attrs = attributes || {};
 	  options || (options = {});
+	  this.eventPrefix = options.eventPrefix || '';
 	  this.preinitialize.apply(this, arguments);
 	  this.cid = uniqueId(this.cidPrefix);
 	  this.attributes = {};
 	  if (options.collection) this.collection = options.collection;
-	  var attributeDefaults = result(this, 'defaults');
-
-	  // Just _.defaults would work fine, but the additional _.extends
-	  // is in there for historical reasons. See #3843.
-	  attrs = defaults(assign({}, attributeDefaults, attrs), attributeDefaults);
-	  this.set(attrs, options);
+	  this._setDefaults(attrs, options);
 	  this.changed = {};
 	  this.initialize.apply(this, arguments);
 	};
@@ -14545,14 +14543,14 @@ var joint = (function (exports) {
 	    if (this.idAttribute in attrs) {
 	      var prevId = this.id;
 	      this.id = this.get(this.idAttribute);
-	      this.trigger('changeId', this, prevId, options);
+	      this.trigger(this.eventPrefix + 'changeId', this, prevId, options);
 	    }
 
 	    // Trigger all relevant attribute changes.
 	    if (!silent) {
 	      if (changes.length) this._pending = options;
 	      for (var i = 0; i < changes.length; i++) {
-	        this.trigger('change:' + changes[i], this, current[changes[i]], options);
+	        this.trigger(this.eventPrefix + 'change:' + changes[i], this, current[changes[i]], options);
 	      }
 	    }
 
@@ -14563,7 +14561,7 @@ var joint = (function (exports) {
 	      while (this._pending) {
 	        options = this._pending;
 	        this._pending = false;
-	        this.trigger('change', this, options);
+	        this.trigger(this.eventPrefix + 'change', this, options);
 	      }
 	    }
 	    this._pending = false;
@@ -14642,6 +14640,13 @@ var joint = (function (exports) {
 	      validationError: error
 	    }));
 	    return false;
+	  },
+	  _setDefaults: function (ctorAttributes, options) {
+	    const attributeDefaults = result(this, 'defaults');
+	    // Just _.defaults would work fine, but the additional _.extends
+	    // is in there for historical reasons. See #3843.
+	    const attributes = defaults(assign({}, attributeDefaults, ctorAttributes), attributeDefaults);
+	    this.set(attributes, options);
 	  }
 	});
 
@@ -15561,6 +15566,30 @@ var joint = (function (exports) {
 	assign(attributesNS, offsetAttributesNS);
 	const attributes = attributesNS;
 
+	// Internal tags to identify objects as specific JointJS types.
+	// Used instead of `instanceof` for performance and cross-frame safety.
+
+	// dia.Cell
+	const CELL_MARKER = Symbol('joint.cellMarker');
+
+	// dia.CellCollection
+	const CELL_COLLECTION_MARKER = Symbol('joint.cellCollectionMarker');
+
+	// dia.GraphLayer
+	const GRAPH_LAYER_MARKER = Symbol('joint.graphLayerMarker');
+
+	// dia.GraphLayerCollection
+	const GRAPH_LAYER_COLLECTION_MARKER = Symbol('joint.graphLayerCollectionMarker');
+
+	// dia.CellView
+	const CELL_VIEW_MARKER = Symbol('joint.cellViewMarker');
+
+	// dia.LayerView
+	const LAYER_VIEW_MARKER = Symbol('joint.layerViewMarker');
+
+	// dia.GraphLayerView
+	const GRAPH_LAYER_VIEW_MARKER = Symbol('joint.graphLayerViewMarker');
+
 	// Cell base model.
 	// --------------------------
 
@@ -15581,35 +15610,18 @@ var joint = (function (exports) {
 	  }
 	}
 	const Cell = Model.extend({
-	  // This is the same as mvc.Model with the only difference that is uses util.merge
-	  // instead of just _.extend. The reason is that we want to mixin attributes set in upper classes.
-	  constructor: function (attributes, options) {
-	    var defaults;
-	    var attrs = attributes || {};
-	    if (typeof this.preinitialize === 'function') {
-	      // Check to support an older version
-	      this.preinitialize.apply(this, arguments);
-	    }
-	    this.cid = uniqueId('c');
-	    this.attributes = {};
-	    if (options && options.collection) this.collection = options.collection;
-	    if (options && options.parse) attrs = this.parse(attrs, options) || {};
-	    if (defaults = result(this, 'defaults')) {
-	      //<custom code>
-	      // Replaced the call to _.defaults with util.merge.
+	  cidPrefix: 'c',
+	  // Default attributes are merged deeply instead of shallowly.
+	  _setDefaults: function (ctorAttributes, options) {
+	    let attributes;
+	    const attributeDefaults = result(this, 'defaults');
+	    if (attributeDefaults) {
 	      const customizer = options && options.mergeArrays === true ? false : config$3.cellDefaultsMergeStrategy || attributesMerger;
-	      attrs = merge({}, defaults, attrs, customizer);
-	      //</custom code>
-	    }
-	    this.set(attrs, options);
-	    this.changed = {};
-	    if (options && options.portLayoutNamespace) {
-	      this.portLayoutNamespace = options.portLayoutNamespace;
-	    }
-	    if (options && options.portLabelLayoutNamespace) {
-	      this.portLabelLayoutNamespace = options.portLabelLayoutNamespace;
+	      attributes = merge({}, attributeDefaults, ctorAttributes, customizer);
+	    } else {
+	      attributes = ctorAttributes;
 	    }
-	    this.initialize.apply(this, arguments);
+	    this.set(attributes, options);
 	  },
 	  translate: function (dx, dy, opt) {
 	    throw new Error('Must define a translate() method.');
@@ -15649,9 +15661,9 @@ var joint = (function (exports) {
 	    }
 	    return finalAttributes;
 	  },
-	  initialize: function (options) {
+	  initialize: function (attributes) {
 	    const idAttribute = this.getIdAttribute();
-	    if (!options || options[idAttribute] === undefined) {
+	    if (!attributes || attributes[idAttribute] === undefined) {
 	      this.set(idAttribute, this.generateId(), {
 	        silent: true
 	      });
@@ -15722,39 +15734,24 @@ var joint = (function (exports) {
 	    this.ports = ports;
 	  },
 	  remove: function (opt = {}) {
-	    // Store the graph in a variable because `this.graph` won't be accessible
-	    // after `this.trigger('remove', ...)` down below.
 	    const {
 	      graph,
 	      collection
 	    } = this;
-	    if (!graph) {
+	    // If the cell is part of a graph, remove it using the graph API.
+	    // To make sure the cell is removed in a batch operation.
+	    if (graph) {
+	      graph.removeCell(this, opt);
+	    } else {
 	      // The collection is a common mvc collection (not the graph collection).
 	      if (collection) collection.remove(this, opt);
-	      return this;
-	    }
-	    graph.startBatch('remove');
-
-	    // First, unembed this cell from its parent cell if there is one.
-	    const parentCell = this.getParentCell();
-	    if (parentCell) {
-	      parentCell.unembed(this, opt);
 	    }
-
-	    // Remove also all the cells, which were embedded into this cell
-	    const embeddedCells = this.getEmbeddedCells();
-	    for (let i = 0, n = embeddedCells.length; i < n; i++) {
-	      const embed = embeddedCells[i];
-	      if (embed) {
-	        embed.remove(opt);
-	      }
-	    }
-	    this.trigger('remove', this, graph.attributes.cells, opt);
-	    graph.stopBatch('remove');
 	    return this;
 	  },
 	  toFront: function (opt) {
-	    var graph = this.graph;
+	    const {
+	      graph
+	    } = this;
 	    if (graph) {
 	      opt = defaults(opt || {}, {
 	        foregroundEmbeds: true
@@ -15771,10 +15768,11 @@ var joint = (function (exports) {
 	        cells = [this];
 	      }
 	      const sortedCells = opt.foregroundEmbeds ? cells : sortBy(cells, cell => cell.z());
-	      const maxZ = graph.maxZIndex();
+	      const layerId = graph.getCellLayerId(this);
+	      const maxZ = graph.maxZIndex(layerId);
 	      let z = maxZ - cells.length + 1;
-	      const collection = graph.get('cells');
-	      let shouldUpdate = collection.toArray().indexOf(sortedCells[0]) !== collection.length - cells.length;
+	      const layerCells = graph.getLayer(layerId).cellCollection.toArray();
+	      let shouldUpdate = layerCells.indexOf(sortedCells[0]) !== layerCells.length - cells.length;
 	      if (!shouldUpdate) {
 	        shouldUpdate = sortedCells.some(function (cell, index) {
 	          return cell.z() !== z + index;
@@ -15792,7 +15790,9 @@ var joint = (function (exports) {
 	    return this;
 	  },
 	  toBack: function (opt) {
-	    var graph = this.graph;
+	    const {
+	      graph
+	    } = this;
 	    if (graph) {
 	      opt = defaults(opt || {}, {
 	        foregroundEmbeds: true
@@ -15809,9 +15809,10 @@ var joint = (function (exports) {
 	        cells = [this];
 	      }
 	      const sortedCells = opt.foregroundEmbeds ? cells : sortBy(cells, cell => cell.z());
-	      let z = graph.minZIndex();
-	      var collection = graph.get('cells');
-	      let shouldUpdate = collection.toArray().indexOf(sortedCells[0]) !== 0;
+	      const layerId = graph.getCellLayerId(this);
+	      let z = graph.minZIndex(layerId);
+	      const layerCells = graph.getLayer(layerId).cellCollection.toArray();
+	      let shouldUpdate = layerCells.indexOf(sortedCells[0]) !== 0;
 	      if (!shouldUpdate) {
 	        shouldUpdate = sortedCells.some(function (cell, index) {
 	          return cell.z() !== z + index;
@@ -16174,41 +16175,42 @@ var joint = (function (exports) {
 	    opt = assign(defaults, opt);
 	    var firstFrameTime = 0;
 	    var interpolatingFunction;
+	    const transitionKey = Array.isArray(path) ? path.join(delim) : path;
 	    var setter = function (runtime) {
 	      var id, progress, propertyValue;
 	      firstFrameTime = firstFrameTime || runtime;
 	      runtime -= firstFrameTime;
 	      progress = runtime / opt.duration;
 	      if (progress < 1) {
-	        this._transitionIds[path] = id = nextFrame(setter);
+	        this._transitionIds[transitionKey] = id = nextFrame(setter);
 	      } else {
 	        progress = 1;
-	        delete this._transitionIds[path];
+	        delete this._transitionIds[transitionKey];
 	      }
 	      propertyValue = interpolatingFunction(opt.timingFunction(progress));
 	      opt.transitionId = id;
 	      this.prop(path, propertyValue, opt);
-	      if (!id) this.trigger('transition:end', this, path);
+	      if (!id) this.trigger('transition:end', this, transitionKey);
 	    }.bind(this);
 	    const {
 	      _scheduledTransitionIds
 	    } = this;
 	    let initialId;
 	    var initiator = callback => {
-	      if (_scheduledTransitionIds[path]) {
-	        _scheduledTransitionIds[path] = without(_scheduledTransitionIds[path], initialId);
-	        if (_scheduledTransitionIds[path].length === 0) {
-	          delete _scheduledTransitionIds[path];
+	      if (_scheduledTransitionIds[transitionKey]) {
+	        _scheduledTransitionIds[transitionKey] = without(_scheduledTransitionIds[transitionKey], initialId);
+	        if (_scheduledTransitionIds[transitionKey].length === 0) {
+	          delete _scheduledTransitionIds[transitionKey];
 	        }
 	      }
 	      this.stopPendingTransitions(path, delim);
 	      interpolatingFunction = opt.valueFunction(getByPath(this.attributes, path, delim), value);
-	      this._transitionIds[path] = nextFrame(callback);
-	      this.trigger('transition:start', this, path);
+	      this._transitionIds[transitionKey] = nextFrame(callback);
+	      this.trigger('transition:start', this, transitionKey);
 	    };
 	    initialId = setTimeout(initiator, opt.delay, setter);
-	    _scheduledTransitionIds[path] || (_scheduledTransitionIds[path] = []);
-	    _scheduledTransitionIds[path].push(initialId);
+	    _scheduledTransitionIds[transitionKey] || (_scheduledTransitionIds[transitionKey] = []);
+	    _scheduledTransitionIds[transitionKey].push(initialId);
 	    return initialId;
 	  },
 	  getTransitions: function () {
@@ -16220,7 +16222,8 @@ var joint = (function (exports) {
 	    } = this;
 	    let transitions = Object.keys(_scheduledTransitionIds);
 	    if (path) {
-	      const pathArray = path.split(delim);
+	      // Ensure all path segments are strings for `isEqual` comparison, since it strictly compares values
+	      const pathArray = Array.isArray(path) ? path.map(item => String(item)) : path.split(delim);
 	      transitions = transitions.filter(key => {
 	        return isEqual(pathArray, key.split(delim).slice(0, pathArray.length));
 	      });
@@ -16240,7 +16243,8 @@ var joint = (function (exports) {
 	    } = this;
 	    let transitions = Object.keys(_transitionIds);
 	    if (path) {
-	      const pathArray = path.split(delim);
+	      // Ensure all path segments are strings for `isEqual` comparison, since it strictly compares values
+	      const pathArray = Array.isArray(path) ? path.map(item => String(item)) : path.split(delim);
 	      transitions = transitions.filter(key => {
 	        return isEqual(pathArray, key.split(delim).slice(0, pathArray.length));
 	      });
@@ -16258,7 +16262,7 @@ var joint = (function (exports) {
 	    this.stopPendingTransitions(path, delim);
 	    return this;
 	  },
-	  // A shorcut making it easy to create constructs like the following:
+	  // A shortcut making it easy to create constructs like the following:
 	  // `var el = (new joint.shapes.standard.Rectangle()).addTo(graph)`.
 	  addTo: function (graph, opt) {
 	    graph.addCell(this, opt);
@@ -16340,6 +16344,29 @@ var joint = (function (exports) {
 	    .getPointRotatedAroundCenter(this.angle(), x, y)
 	    // Transform the absolute position into relative
 	    .difference(this.position());
+	  },
+	  layer: function (layerId, opt) {
+	    const layerAttribute = config$3.layerAttribute;
+
+	    // Getter:
+
+	    // If `undefined` return the current layer ID
+	    if (layerId === undefined) {
+	      return this.get(layerAttribute) || null;
+	    }
+
+	    // Setter:
+
+	    // If strictly `null` unset the layer
+	    if (layerId === null) {
+	      return this.unset(layerAttribute, opt);
+	    }
+
+	    // Otherwise set the layer ID
+	    if (!isString(layerId)) {
+	      throw new Error('dia.Cell: Layer id must be a string.');
+	    }
+	    return this.set(layerAttribute, layerId, opt);
 	  }
 	}, {
 	  getAttributeDefinition: function (attrName) {
@@ -16364,6 +16391,9 @@ var joint = (function (exports) {
 	    return Cell;
 	  }
 	});
+	Object.defineProperty(Cell.prototype, CELL_MARKER, {
+	  value: true
+	});
 
 	const wrapWith = function (object, methods, wrapper) {
 	  if (isString(wrapper)) {
@@ -17394,7 +17424,17 @@ var joint = (function (exports) {
 	  }
 	};
 	const elementPortPrototype = {
-	  _initializePorts: function () {
+	  _initializePorts: function (options) {
+	    if (options) {
+	      // Override port layout namespaces if provided in options
+	      if (options.portLayoutNamespace) {
+	        this.portLayoutNamespace = options.portLayoutNamespace;
+	      }
+	      // Override port label layout namespaces if provided in options
+	      if (options.portLabelLayoutNamespace) {
+	        this.portLabelLayoutNamespace = options.portLabelLayoutNamespace;
+	      }
+	    }
 	    this._createPortData();
 	    this.on('change:ports', function () {
 	      this._processRemovedPort();
@@ -18076,8 +18116,8 @@ var joint = (function (exports) {
 	    },
 	    angle: 0
 	  },
-	  initialize: function () {
-	    this._initializePorts();
+	  initialize: function (attributes, options) {
+	    this._initializePorts(options);
 	    Cell.prototype.initialize.apply(this, arguments);
 	  },
 	  /**
@@ -21618,7 +21658,7 @@ var joint = (function (exports) {
 	      for (i = 0; i < toAdd.length; i++) {
 	        if (at != null) options.index = at + i;
 	        model = toAdd[i];
-	        model.trigger('add', model, this, options);
+	        model.trigger(model.eventPrefix + 'add', model, this, options);
 	      }
 	      if (sort || orderChanged) this.trigger('sort', this, options);
 	      if (toAdd.length || toRemove.length || toMerge.length) {
@@ -21681,7 +21721,7 @@ var joint = (function (exports) {
 	  // properties, or an attributes object that is transformed through modelId.
 	  get: function (obj) {
 	    if (obj == null) return void 0;
-	    return this._byId[obj] || this._byId[this.modelId(this._isModel(obj) ? obj.attributes : obj, obj.idAttribute)] || obj.cid && this._byId[obj.cid];
+	    return this._byId.get(obj) || this._byId.get(this.modelId(this._isModel(obj) ? obj.attributes : obj, obj.idAttribute)) || obj.cid && this._byId.get(obj.cid);
 	  },
 	  // Returns `true` if the model is in the collection.
 	  has: function (obj) {
@@ -21720,7 +21760,8 @@ var joint = (function (exports) {
 	  },
 	  // Define how to uniquely identify models in the collection.
 	  modelId: function (attrs, idAttribute) {
-	    return attrs[idAttribute || this.model.prototype.idAttribute || 'id'];
+	    var _this$model$prototype;
+	    return attrs[idAttribute || ((_this$model$prototype = this.model.prototype) === null || _this$model$prototype === void 0 ? void 0 : _this$model$prototype.idAttribute) || 'id'];
 	  },
 	  // Get an iterator of all models in this collection.
 	  values: function () {
@@ -21777,17 +21818,17 @@ var joint = (function (exports) {
 	  _reset: function () {
 	    this.length = 0;
 	    this.models = [];
-	    this._byId = {};
+	    this._byId = new Map();
 	  },
 	  // Prepare a hash of attributes (or other model) to be added to this
 	  // collection.
 	  _prepareModel: function (attrs, options) {
 	    if (this._isModel(attrs)) {
-	      if (!attrs.collection) attrs.collection = this;
+	      if (!options.dry && !attrs.collection) attrs.collection = this;
 	      return attrs;
 	    }
 	    options = options ? clone$1(options) : {};
-	    options.collection = this;
+	    if (!options.dry) options.collection = this;
 	    var model;
 	    if (this.model.prototype) {
 	      model = new this.model(attrs, options);
@@ -21811,12 +21852,12 @@ var joint = (function (exports) {
 
 	      // Remove references before triggering 'remove' event to prevent an
 	      // infinite loop. #3693
-	      delete this._byId[model.cid];
+	      this._byId.delete(model.cid);
 	      var id = this.modelId(model.attributes, model.idAttribute);
-	      if (id != null) delete this._byId[id];
+	      if (id != null) this._byId.delete(id);
 	      if (!options.silent) {
 	        options.index = index;
-	        model.trigger('remove', model, this, options);
+	        model.trigger(model.eventPrefix + 'remove', model, this, options);
 	      }
 	      removed.push(model);
 	      this._removeReference(model, options);
@@ -21831,17 +21872,17 @@ var joint = (function (exports) {
 	  },
 	  // Internal method to create a model's ties to a collection.
 	  _addReference: function (model, options) {
-	    this._byId[model.cid] = model;
+	    this._byId.set(model.cid, model);
 	    var id = this.modelId(model.attributes, model.idAttribute);
-	    if (id != null) this._byId[id] = model;
+	    if (id != null) this._byId.set(id, model);
 	    model.on('all', this._onModelEvent, this);
 	  },
 	  // Internal method to sever a model's ties to a collection.
 	  _removeReference: function (model, options) {
-	    delete this._byId[model.cid];
+	    this._byId.delete(model.cid);
 	    var id = this.modelId(model.attributes, model.idAttribute);
-	    if (id != null) delete this._byId[id];
-	    if (this === model.collection) delete model.collection;
+	    if (id != null) this._byId.delete(id);
+	    if (!options.dry && this === model.collection) delete model.collection;
 	    model.off('all', this._onModelEvent, this);
 	  },
 	  // Internal method called every time a model in the set fires an event.
@@ -21850,12 +21891,12 @@ var joint = (function (exports) {
 	  // in other collections are ignored.
 	  _onModelEvent: function (event, model, collection, options) {
 	    if (model) {
-	      if ((event === 'add' || event === 'remove') && collection !== this) return;
+	      if ((event === model.eventPrefix + 'add' || event === model.eventPrefix + 'remove') && collection !== this) return;
 	      if (event === 'changeId') {
 	        var prevId = this.modelId(model.previousAttributes(), model.idAttribute);
 	        var id = this.modelId(model.attributes, model.idAttribute);
-	        if (prevId != null) delete this._byId[prevId];
-	        if (id != null) this._byId[id] = model;
+	        if (prevId != null) this._byId.delete(prevId);
+	        if (id != null) this._byId.set(id, model);
 	      }
 	    }
 	    this.trigger.apply(this, arguments);
@@ -26681,21 +26722,181 @@ var joint = (function (exports) {
 		topRight: topRight
 	};
 
-	const GraphCells = Collection.extend({
-	  initialize: function (models, opt) {
-	    // Set the optional namespace where all model classes are defined.
-	    if (opt.cellNamespace) {
-	      this.cellNamespace = opt.cellNamespace;
-	    } else {
-	      /* eslint-disable no-undef */
-	      this.cellNamespace = typeof joint !== 'undefined' && has(joint, 'shapes') ? joint.shapes : null;
-	      /* eslint-enable no-undef */
+	/**
+	 * @class GraphLayersController
+	 * @description Coordinates interactions between the graph and its layers.
+	 * Automatically moves cells between layers when the layer attribute changes.
+	 */
+	class GraphLayersController extends Listener {
+	  constructor(options) {
+	    super(options);
+
+	    // Make sure there are no arguments passed to the callbacks.
+	    // See the `mvc.Listener` documentation for more details.
+	    this.callbackArguments = [];
+	    const graph = options.graph;
+	    if (!graph) {
+	      throw new Error('GraphLayersController: "graph" option is required.');
+	    }
+	    this.graph = graph;
+	    this.layerCollection = graph.layerCollection;
+	    this.startListening();
+	  }
+	  startListening() {
+	    // Handle all events from the layer collection and its inner cell collections.
+	    this.listenTo(this.layerCollection, 'all', this.onLayerCollectionEvent);
+	  }
+
+	  /**
+	   * @description When a cell changes its layer attribute,
+	   * move the cell to the target layer.
+	   */
+	  onCellChange(cell, options) {
+	    if (!cell.hasChanged(config$3.layerAttribute)) return;
+	    // Move the cell to the appropriate layer
+	    const targetLayerId = this.graph.getCellLayerId(cell);
+	    this.layerCollection.moveCellBetweenLayers(cell, targetLayerId, options);
+	  }
+
+	  /**
+	   * @description When a cell is removed from a layer,
+	   * also remove its embeds and connected links from the graph.
+	   * Note: an embedded cell might come from a different layer,
+	   * so we can not use the layer's cell collection to remove it.
+	   */
+	  onCellRemove(cell, options) {
+	    // If the cell is being moved from one layer to another,
+	    // no further action is needed.
+	    if (options.fromLayer) return;
+
+	    // When replacing a cell, we do not want to remove its embeds or
+	    // unembed it from its parent.
+	    if (options.replace) return;
+
+	    // First, unembed this cell from its parent cell if there is one.
+	    const parentCell = cell.getParentCell();
+	    if (parentCell) {
+	      parentCell.unembed(cell, options);
+	    }
+
+	    // Remove also all the cells, which were embedded into this cell
+	    const embeddedCells = cell.getEmbeddedCells();
+	    for (let i = 0, n = embeddedCells.length; i < n; i++) {
+	      const embed = embeddedCells[i];
+	      if (embed) {
+	        this.layerCollection.removeCell(embed, options);
+	      }
+	    }
+
+	    // When not clearing the whole graph or replacing the cell,
+	    // we don't want to remove the connected links.
+	    if (!options.clear) {
+	      // Applications might provide a `disconnectLinks` option set to `true` in order to
+	      // disconnect links when a cell is removed rather then removing them. The default
+	      // is to remove all the associated links.
+	      if (options.disconnectLinks) {
+	        this.graph.disconnectLinks(cell, options);
+	      } else {
+	        this.graph.removeLinks(cell, options);
+	      }
+	    }
+	  }
+	  onLayerCollectionEvent(eventName, model) {
+	    if (!model) return;
+	    if (model[CELL_MARKER]) {
+	      // First handle cell-specific cases that require custom processing,
+	      // then forward the event to the graph.
+	      // For example, when a cell is removed from a layer, its embeds and
+	      // connected links must be removed as well. Listeners on the graph
+	      // should receive removal notifications in the following order:
+	      // embeds → links → cell.
+	      switch (eventName) {
+	        case 'change':
+	          /* ('change', cell, options) */
+	          this.onCellChange.call(this, model, arguments[2]);
+	          break;
+	        case 'remove':
+	          /* ('remove', cell, collection, options) */
+	          // When a cell is removed from a layer,
+	          // ensure it is also removed from the graph.
+	          this.onCellRemove.call(this, model, arguments[3]);
+	          break;
+	      }
+	      // Notify the graph about cell events.
+	      this.forwardCellEvent.apply(this, arguments);
+	      return;
+	    }
+	    if (model[CELL_COLLECTION_MARKER]) {
+	      this.forwardCellCollectionEvent.apply(this, arguments);
+	      return;
+	    }
+	    if (model[GRAPH_LAYER_MARKER]) {
+	      this.forwardLayerEvent.apply(this, arguments);
+	      return;
+	    }
+	    if (model[GRAPH_LAYER_COLLECTION_MARKER]) {
+	      this.forwardLayerCollectionEvent.apply(this, arguments);
+	      return;
+	    }
+	  }
+	  forwardLayerEvent() {
+	    // Note: the layer event prefix is `layer:`
+	    this.graph.trigger.apply(this.graph, arguments);
+	  }
+	  forwardCellEvent(eventName, cell) {
+	    var _arguments$;
+	    // Moving a cell from one layer to another is an internal operation
+	    // that should not be exposed at the graph level.
+	    // The single `move` event is triggered instead.
+	    if ((eventName === 'remove' || eventName === 'add') && (_arguments$ = arguments[3]) !== null && _arguments$ !== void 0 && _arguments$.fromLayer) return;
+	    this.graph.trigger.apply(this.graph, arguments);
+	  }
+	  forwardCellCollectionEvent(eventName) {
+	    // Do not forward `layer:remove` or `layer:sort` events to the graph
+	    if (eventName !== 'sort') return;
+	    // Backwards compatibility:
+	    // Trigger 'sort' event for cell collection 'sort' events
+	    this.graph.trigger.apply(this.graph, arguments);
+	  }
+	  forwardLayerCollectionEvent(eventName) {
+	    if (eventName === 'reset') {
+	      // Currently, there is no need to forward `layers:reset` event.
+	      // The graph `fromJSON()` triggers a single `reset` event after
+	      // resetting cells, layers and attributes.
+	      return;
+	    }
+	    // Forward layer collection events with `layers:` prefix.
+	    // For example `layers:reset` event when the layer collection is reset
+	    arguments[0] = 'layers:' + arguments[0];
+	    this.graph.trigger.apply(this.graph, arguments);
+	  }
+	}
+
+	/**
+	 * @class CellCollection
+	 * @description A CellCollection is a collection of cells which supports z-index management.
+	 * Additionally, it facilitates creating cell models from JSON using cellNamespace
+	 * and stores a reference to the graph when the cell model has been added.
+	 */
+	class CellCollection extends Collection {
+	  [CELL_COLLECTION_MARKER] = true;
+	  initialize(_models, opt) {
+	    this.layer = opt.layer;
+	  }
+
+	  // Method for checking whether an object should be considered a model for
+	  // the purposes of adding to the collection.
+	  _isModel(model) {
+	    return Boolean(model[CELL_MARKER]);
+	  }
+
+	  // Overriding the default `model` method to create cell models
+	  // based on their `type` attribute and the `cellNamespace` option.
+	  model(attrs, opt) {
+	    const namespace = this.cellNamespace;
+	    if (!namespace) {
+	      throw new Error('dia.CellCollection: cellNamespace is required to instantiate a Cell from JSON.');
 	    }
-	    this.graph = opt.graph;
-	  },
-	  model: function (attrs, opt) {
-	    const collection = opt.collection;
-	    const namespace = collection.cellNamespace;
 	    const {
 	      type
 	    } = attrs;
@@ -26706,56 +26907,474 @@ var joint = (function (exports) {
 	      throw new Error(`dia.Graph: Could not find cell constructor for type: '${type}'. Make sure to add the constructor to 'cellNamespace'.`);
 	    }
 	    return new ModelClass(attrs, opt);
-	  },
-	  _addReference: function (model, options) {
-	    Collection.prototype._addReference.apply(this, arguments);
+	  }
+
+	  // Override to set graph reference
+	  _addReference(model, options) {
+	    super._addReference(model, options);
+
 	    // If not in `dry` mode and the model does not have a graph reference yet,
 	    // set the reference.
 	    if (!options.dry && !model.graph) {
-	      model.graph = this.graph;
+	      model.graph = this.layer.graph;
 	    }
-	  },
-	  _removeReference: function (model, options) {
-	    Collection.prototype._removeReference.apply(this, arguments);
+	  }
+
+	  // Override to remove graph reference
+	  _removeReference(model, options) {
+	    super._removeReference(model, options);
+
 	    // If not in `dry` mode and the model has a reference to this exact graph,
 	    // remove the reference.
-	    if (!options.dry && model.graph === this.graph) {
+	    // Note: graph reference is removed from the layer after the `remove` event is fired.
+	    // Due to this, event handlers can still access the graph during the `remove` event.
+	    if (!options.dry && model.graph === this.layer.graph) {
 	      model.graph = null;
 	    }
-	  },
+	  }
+
+	  // remove graph reference additionally
+	  _removeReferenceFast(model, options) {
+	    model.off('all', this._onModelEvent, this);
+	    if (!options.dry) {
+	      // If not in `dry` mode and the model has a reference
+	      // to this exact graph/collection, remove the reference.
+	      if (this === model.collection) {
+	        delete model.collection;
+	      }
+	      if (model.graph === this.layer.graph) {
+	        model.graph = null;
+	      }
+	    }
+	  }
+
 	  // `comparator` makes it easy to sort cells based on their `z` index.
-	  comparator: function (model) {
+	  comparator(model) {
 	    return model.get('z') || 0;
 	  }
-	});
-	const Graph = Model.extend({
-	  initialize: function (attrs, opt) {
-	    opt = opt || {};
 
-	    // Passing `cellModel` function in the options object to graph allows for
-	    // setting models based on attribute objects. This is especially handy
-	    // when processing JSON graphs that are in a different than JointJS format.
-	    var cells = new GraphCells([], {
-	      model: opt.cellModel,
-	      cellNamespace: opt.cellNamespace,
-	      graph: this
+	  // This method overrides base mvc.Collection implementation
+	  // in a way that improves performance of resetting large collections.
+	  // For layers specifically, there is an option where we put references
+	  // from the main collection in order to improve performance when
+	  // there is only one layer
+	  reset(models, options) {
+	    options = assign({}, {
+	      add: true,
+	      remove: false,
+	      merge: false
+	    }, options);
+	    for (let i = 0; i < this.models.length; i++) {
+	      this._removeReferenceFast(this.models[i], options);
+	    }
+	    options.previousModels = this.models;
+	    this._reset();
+	    for (let i = 0; i < models.length; i++) {
+	      const model = this._prepareModel(models[i], options);
+	      if (model) {
+	        this.models.push(model);
+	        this._addReference(model, options);
+	      }
+	    }
+	    this.length = this.models.length;
+	    const sort = this.comparator && options.sort !== false;
+	    if (sort) {
+	      this.sort({
+	        silent: true
+	      });
+	    }
+	    if (!options.silent) {
+	      this.trigger('reset', this, options);
+	    }
+	    return this.models;
+	  }
+	  minZIndex() {
+	    var _this$first;
+	    return ((_this$first = this.first()) === null || _this$first === void 0 ? void 0 : _this$first.get('z')) || 0;
+	  }
+	  maxZIndex() {
+	    var _this$last;
+	    return ((_this$last = this.last()) === null || _this$last === void 0 ? void 0 : _this$last.get('z')) || 0;
+	  }
+	}
+
+	const DEFAULT_GRAPH_LAYER_TYPE = 'GraphLayer';
+
+	/**
+	 * @class GraphLayer
+	 * @description A GraphLayer is a model representing a single layer in a dia.Graph.
+	 */
+	class GraphLayer extends Model {
+	  [GRAPH_LAYER_MARKER] = true;
+	  preinitialize() {
+	    // This allows for propagating events from the inner `cellCollection` collection
+	    // without any prefix and therefore distinguish them from the events
+	    // fired by the GraphLayer model itself.
+	    this.eventPrefix = 'layer:';
+	  }
+	  defaults() {
+	    return {
+	      type: DEFAULT_GRAPH_LAYER_TYPE
+	    };
+	  }
+	  initialize(attrs, options = {}) {
+	    super.initialize(attrs, options);
+	    this.cellCollection = new CellCollection([], {
+	      layer: this
 	    });
-	    Model.prototype.set.call(this, 'cells', cells);
 
-	    // Make all the events fired in the `cells` collection available.
-	    // to the outside world.
-	    cells.on('all', this.trigger, this);
+	    // Forward all events from the inner `cellCollection` collection
+	    this.cellCollection.on('all', this.trigger, this);
+	    // Listen to cell changes to manage z-index sorting
+	    this.cellCollection.on('change', this.onCellChange, this);
+	  }
+	  onCellChange(cell, opt) {
+	    if (opt.sort === false || !cell.hasChanged('z')) return;
+	    this.cellCollection.sort();
+	  }
+
+	  /**
+	   * @public
+	   * @description Returns all cells in this layer.
+	   */
+	  getCells() {
+	    return this.cellCollection.toArray();
+	  }
+	}
 
-	    // JointJS automatically doesn't trigger re-sort if models attributes are changed later when
-	    // they're already in the collection. Therefore, we're triggering sort manually here.
-	    this.on('change:z', this._sortOnChangeZ, this);
+	/**
+	 * @class GraphLayerCollection
+	 * @description A collection of layers used in dia.Graph. It facilitates creating layers from JSON using layerNamespace.
+	 */
+	const GraphLayerCollection = Collection.extend({
+	  defaultLayerNamespace: {
+	    GraphLayer
+	  },
+	  /**
+	   * @override
+	   * @description Initializes the collection and sets up the layer and cell namespaces.
+	   */
+	  initialize: function (_models, options = {}) {
+	    const {
+	      layerNamespace,
+	      cellNamespace,
+	      graph
+	    } = options;
 
-	    // `joint.dia.Graph` keeps an internal data structure (an adjacency list)
-	    // for fast graph queries. All changes that affect the structure of the graph
-	    // must be reflected in the `al` object. This object provides fast answers to
-	    // questions such as "what are the neighbours of this node" or "what
-	    // are the sibling links of this link".
+	    // Initialize the namespace that holds all available layer classes.
+	    // Custom namespaces are merged with the default ones.
+	    this.layerNamespace = assign({}, this.defaultLayerNamespace, layerNamespace);
+
+	    // Initialize the namespace for all cell model classes, if provided.
+	    if (cellNamespace) {
+	      this.cellNamespace = cellNamespace;
+	    } else {
+	      /* eslint-disable no-undef */
+	      this.cellNamespace = typeof joint !== 'undefined' && has(joint, 'shapes') ? joint.shapes : null;
+	      /* eslint-enable no-undef */
+	    }
+	    this.graph = graph;
+	  },
+	  /**
+	   * @override
+	   * @description Overrides the default `model` method
+	   * to create layer models based on their `type` attribute.
+	   */
+	  model: function (attrs, opt) {
+	    const collection = opt.collection;
+	    const namespace = collection.layerNamespace;
+	    const {
+	      type
+	    } = attrs;
+
+	    // Find the model class based on the `type` attribute in the cell namespace
+	    const GraphLayerClass = getByPath(namespace, type, '.');
+	    if (!GraphLayerClass) {
+	      throw new Error(`dia.Graph: Could not find layer constructor for type: '${type}'. Make sure to add the constructor to 'layerNamespace'.`);
+	    }
+	    return new GraphLayerClass(attrs, opt);
+	  },
+	  // Override to set graph reference
+	  _addReference(layer, options) {
+	    Collection.prototype._addReference.call(this, layer, options);
+
+	    // assign graph and cellNamespace references
+	    // to the added layer
+	    layer.graph = this.graph;
+	    layer.cellCollection.cellNamespace = this.cellNamespace;
+	  },
+	  // Override to remove graph reference
+	  _removeReference(layer, options) {
+	    Collection.prototype._removeReference.call(this, layer, options);
+
+	    // remove graph and cellNamespace references
+	    // from the removed layer
+	    layer.graph = null;
+	    layer.cellCollection.cellNamespace = null;
+	  },
+	  /**
+	   * @override
+	   * @description Overrides the default `_prepareModel` method
+	   * to set default layer type if missing.
+	   */
+	  _prepareModel: function (attrs, options) {
+	    if (!attrs[GRAPH_LAYER_MARKER]) {
+	      // Add a mandatory `type` attribute if missing
+	      if (!attrs.type) {
+	        const preparedAttributes = clone$1(attrs);
+	        preparedAttributes.type = DEFAULT_GRAPH_LAYER_TYPE;
+	        arguments[0] = preparedAttributes;
+	      }
+	    }
+	    return Collection.prototype._prepareModel.apply(this, arguments);
+	  },
+	  /**
+	   * @override
+	   * @description Add an assertion to prevent direct resetting of the collection.
+	   */
+	  reset(models, options) {
+	    this._assertInternalCall(options);
+	    return Collection.prototype.reset.apply(this, arguments);
+	  },
+	  /**
+	   * @override
+	   * @description Add an assertion to prevent direct addition of layers.
+	   */
+	  add(models, options) {
+	    this._assertInternalCall(options);
+	    return Collection.prototype.add.apply(this, arguments);
+	  },
+	  /**
+	   * @override
+	   * @description Add an assertion to prevent direct removal of layers.
+	   */
+	  remove(models, options) {
+	    this._assertInternalCall(options);
+	    return Collection.prototype.remove.apply(this, arguments);
+	  },
+	  /**
+	   * @override
+	   * @description Overrides the default `_onModelEvent` method
+	   * to distinguish between events coming from different model types.
+	   */
+	  _onModelEvent(_, model) {
+	    if (model && model[CELL_MARKER]) {
+	      // Do not filter cell `add` and `remove` events
+	      // See `mvc.Collection` for more details
+	      this.trigger.apply(this, arguments);
+	      return;
+	    }
 
+	    // For other events, use the default behavior
+	    Collection.prototype._onModelEvent.apply(this, arguments);
+	  },
+	  /**
+	   * @protected
+	   * @description Asserts that the collection manipulation
+	   * is done via internal graph methods. Otherwise, it throws an error.
+	   * This is a temporary measure until layers API is stabilized.
+	   */
+	  _assertInternalCall(options) {
+	    if (options && !options.graph && !options.silent) {
+	      throw new Error('dia.GraphLayerCollection: direct manipulation of the collection is not supported, use graph methods instead.');
+	    }
+	  },
+	  /**
+	   * @public
+	   * @description Inserts a layer before another layer or at the end if `beforeLayerId` is null.
+	   */
+	  insert(layerInit, beforeLayerId = null, options = {}) {
+	    const id = layerInit.id;
+	    if (id === beforeLayerId) {
+	      // Inserting before itself is a no-op
+	      return;
+	    }
+	    if (beforeLayerId && !this.has(beforeLayerId)) {
+	      throw new Error(`dia.GraphLayerCollection: Layer "${beforeLayerId}" does not exist`);
+	    }
+
+	    // See if the layer is already in the collection
+	    let currentIndex = -1;
+	    if (this.has(id)) {
+	      currentIndex = this.findIndex(l => l.id === id);
+	      if (currentIndex === this.length - 1 && !beforeLayerId) {
+	        // The layer is already at the end
+	        return;
+	      }
+	      // Remove the layer from its current position
+	      this.remove(id, {
+	        silent: true
+	      });
+	    }
+
+	    // At what index to insert the layer?
+	    let insertAt;
+	    if (!beforeLayerId) {
+	      insertAt = this.length;
+	    } else {
+	      insertAt = this.findIndex(l => l.id === beforeLayerId);
+	    }
+	    if (currentIndex !== -1) {
+	      // Re-insert the layer at the new position.
+	      this.add(layerInit, {
+	        at: insertAt,
+	        silent: true
+	      });
+	      // Trigger `sort` event manually
+	      // since we are not using collection sorting workflow
+	      this.trigger('sort', this, options);
+	    } else {
+	      // Add to the collection and trigger an event
+	      // when new layer has been added
+	      this.add(layerInit, {
+	        ...options,
+	        at: insertAt
+	      });
+	    }
+	  },
+	  /**
+	   * @public
+	   * @description Finds and returns a cell by its id from all layers.
+	   */
+	  getCell(cellRef) {
+	    // TODO: should we create a map of cells for faster lookup?
+	    for (const layer of this.models) {
+	      const cell = layer.cellCollection.get(cellRef);
+	      if (cell) {
+	        return cell;
+	      }
+	    }
+	    // Backward compatibility: return undefined if cell is not found
+	    return undefined;
+	  },
+	  /**
+	   * @public
+	   * @description Returns all cells in all layers in the correct order.
+	   */
+	  getCells() {
+	    const layers = this.models;
+	    if (layers.length === 1) {
+	      // Single layer:
+	      // Fast path, just return the copy of the only layer's cells
+	      return layers[0].getCells();
+	    }
+	    // Multiple layers:
+	    // Each layer has its models sorted already, so we can just concatenate
+	    // them in the order of layers.
+	    const cells = [];
+	    for (const layer of layers) {
+	      Array.prototype.push.apply(cells, layer.cellCollection.models);
+	    }
+	    return cells;
+	  },
+	  /**
+	   * @public
+	   * @description Removes a cell from its current layer.
+	   */
+	  removeCell(cell, options = {}) {
+	    var _cell$collection;
+	    const cellCollection = (_cell$collection = cell.collection) === null || _cell$collection === void 0 || (_cell$collection = _cell$collection.layer) === null || _cell$collection === void 0 ? void 0 : _cell$collection.cellCollection;
+	    if (!cellCollection) return;
+	    cellCollection.remove(cell, options);
+	  },
+	  /**
+	   * @public
+	   * @description Move a cell from its current layer to a target layer.
+	   */
+	  moveCellBetweenLayers(cell, targetLayerId, options = {}) {
+	    var _cell$collection2;
+	    const sourceLayer = (_cell$collection2 = cell.collection) === null || _cell$collection2 === void 0 ? void 0 : _cell$collection2.layer;
+	    if (!sourceLayer) {
+	      throw new Error('dia.GraphLayerCollection: cannot move a cell that is not part of any layer.');
+	    }
+	    const targetLayer = this.get(targetLayerId);
+	    if (!targetLayer) {
+	      throw new Error(`dia.GraphLayerCollection: cannot move cell to layer '${targetLayerId}' because such layer does not exist.`);
+	    }
+	    if (sourceLayer === targetLayer) {
+	      // 1. The provided cell is already in the target layer
+	      // 2. Implicit default layer vs. explicit default (or vice versa)
+	      // No follow-up action needed
+	      return;
+	    }
+	    const moveOptions = {
+	      ...options,
+	      fromLayer: sourceLayer.id,
+	      toLayer: targetLayer.id
+	    };
+	    // Move the cell between the two layer collections
+	    sourceLayer.cellCollection.remove(cell, moveOptions);
+	    targetLayer.cellCollection.add(cell, moveOptions);
+	    // Trigger a single `move` event to ease distinguishing layer moves
+	    // from add/remove operations
+	    cell.trigger('move', cell, moveOptions);
+	  },
+	  /**
+	   * @public
+	   * @description Adds a cell to the specified layer.
+	   */
+	  addCellToLayer(cell, layerId, options = {}) {
+	    const targetLayer = this.get(layerId);
+	    if (!targetLayer) {
+	      throw new Error(`dia.GraphLayerCollection: layer "${layerId}" does not exist.`);
+	    }
+	    const addOptions = {
+	      ...options,
+	      toLayer: targetLayer.id
+	    };
+	    // Add the cell to the target layer collection
+	    targetLayer.cellCollection.add(cell, addOptions);
+	  }
+	});
+	Object.defineProperty(GraphLayerCollection.prototype, GRAPH_LAYER_COLLECTION_MARKER, {
+	  value: true
+	});
+
+	/**
+	 * @class GraphTopologyIndex
+	 * @description Maintains an index of the graph topology (adjacency list)
+	 * for fast graph queries.
+	 */
+	class GraphTopologyIndex extends Listener {
+	  constructor(options) {
+	    super(options);
+
+	    // Make sure there are no arguments passed to the callbacks.
+	    // See the `mvc.Listener` documentation for more details.
+	    this.callbackArguments = [];
+	    this.layerCollection = options.layerCollection;
+	    if (!this.layerCollection) {
+	      throw new Error('GraphTopologyIndex: "layerCollection" option is required.');
+	    }
+	    this.initializeIndex();
+	    this.startListening();
+	  }
+
+	  /**
+	   * @public
+	   * @description Start listening to graph and layer collection events
+	   * to maintain the topology index.
+	   */
+	  startListening() {
+	    this.listenTo(this.layerCollection.graph, {
+	      'add': this._restructureOnAdd,
+	      'remove': this._restructureOnRemove,
+	      'reset': this._restructureOnReset
+	    });
+	    // Listening to the collection instead of the graph
+	    // to avoid reacting to graph attribute change events
+	    // e.g. graph.set('source', ...);
+	    this.listenTo(this.layerCollection, {
+	      'change:source': this._restructureOnChangeSource,
+	      'change:target': this._restructureOnChangeTarget
+	    });
+	  }
+
+	  /**
+	   * @protected
+	   * @description Initialize the internal data structures.
+	   */
+	  initializeIndex() {
 	    // Outgoing edges per node. Note that we use a hash-table for the list
 	    // of outgoing edges for a faster lookup.
 	    // [nodeId] -> Object [edgeId] -> true
@@ -26771,21 +27390,27 @@ var joint = (function (exports) {
 	    // having to go through the whole cells array.
 	    // [edgeId] -> true
 	    this._edges = {};
-	    this._batches = {};
-	    cells.on('add', this._restructureOnAdd, this);
-	    cells.on('remove', this._restructureOnRemove, this);
-	    cells.on('reset', this._restructureOnReset, this);
-	    cells.on('change:source', this._restructureOnChangeSource, this);
-	    cells.on('change:target', this._restructureOnChangeTarget, this);
-	    cells.on('remove', this._removeCell, this);
-	  },
-	  _sortOnChangeZ: function () {
-	    this.get('cells').sort();
-	  },
-	  _restructureOnAdd: function (cell) {
+	  }
+
+	  /**
+	   * @protected
+	   * @description Restructure the topology index on graph reset.
+	   * E.g. when fromJSON or resetCells is called.
+	   */
+	  _restructureOnReset() {
+	    this.initializeIndex();
+	    this.layerCollection.getCells().forEach(this._restructureOnAdd, this);
+	  }
+
+	  /**
+	   * @protected
+	   * @description Restructure the topology index on cell addition.
+	   * @param {dia.Cell} cell - The cell being added.
+	   */
+	  _restructureOnAdd(cell) {
 	    if (cell.isLink()) {
 	      this._edges[cell.id] = true;
-	      var {
+	      const {
 	        source,
 	        target
 	      } = cell.attributes;
@@ -26798,11 +27423,17 @@ var joint = (function (exports) {
 	    } else {
 	      this._nodes[cell.id] = true;
 	    }
-	  },
-	  _restructureOnRemove: function (cell) {
+	  }
+
+	  /**
+	   * @protected
+	   * @description Restructure the topology index on cell removal.
+	   * @param {dia.Cell} cell - The cell being removed.
+	   */
+	  _restructureOnRemove(cell) {
 	    if (cell.isLink()) {
 	      delete this._edges[cell.id];
-	      var {
+	      const {
 	        source,
 	        target
 	      } = cell.attributes;
@@ -26815,89 +27446,222 @@ var joint = (function (exports) {
 	    } else {
 	      delete this._nodes[cell.id];
 	    }
-	  },
-	  _restructureOnReset: function (cells) {
-	    // Normalize into an array of cells. The original `cells` is GraphCells mvc collection.
-	    cells = cells.models;
-	    this._out = {};
-	    this._in = {};
-	    this._nodes = {};
-	    this._edges = {};
-	    cells.forEach(this._restructureOnAdd, this);
-	  },
-	  _restructureOnChangeSource: function (link) {
-	    var prevSource = link.previous('source');
+	  }
+
+	  /**
+	   * @protected
+	   * @description Restructure the topology index on link source change.
+	   * @param {dia.Link} link - The link being changed.
+	   */
+	  _restructureOnChangeSource(link) {
+	    const prevSource = link.previous('source');
 	    if (prevSource.id && this._out[prevSource.id]) {
 	      delete this._out[prevSource.id][link.id];
 	    }
-	    var source = link.attributes.source;
+	    const source = link.attributes.source;
 	    if (source.id) {
 	      (this._out[source.id] || (this._out[source.id] = {}))[link.id] = true;
 	    }
-	  },
-	  _restructureOnChangeTarget: function (link) {
-	    var prevTarget = link.previous('target');
+	  }
+
+	  /**
+	   * @protected
+	   * @description Restructure the topology index on link target change.
+	   * @param {dia.Link} link - The link being changed.
+	   */
+	  _restructureOnChangeTarget(link) {
+	    const prevTarget = link.previous('target');
 	    if (prevTarget.id && this._in[prevTarget.id]) {
 	      delete this._in[prevTarget.id][link.id];
 	    }
-	    var target = link.get('target');
+	    const target = link.get('target');
 	    if (target.id) {
 	      (this._in[target.id] || (this._in[target.id] = {}))[link.id] = true;
 	    }
-	  },
-	  // Return all outbound edges for the node. Return value is an object
-	  // of the form: [edgeId] -> true
-	  getOutboundEdges: function (node) {
-	    return this._out && this._out[node] || {};
-	  },
-	  // Return all inbound edges for the node. Return value is an object
-	  // of the form: [edgeId] -> true
-	  getInboundEdges: function (node) {
-	    return this._in && this._in[node] || {};
+	  }
+
+	  /**
+	   * @public
+	   * @description Get all outbound edges for the node. Time complexity: O(1).
+	   * @param {string} nodeId - The id of the node.
+	   * @returns {Object} - An object of the form: [edgeId] -> true.
+	   */
+	  getOutboundEdges(nodeId) {
+	    return this._out[nodeId] || {};
+	  }
+
+	  /**
+	   * @public
+	   * @description Get all inbound edges for the node. Time complexity: O(1).
+	   * @param {string} nodeId - The id of the node.
+	   * @returns {Object} - An object of the form: [edgeId] -> true.
+	   */
+	  getInboundEdges(nodeId) {
+	    return this._in[nodeId] || {};
+	  }
+
+	  /**
+	   * @public
+	   * @description Get all sink nodes (leafs) in the graph. Time complexity: O(|V|).
+	   * @returns {string[]} - Array of node ids.
+	   */
+	  getSinkNodes() {
+	    const sinks = [];
+	    for (const nodeId in this._nodes) {
+	      if (!this._out[nodeId] || isEmpty(this._out[nodeId])) {
+	        sinks.push(nodeId);
+	      }
+	    }
+	    return sinks;
+	  }
+
+	  /**
+	   * @public
+	   * @description Get all source nodes (roots) in the graph. Time complexity: O(|V|).
+	   * @returns {string[]} - Array of node ids.
+	   */
+	  getSourceNodes() {
+	    const sources = [];
+	    for (const nodeId in this._nodes) {
+	      if (!this._in[nodeId] || isEmpty(this._in[nodeId])) {
+	        sources.push(nodeId);
+	      }
+	    }
+	    return sources;
+	  }
+
+	  /**
+	   * @public
+	   * @description Return `true` if `nodeId` is a source node (root). Time complexity: O(1).
+	   * @param {string} nodeId - The id of the node to check.
+	   * @returns {boolean}
+	   */
+	  isSourceNode(nodeId) {
+	    return !this._in[nodeId] || isEmpty(this._in[nodeId]);
+	  }
+
+	  /**
+	   * @public
+	   * @description Return `true` if `nodeId` is a sink node (leaf). Time complexity: O(1).
+	   * @param {string} nodeId - The id of the node to check.
+	   * @returns {boolean}
+	   */
+	  isSinkNode(nodeId) {
+	    return !this._out[nodeId] || isEmpty(this._out[nodeId]);
+	  }
+	}
+
+	// The ID of the default graph layer.
+	const DEFAULT_LAYER_ID = 'cells';
+	const Graph = Model.extend({
+	  /**
+	   * @todo Remove in v5.0.0
+	   * @description In legacy mode, the information about layers is not
+	   * exported into JSON.
+	   */
+	  legacyMode: true,
+	  /**
+	   * @protected
+	   * @description The ID of the default layer.
+	   */
+	  defaultLayerId: DEFAULT_LAYER_ID,
+	  initialize: function (attrs, options = {}) {
+	    const layerCollection = this.layerCollection = new GraphLayerCollection([], {
+	      layerNamespace: options.layerNamespace,
+	      cellNamespace: options.cellNamespace,
+	      graph: this,
+	      /** @deprecated use cellNamespace instead */
+	      model: options.cellModel
+	    });
+
+	    // The default setup includes a single default layer.
+	    layerCollection.add({
+	      id: DEFAULT_LAYER_ID
+	    }, {
+	      graph: this.cid
+	    });
+
+	    /**
+	     * @todo Remove in v5.0.0
+	     * @description Retain legacy 'cells' collection in attributes for backward compatibility.
+	     * Applicable only when the default layer setup is used.
+	     */
+	    this.attributes.cells = this.getLayer(DEFAULT_LAYER_ID).cellCollection;
+
+	    // Controller that manages communication between the graph and its layers.
+	    this.layersController = new GraphLayersController({
+	      graph: this
+	    });
+
+	    // `Graph` keeps an internal data structure (an adjacency list)
+	    // for fast graph queries. All changes that affect the structure of the graph
+	    // must be reflected in the `al` object. This object provides fast answers to
+	    // questions such as "what are the neighbors of this node" or "what
+	    // are the sibling links of this link".
+	    this.topologyIndex = new GraphTopologyIndex({
+	      layerCollection
+	    });
+	    this._batches = {};
 	  },
 	  toJSON: function (opt = {}) {
-	    // JointJS does not recursively call `toJSON()` on attributes that are themselves models/collections.
-	    // It just clones the attributes. Therefore, we must call `toJSON()` on the cells collection explicitly.
-	    var json = Model.prototype.toJSON.apply(this, arguments);
-	    json.cells = this.get('cells').toJSON(opt.cellAttributes);
+	    const {
+	      layerCollection
+	    } = this;
+	    // Get the graph model attributes as a base JSON.
+	    const json = Model.prototype.toJSON.apply(this, arguments);
+
+	    // Add `cells` array holding all the cells in the graph.
+	    json.cells = this.getCells().map(cell => cell.toJSON(opt.cellAttributes));
+	    if (this.legacyMode) {
+	      // Backwards compatibility for legacy setup
+	      // with single default layer 'cells'.
+	      // In this case, we do not need to export layers.
+	      return json;
+	    }
+
+	    // Add `layers` array holding all the layers in the graph.
+	    json.layers = layerCollection.toJSON();
+
+	    // Add `defaultLayer` property indicating the default layer ID.
+	    json.defaultLayer = this.defaultLayerId;
 	    return json;
 	  },
 	  fromJSON: function (json, opt) {
-	    if (!json.cells) {
+	    const {
+	      cells,
+	      layers,
+	      defaultLayer,
+	      ...attributes
+	    } = json;
+	    if (!cells) {
 	      throw new Error('Graph JSON must contain cells array.');
 	    }
-	    return this.set(json, opt);
-	  },
-	  set: function (key, val, opt) {
-	    var attrs;
 
-	    // Handle both `key`, value and {key: value} style arguments.
-	    if (typeof key === 'object') {
-	      attrs = key;
-	      opt = val;
-	    } else {
-	      (attrs = {})[key] = val;
+	    // The `fromJSON` should trigger a single 'reset' event at the end.
+	    // Set all attributes silently for now.
+	    this.set(attributes, {
+	      silent: true
+	    });
+	    if (layers) {
+	      // Reset the layers collection
+	      // (`layers:reset` is not forwarded to the graph).
+	      this._resetLayers(layers, defaultLayer, opt);
 	    }
-
-	    // Make sure that `cells` attribute is handled separately via resetCells().
-	    if (attrs.hasOwnProperty('cells')) {
-	      this.resetCells(attrs.cells, opt);
-	      attrs = omit(attrs, 'cells');
+	    if (cells) {
+	      // Reset the cells collection and trigger the 'reset' event.
+	      this.resetCells(cells, opt);
 	    }
-
-	    // The rest of the attributes are applied via original set method.
-	    return Model.prototype.set.call(this, attrs, opt);
+	    return this;
 	  },
+	  /** @deprecated  */
 	  clear: function (opt) {
 	    opt = assign({}, opt, {
 	      clear: true
 	    });
-	    var collection = this.get('cells');
-	    if (collection.length === 0) return this;
+	    const cells = this.getCells();
+	    if (cells.length === 0) return this;
 	    this.startBatch('clear', opt);
-
-	    // The elements come after the links.
-	    var cells = collection.sortBy(function (cell) {
+	    const sortedCells = sortBy(cells, cell => {
 	      return cell.isLink() ? 1 : 2;
 	    });
 	    do {
@@ -26905,43 +27669,56 @@ var joint = (function (exports) {
 	      // Note that all the links are removed first, so it's
 	      // safe to remove the elements without removing the connected
 	      // links first.
-	      cells.shift().remove(opt);
-	    } while (cells.length > 0);
+	      this.layerCollection.removeCell(sortedCells.shift(), opt);
+	    } while (sortedCells.length > 0);
 	    this.stopBatch('clear');
 	    return this;
 	  },
-	  _prepareCell: function (cell) {
-	    let attrs;
-	    if (cell instanceof Model) {
-	      attrs = cell.attributes;
+	  _prepareCell: function (cellInit, opt) {
+	    let cellAttributes;
+	    if (cellInit[CELL_MARKER]) {
+	      cellAttributes = cellInit.attributes;
 	    } else {
-	      attrs = cell;
+	      cellAttributes = cellInit;
 	    }
-	    if (!isString(attrs.type)) {
+	    if (!isString(cellAttributes.type)) {
 	      throw new TypeError('dia.Graph: cell type must be a string.');
 	    }
-	    return cell;
+
+	    // Backward compatibility: prior v4.2, z-index was not set during reset.
+	    if (opt && opt.ensureZIndex) {
+	      if (cellAttributes.z === undefined) {
+	        const layerId = cellAttributes[config$3.layerAttribute] || this.defaultLayerId;
+	        const zIndex = this.maxZIndex(layerId) + 1;
+	        if (cellInit[CELL_MARKER]) {
+	          // Set with event in case there is a listener
+	          // directly on the cell instance
+	          // (the cell is not part of graph yet)
+	          cellInit.set('z', zIndex, opt);
+	        } else {
+	          cellAttributes.z = zIndex;
+	        }
+	      }
+	    }
+	    return cellInit;
 	  },
-	  minZIndex: function () {
-	    var firstCell = this.get('cells').first();
-	    return firstCell ? firstCell.get('z') || 0 : 0;
+	  minZIndex: function (layerId = this.defaultLayerId) {
+	    const layer = this.getLayer(layerId);
+	    return layer.cellCollection.minZIndex();
 	  },
-	  maxZIndex: function () {
-	    var lastCell = this.get('cells').last();
-	    return lastCell ? lastCell.get('z') || 0 : 0;
+	  maxZIndex: function (layerId = this.defaultLayerId) {
+	    const layer = this.getLayer(layerId);
+	    return layer.cellCollection.maxZIndex();
 	  },
-	  addCell: function (cell, opt) {
-	    if (Array.isArray(cell)) {
-	      return this.addCells(cell, opt);
+	  addCell: function (cellInit, options) {
+	    if (Array.isArray(cellInit)) {
+	      return this.addCells(cellInit, options);
 	    }
-	    if (cell instanceof Model) {
-	      if (!cell.has('z')) {
-	        cell.set('z', this.maxZIndex() + 1);
-	      }
-	    } else if (cell.z === undefined) {
-	      cell.z = this.maxZIndex() + 1;
-	    }
-	    this.get('cells').add(this._prepareCell(cell, opt), opt || {});
+	    this._prepareCell(cellInit, {
+	      ...options,
+	      ensureZIndex: true
+	    });
+	    this.layerCollection.addCellToLayer(cellInit, this.getCellLayerId(cellInit), options);
 	    return this;
 	  },
 	  addCells: function (cells, opt) {
@@ -26949,50 +27726,278 @@ var joint = (function (exports) {
 	    cells = flattenDeep(cells);
 	    opt.maxPosition = opt.position = cells.length - 1;
 	    this.startBatch('add', opt);
-	    cells.forEach(function (cell) {
+	    cells.forEach(cell => {
 	      this.addCell(cell, opt);
 	      opt.position--;
-	    }, this);
+	    });
 	    this.stopBatch('add', opt);
 	    return this;
 	  },
-	  // When adding a lot of cells, it is much more efficient to
-	  // reset the entire cells collection in one go.
-	  // Useful for bulk operations and optimizations.
-	  resetCells: function (cells, opt) {
-	    var preparedCells = toArray$1(cells).map(function (cell) {
-	      return this._prepareCell(cell, opt);
-	    }, this);
-	    this.get('cells').reset(preparedCells, opt);
+	  /**
+	   * @public
+	   * @description Reset the cells in the graph.
+	   * Useful for bulk operations and optimizations.
+	   */
+	  resetCells: function (cellInits, options) {
+	    const {
+	      layerCollection
+	    } = this;
+	    // Note: `cellInits` is always an array and `options` is always an object.
+	    // See `wrappers.cells` at the end of this file.
+
+	    // When resetting cells, do not set z-index if not provided.
+	    const prepareOptions = {
+	      ...options,
+	      ensureZIndex: false
+	    };
+
+	    // Initialize a map of layer IDs to arrays of cells
+	    const layerCellsMap = layerCollection.reduce((map, layer) => {
+	      map[layer.id] = [];
+	      return map;
+	    }, {});
+
+	    // Distribute cells into their respective layers
+	    for (let i = 0; i < cellInits.length; i++) {
+	      const cellInit = cellInits[i];
+	      const layerId = this.getCellLayerId(cellInit);
+	      if (layerId in layerCellsMap) {
+	        this._prepareCell(cellInit, prepareOptions);
+	        layerCellsMap[layerId].push(cellInit);
+	      } else {
+	        throw new Error(`dia.Graph: Layer "${layerId}" does not exist.`);
+	      }
+	    }
+
+	    // Reset each layer's cell collection with the corresponding cells.
+	    layerCollection.each(layer => {
+	      layer.cellCollection.reset(layerCellsMap[layer.id], options);
+	    });
+
+	    // Trigger a single `reset` event on the graph
+	    // (while multiple `reset` events are triggered on layers).
+	    // Backwards compatibility: use default layer collection
+	    // The `collection` parameter is retained for backwards compatibility,
+	    // and it is subject to removal in future releases.
+	    this.trigger('reset', this.getDefaultLayer().cellCollection, options);
 	    return this;
 	  },
-	  removeCells: function (cells, opt) {
-	    if (cells.length) {
-	      this.startBatch('remove');
-	      invoke(cells, 'remove', opt);
-	      this.stopBatch('remove');
+	  /**
+	   * @public
+	   * @description Get the layer ID in which the cell resides.
+	   * Cells without an explicit layer are assigned to the default layer.
+	   * @param {dia.Cell | Object} cellInit - Cell model or attributes.
+	   * @returns {string} - The layer ID.
+	   */
+	  getCellLayerId: function (cellInit) {
+	    if (!cellInit) {
+	      throw new Error('dia.Graph: No cell provided.');
+	    }
+	    const cellAttributes = cellInit[CELL_MARKER] ? cellInit.attributes : cellInit;
+	    return cellAttributes[config$3.layerAttribute] || this.defaultLayerId;
+	  },
+	  /**
+	   * @protected
+	   * @description Reset the layers in the graph.
+	   * It assumes the existing cells have been removed beforehand
+	   * or can be discarded.
+	   */
+	  _resetLayers: function (layers, defaultLayerId, options = {}) {
+	    if (!Array.isArray(layers) || layers.length === 0) {
+	      throw new Error('dia.Graph: At least one layer must be defined.');
+	    }
+
+	    // Resetting layers disables legacy mode
+	    this.legacyMode = false;
+	    this.layerCollection.reset(layers, {
+	      ...options,
+	      graph: this.cid
+	    });
+
+	    // If no default layer is specified, use the first layer as default
+	    if (defaultLayerId) {
+	      // The default layer must be one of the defined layers
+	      if (!this.hasLayer(defaultLayerId)) {
+	        throw new Error(`dia.Graph: default layer "${defaultLayerId}" does not exist.`);
+	      }
+	      this.defaultLayerId = defaultLayerId;
+	    } else {
+	      this.defaultLayerId = this.layerCollection.at(0).id;
 	    }
 	    return this;
 	  },
-	  _removeCell: function (cell, collection, options) {
-	    options = options || {};
-	    if (!options.clear) {
-	      // Applications might provide a `disconnectLinks` option set to `true` in order to
-	      // disconnect links when a cell is removed rather then removing them. The default
-	      // is to remove all the associated links.
-	      if (options.disconnectLinks) {
-	        this.disconnectLinks(cell, options);
+	  /**
+	   * @public
+	   * @description Remove multiple cells from the graph.
+	   * @param {Array<dia.Cell | dia.Cell.ID>} cellRefs - Array of cell references (models or IDs) to remove.
+	   * @param {Object} [options] - Removal options. See {@link dia.Graph#removeCell}.
+	   */
+	  removeCells: function (cellRefs, options) {
+	    if (!cellRefs.length) return this;
+	    // Remove multiple cells in a single batch
+	    this.startBatch('remove');
+	    for (const cellRef of cellRefs) {
+	      if (!cellRef) continue;
+	      let cell;
+	      if (cellRef[CELL_MARKER]) {
+	        cell = cellRef;
 	      } else {
-	        this.removeLinks(cell, options);
+	        cell = this.getCell(cellRef);
+	        if (!cell) {
+	          // The cell might have been already removed (embedded cell, connected link, etc.)
+	          continue;
+	        }
 	      }
+	      this.layerCollection.removeCell(cell, options);
 	    }
-	    // Silently remove the cell from the cells collection. Silently, because
-	    // `joint.dia.Cell.prototype.remove` already triggers the `remove` event which is
-	    // then propagated to the graph model. If we didn't remove the cell silently, two `remove` events
-	    // would be triggered on the graph model.
-	    this.get('cells').remove(cell, {
-	      silent: true
-	    });
+	    this.stopBatch('remove');
+	    return this;
+	  },
+	  /**
+	   * @protected
+	   * @description Replace an existing cell with a new cell.
+	   */
+	  _replaceCell: function (currentCell, newCellInit, opt = {}) {
+	    const batchName = 'replace-cell';
+	    const replaceOptions = {
+	      ...opt,
+	      replace: true
+	    };
+	    this.startBatch(batchName, opt);
+	    // 1. Remove the cell without removing connected links or embedded cells.
+	    this.layerCollection.removeCell(currentCell, replaceOptions);
+	    const newCellInitAttributes = newCellInit[CELL_MARKER] ? newCellInit.attributes : newCellInit;
+	    // 2. Combine the current cell attributes with the new cell attributes
+	    const replacementCellAttributes = Object.assign({}, currentCell.attributes, newCellInitAttributes);
+	    let replacement;
+	    if (newCellInit[CELL_MARKER]) {
+	      // If the new cell is a model, set the merged attributes on the model
+	      newCellInit.set(replacementCellAttributes, replaceOptions);
+	      replacement = newCellInit;
+	    } else {
+	      replacement = replacementCellAttributes;
+	    }
+
+	    // 3. Add the replacement cell
+	    this.addCell(replacement, replaceOptions);
+	    this.stopBatch(batchName);
+	  },
+	  /**
+	   * @protected
+	   * @description Synchronize a single graph cell with the provided cell (model or attributes).
+	   * If the cell with the same `id` exists, it is updated. If the cell does not exist, it is added.
+	   * If the existing cell type is different from the incoming cell type, the existing cell is replaced.
+	   */
+	  _syncCell: function (cellInit, opt = {}) {
+	    const cellAttributes = cellInit[CELL_MARKER] ? cellInit.attributes : cellInit;
+	    const currentCell = this.getCell(cellInit.id);
+	    if (currentCell) {
+	      // `cellInit` is either a model or attributes object
+	      if ('type' in cellAttributes && currentCell.get('type') !== cellAttributes.type) {
+	        // Replace the cell if the type has changed
+	        this._replaceCell(currentCell, cellInit, opt);
+	      } else {
+	        // Update existing cell
+	        // Note: the existing cell attributes are not removed,
+	        // if they're missing in `cellAttributes`.
+	        currentCell.set(cellAttributes, opt);
+	      }
+	    } else {
+	      // The cell does not exist yet, add it
+	      this.addCell(cellInit, opt);
+	    }
+	  },
+	  /**
+	   * @public
+	   * @description Synchronize the graph cells with the provided array of cells (models or attributes).
+	   */
+	  syncCells: function (cellInits, opt = {}) {
+	    const batchName = 'sync-cells';
+	    const {
+	      remove = false,
+	      ...setOpt
+	    } = opt;
+	    let currentCells, newCellsMap;
+	    if (remove) {
+	      // We need to track existing cells to remove the missing ones later
+	      currentCells = this.getCells();
+	      newCellsMap = new Map();
+	    }
+
+	    // Observe changes to the graph cells
+	    let changeObserver, changedLayers;
+	    const shouldSort = opt.sort !== false;
+	    if (shouldSort) {
+	      changeObserver = new Listener();
+	      changedLayers = new Set();
+	      changeObserver.listenTo(this, {
+	        'add': cell => {
+	          changedLayers.add(this.getCellLayerId(cell));
+	        },
+	        'change': cell => {
+	          if (cell.hasChanged(config$3.layerAttribute) || cell.hasChanged('z')) {
+	            changedLayers.add(this.getCellLayerId(cell));
+	          }
+	        }
+	      });
+	    }
+	    this.startBatch(batchName, opt);
+
+	    // Prevent multiple sorts during sync
+	    setOpt.sort = false;
+
+	    // Add or update incoming cells
+	    for (const cellInit of cellInits) {
+	      if (remove) {
+	        // only track existence
+	        newCellsMap.set(cellInit.id, true);
+	      }
+	      this._syncCell(cellInit, setOpt);
+	    }
+	    if (remove) {
+	      // Remove cells not present in the incoming array
+	      for (const cell of currentCells) {
+	        if (!newCellsMap.has(cell.id)) {
+	          this.layerCollection.removeCell(cell, setOpt);
+	        }
+	      }
+	    }
+	    if (shouldSort) {
+	      // Sort layers that had changes affecting z-index or layer
+	      changeObserver.stopListening();
+	      for (const layerId of changedLayers) {
+	        this.getLayer(layerId).cellCollection.sort(opt);
+	      }
+	    }
+	    this.stopBatch(batchName);
+	  },
+	  /**
+	   * @public
+	   * @description Remove a cell from the graph.
+	   * @param {dia.Cell} cell
+	   * @param {Object} [options]
+	   * @param {boolean} [options.disconnectLinks=false] - If `true`, the connected links are
+	   * disconnected instead of removed.
+	   * @param {boolean} [options.clear=false] - If `true`, the connected links
+	   * are kept. @internal
+	   * @param {boolean} [options.replace=false] - If `true`, the connected links and
+	   * embedded cells are kept. @internal
+	   * @throws Will throw an error if no cell is provided
+	   * @throws Will throw an error if the ID of the cell to remove
+	   * does not exist in the graph
+	   **/
+	  removeCell: function (cellRef, options) {
+	    if (!cellRef) {
+	      throw new Error('dia.Graph: no cell provided.');
+	    }
+	    const cell = cellRef[CELL_MARKER] ? cellRef : this.getCell(cellRef);
+	    if (!cell) {
+	      throw new Error('dia.Graph: cell to remove does not exist in the graph.');
+	    }
+	    if (cell.graph !== this) return;
+	    this.startBatch('remove');
+	    cell.collection.remove(cell, options);
+	    this.stopBatch('remove');
 	  },
 	  transferCellEmbeds: function (sourceCell, targetCell, opt = {}) {
 	    const batchName = 'transfer-embeds';
@@ -27022,24 +28027,249 @@ var joint = (function (exports) {
 	    });
 	    this.stopBatch(batchName);
 	  },
-	  // Get a cell by `id`.
-	  getCell: function (id) {
-	    return this.get('cells').get(id);
+	  /**
+	   * @private
+	   * Helper method for addLayer and moveLayer methods
+	   */
+	  _getBeforeLayerIdFromOptions(options, layer = null) {
+	    let {
+	      before = null,
+	      index
+	    } = options;
+	    if (before && index !== undefined) {
+	      throw new Error('dia.Graph: Options "before" and "index" are mutually exclusive.');
+	    }
+	    let computedBefore;
+	    if (index !== undefined) {
+	      const layersArray = this.getLayers();
+	      if (index >= layersArray.length) {
+	        // If index is greater than the number of layers,
+	        // return before as null (move to the end).
+	        computedBefore = null;
+	      } else if (index < 0) {
+	        // If index is negative, move to the beginning.
+	        computedBefore = layersArray[0].id;
+	      } else {
+	        var _layersArray$index;
+	        const originalIndex = layersArray.indexOf(layer);
+	        if (originalIndex !== -1 && index > originalIndex) {
+	          // If moving a layer upwards in the stack, we need to adjust the index
+	          // to account for the layer being removed from its original position.
+	          index += 1;
+	        }
+	        // Otherwise, get the layer ID at the specified index.
+	        computedBefore = ((_layersArray$index = layersArray[index]) === null || _layersArray$index === void 0 ? void 0 : _layersArray$index.id) || null;
+	      }
+	    } else {
+	      computedBefore = before;
+	    }
+	    return computedBefore;
+	  },
+	  /**
+	   * @public
+	   * Adds a new layer to the graph.
+	   * @param {GraphLayer | GraphLayerJSON} layerInit
+	   * @param {*} options
+	   * @param {string | null} [options.before] - ID of the layer
+	   * before which to insert the new layer. If `null`, the layer is added at the end.
+	   * @param {number} [options.index] - Zero-based index to which to add the layer.
+	   * @throws Will throw an error if the layer to add is invalid
+	   * @throws Will throw an error if a layer with the same ID already exists
+	   * @throws Will throw if `before` reference is invalid
+	   */
+	  addLayer(layerInit, options = {}) {
+	    if (!layerInit || !layerInit.id) {
+	      throw new Error('dia.Graph: Layer to add is invalid.');
+	    }
+	    if (this.hasLayer(layerInit.id)) {
+	      throw new Error(`dia.Graph: Layer "${layerInit.id}" already exists.`);
+	    }
+	    const {
+	      before = null,
+	      index,
+	      ...insertOptions
+	    } = options;
+	    insertOptions.graph = this.cid;
+
+	    // Adding a new layer disables legacy mode
+	    this.legacyMode = false;
+	    const beforeId = this._getBeforeLayerIdFromOptions({
+	      before,
+	      index
+	    });
+	    this.layerCollection.insert(layerInit, beforeId, insertOptions);
+	  },
+	  /**
+	   * @public
+	   * Moves an existing layer to a new position in the layer stack.
+	   * @param {string | GraphLayer} layerRef - ID or reference of the layer to move.
+	   * @param {*} options
+	   * @param {string | null} [options.before] - ID of the layer
+	   * before which to insert the moved layer. If `null`, the layer is moved to the end.
+	   * @param {number} [options.index] - Zero-based index to which to move the layer.
+	   * @throws Will throw an error if the layer to move does not exist
+	   * @throws Will throw an error if `before` reference is invalid
+	   * @throws Will throw an error if both `before` and `index` options are provided
+	   */
+	  moveLayer(layerRef, options = {}) {
+	    if (!layerRef || !this.hasLayer(layerRef)) {
+	      throw new Error('dia.Graph: Layer to move does not exist.');
+	    }
+	    const layer = this.getLayer(layerRef);
+	    const {
+	      before = null,
+	      index,
+	      ...insertOptions
+	    } = options;
+	    insertOptions.graph = this.cid;
+
+	    // Moving a layer disables legacy mode
+	    this.legacyMode = false;
+	    const beforeId = this._getBeforeLayerIdFromOptions({
+	      before,
+	      index
+	    }, layer);
+	    this.layerCollection.insert(layer, beforeId, insertOptions);
+	  },
+	  /**
+	   * @public
+	   * Removes an existing layer from the graph.
+	   * @param {string | GraphLayer} layerRef - ID or reference of the layer to remove.
+	   * @param {*} options
+	   * @throws Will throw an error if no layer is provided
+	   * @throws Will throw an error if the layer to remove does not exist
+	   */
+	  removeLayer(layerRef, options = {}) {
+	    if (!layerRef) {
+	      throw new Error('dia.Graph: No layer provided.');
+	    }
+
+	    // The layer must exist
+	    const layerId = layerRef.id ? layerRef.id : layerRef;
+	    const layer = this.getLayer(layerId);
+
+	    // Prevent removing the default layer
+	    // Note: if there is only one layer, it is also the default layer.
+	    const {
+	      id: defaultLayerId
+	    } = this.getDefaultLayer();
+	    if (layerId === defaultLayerId) {
+	      throw new Error('dia.Graph: default layer cannot be removed.');
+	    }
+
+	    // A layer with cells cannot be removed
+	    if (layer.cellCollection.length > 0) {
+	      throw new Error(`dia.Graph: Layer "${layerId}" cannot be removed because it is not empty.`);
+	    }
+	    this.layerCollection.remove(layerId, {
+	      ...options,
+	      graph: this.cid
+	    });
+	  },
+	  getDefaultLayer() {
+	    return this.layerCollection.get(this.defaultLayerId);
+	  },
+	  setDefaultLayer(layerRef, options = {}) {
+	    if (!layerRef) {
+	      throw new Error('dia.Graph: No default layer ID provided.');
+	    }
+
+	    // Make sure the layer exists
+	    const defaultLayerId = layerRef.id ? layerRef.id : layerRef;
+	    const defaultLayer = this.getLayer(defaultLayerId);
+
+	    // If the default layer is not changing, do nothing
+	    const currentDefaultLayerId = this.defaultLayerId;
+	    if (defaultLayerId === currentDefaultLayerId) {
+	      // The default layer stays the same
+	      return;
+	    }
+
+	    // Get all cells that belong to the current default layer implicitly
+	    const implicitLayerCells = this.getImplicitLayerCells();
+
+	    // Set the new default layer ID
+	    this.defaultLayerId = defaultLayerId;
+	    const batchName = 'default-layer-change';
+	    this.startBatch(batchName, options);
+	    if (implicitLayerCells.length > 0) {
+	      // Reassign any cells lacking an explicit layer to the new default layer.
+	      // Do not sort yet, wait until all cells are moved.
+	      const moveOptions = {
+	        ...options,
+	        sort: false
+	      };
+	      for (const cell of implicitLayerCells) {
+	        this.layerCollection.moveCellBetweenLayers(cell, defaultLayerId, moveOptions);
+	      }
+	      // Now sort the new default layer
+	      if (options.sort !== false) {
+	        defaultLayer.cellCollection.sort(options);
+	      }
+	    }
+
+	    // Pretend to trigger the event on the layer itself.
+	    // It will bubble up as `layer:default` event on the graph.
+	    defaultLayer.trigger(defaultLayer.eventPrefix + 'default', defaultLayer, {
+	      ...options,
+	      previousDefaultLayerId: currentDefaultLayerId
+	    });
+	    this.stopBatch(batchName, options);
+	  },
+	  /**
+	   * @protected
+	   * @description Get all cells that do not have an explicit layer assigned.
+	   * These cells belong to the default layer implicitly.
+	   * @return {Array<dia.Cell>} Array of cells without an explicit layer.
+	   */
+	  getImplicitLayerCells() {
+	    return this.getDefaultLayer().cellCollection.filter(cell => {
+	      return cell.get(config$3.layerAttribute) == null;
+	    });
+	  },
+	  getLayer(layerId) {
+	    if (!this.hasLayer(layerId)) {
+	      throw new Error(`dia.Graph: Layer "${layerId}" does not exist.`);
+	    }
+	    return this.layerCollection.get(layerId);
+	  },
+	  hasLayer(layerRef) {
+	    return this.layerCollection.has(layerRef);
+	  },
+	  getLayers() {
+	    return this.layerCollection.toArray();
+	  },
+	  getCell: function (cellRef) {
+	    return this.layerCollection.getCell(cellRef);
 	  },
 	  getCells: function () {
-	    return this.get('cells').toArray();
+	    return this.layerCollection.getCells();
 	  },
 	  getElements: function () {
-	    return this.get('cells').toArray().filter(cell => cell.isElement());
+	    return this.getCells().filter(cell => cell.isElement());
 	  },
 	  getLinks: function () {
-	    return this.get('cells').toArray().filter(cell => cell.isLink());
+	    return this.getCells().filter(cell => cell.isLink());
 	  },
-	  getFirstCell: function () {
-	    return this.get('cells').first();
+	  getFirstCell: function (layerId) {
+	    let layer;
+	    if (!layerId) {
+	      // Get the first cell from the bottom-most layer
+	      layer = this.getLayers().at(0);
+	    } else {
+	      layer = this.getLayer(layerId);
+	    }
+	    return layer.cellCollection.models.at(0);
 	  },
-	  getLastCell: function () {
-	    return this.get('cells').last();
+	  getLastCell: function (layerId) {
+	    let layer;
+	    if (!layerId) {
+	      // Get the last cell from the top-most layer
+	      layer = this.getLayers().at(-1);
+	    } else {
+	      layer = this.getLayer(layerId);
+	    }
+	    return layer.cellCollection.models.at(-1);
 	  },
 	  // Get all inbound and outbound links connected to the cell `model`.
 	  getConnectedLinks: function (model, opt) {
@@ -27063,12 +28293,13 @@ var joint = (function (exports) {
 	      addInbounds(this, model);
 	    }
 	    function addOutbounds(graph, model) {
-	      forIn(graph.getOutboundEdges(model.id), function (_, edge) {
+	      forIn(graph.topologyIndex.getOutboundEdges(model.id), function (_, edge) {
 	        // skip links that were already added
 	        // (those must be self-loop links)
 	        // (because they are inbound and outbound edges of the same two elements)
 	        if (edges[edge]) return;
 	        var link = graph.getCell(edge);
+	        if (!link) return;
 	        links.push(link);
 	        edges[edge] = true;
 	        if (indirect) {
@@ -27087,12 +28318,13 @@ var joint = (function (exports) {
 	      }
 	    }
 	    function addInbounds(graph, model) {
-	      forIn(graph.getInboundEdges(model.id), function (_, edge) {
+	      forIn(graph.topologyIndex.getInboundEdges(model.id), function (_, edge) {
 	        // skip links that were already added
 	        // (those must be self-loop links)
 	        // (because they are inbound and outbound edges of the same two elements)
 	        if (edges[edge]) return;
 	        var link = graph.getCell(edge);
+	        if (!link) return;
 	        links.push(link);
 	        edges[edge] = true;
 	        if (indirect) {
@@ -27127,7 +28359,7 @@ var joint = (function (exports) {
 	      embeddedCells.forEach(function (cell) {
 	        if (cell.isLink()) return;
 	        if (outbound) {
-	          forIn(this.getOutboundEdges(cell.id), function (exists, edge) {
+	          forIn(this.topologyIndex.getOutboundEdges(cell.id), function (exists, edge) {
 	            if (!edges[edge]) {
 	              var edgeCell = this.getCell(edge);
 	              var {
@@ -27147,7 +28379,7 @@ var joint = (function (exports) {
 	          }.bind(this));
 	        }
 	        if (inbound) {
-	          forIn(this.getInboundEdges(cell.id), function (exists, edge) {
+	          forIn(this.topologyIndex.getInboundEdges(cell.id), function (exists, edge) {
 	            if (!edges[edge]) {
 	              var edgeCell = this.getCell(edge);
 	              var {
@@ -27426,31 +28658,19 @@ var joint = (function (exports) {
 	  },
 	  // Get all the roots of the graph. Time complexity: O(|V|).
 	  getSources: function () {
-	    var sources = [];
-	    forIn(this._nodes, function (exists, node) {
-	      if (!this._in[node] || isEmpty(this._in[node])) {
-	        sources.push(this.getCell(node));
-	      }
-	    }.bind(this));
-	    return sources;
+	    return this.topologyIndex.getSourceNodes().map(nodeId => this.getCell(nodeId));
 	  },
 	  // Get all the leafs of the graph. Time complexity: O(|V|).
 	  getSinks: function () {
-	    var sinks = [];
-	    forIn(this._nodes, function (exists, node) {
-	      if (!this._out[node] || isEmpty(this._out[node])) {
-	        sinks.push(this.getCell(node));
-	      }
-	    }.bind(this));
-	    return sinks;
+	    return this.topologyIndex.getSinkNodes().map(nodeId => this.getCell(nodeId));
 	  },
 	  // Return `true` if `element` is a root. Time complexity: O(1).
 	  isSource: function (element) {
-	    return !this._in[element.id] || isEmpty(this._in[element.id]);
+	    return this.topologyIndex.isSourceNode(element.id);
 	  },
 	  // Return `true` if `element` is a leaf. Time complexity: O(1).
 	  isSink: function (element) {
-	    return !this._out[element.id] || isEmpty(this._out[element.id]);
+	    return this.topologyIndex.isSinkNode(element.id);
 	  },
 	  // Return `true` is `elementB` is a successor of `elementA`. Return `false` otherwise.
 	  isSuccessor: function (elementA, elementB) {
@@ -27521,8 +28741,10 @@ var joint = (function (exports) {
 	    });
 	  },
 	  // Remove links connected to the cell `model` completely.
-	  removeLinks: function (model, opt) {
-	    invoke(this.getConnectedLinks(model), 'remove', opt);
+	  removeLinks: function (cell, opt) {
+	    this.getConnectedLinks(cell).forEach(link => {
+	      this.layerCollection.removeCell(link, opt);
+	    });
 	  },
 	  // Find all cells at given point
 
@@ -27713,85 +28935,6 @@ var joint = (function (exports) {
 	});
 	wrapWith(Graph.prototype, ['resetCells', 'addCells', 'removeCells'], wrappers.cells);
 
-	const LayersNames = {
-	  GRID: 'grid',
-	  CELLS: 'cells',
-	  BACK: 'back',
-	  FRONT: 'front',
-	  TOOLS: 'tools',
-	  LABELS: 'labels'
-	};
-	const PaperLayer = View.extend({
-	  tagName: 'g',
-	  svgElement: true,
-	  pivotNodes: null,
-	  defaultTheme: null,
-	  options: {
-	    name: ''
-	  },
-	  className: function () {
-	    const {
-	      name
-	    } = this.options;
-	    if (!name) return null;
-	    return addClassNamePrefix(`${name}-layer`);
-	  },
-	  init: function () {
-	    this.pivotNodes = {};
-	  },
-	  insertSortedNode: function (node, z) {
-	    this.el.insertBefore(node, this.insertPivot(z));
-	  },
-	  insertNode: function (node) {
-	    const {
-	      el
-	    } = this;
-	    if (node.parentNode !== el) {
-	      el.appendChild(node);
-	    }
-	  },
-	  insertPivot: function (z) {
-	    const {
-	      el,
-	      pivotNodes
-	    } = this;
-	    z = +z;
-	    z || (z = 0);
-	    let pivotNode = pivotNodes[z];
-	    if (pivotNode) return pivotNode;
-	    pivotNode = pivotNodes[z] = document.createComment('z-index:' + (z + 1));
-	    let neighborZ = -Infinity;
-	    for (let currentZ in pivotNodes) {
-	      currentZ = +currentZ;
-	      if (currentZ < z && currentZ > neighborZ) {
-	        neighborZ = currentZ;
-	        if (neighborZ === z - 1) continue;
-	      }
-	    }
-	    if (neighborZ !== -Infinity) {
-	      const neighborPivot = pivotNodes[neighborZ];
-	      // Insert After
-	      el.insertBefore(pivotNode, neighborPivot.nextSibling);
-	    } else {
-	      // First Child
-	      el.insertBefore(pivotNode, el.firstChild);
-	    }
-	    return pivotNode;
-	  },
-	  removePivots: function () {
-	    const {
-	      el,
-	      pivotNodes
-	    } = this;
-	    for (let z in pivotNodes) el.removeChild(pivotNodes[z]);
-	    this.pivotNodes = {};
-	  },
-	  isEmpty: function () {
-	    // Check if the layer has any child elements (pivot comments are not counted).
-	    return this.el.children.length === 0;
-	  }
-	});
-
 	const calcAttributesList = ['transform', 'x', 'y', 'cx', 'cy', 'dx', 'dy', 'x1', 'y1', 'x2', 'y2', 'points', 'd', 'r', 'rx', 'ry', 'width', 'height', 'stroke-width', 'font-size'];
 	const positiveValueList = ['r', 'rx', 'ry', 'width', 'height', 'stroke-width', 'font-size'];
 	const calcAttributes = calcAttributesList.reduce((acc, attrName) => {
@@ -29033,7 +30176,6 @@ var joint = (function (exports) {
 	// Internal tag to identify this object as a cell view instance.
 	// Used instead of `instanceof` for performance and cross-frame safety.
 
-	const CELL_VIEW_MARKER = Symbol('joint.cellViewMarker');
 	Object.defineProperty(CellView.prototype, CELL_VIEW_MARKER, {
 	  value: true
 	});
@@ -31841,6 +32983,231 @@ var joint = (function (exports) {
 	  }
 	});
 
+	const LayerView = View.extend({
+	  tagName: 'g',
+	  svgElement: true,
+	  pivotNodes: null,
+	  defaultTheme: null,
+	  UPDATE_PRIORITY: 4,
+	  options: {
+	    id: ''
+	  },
+	  paper: null,
+	  init: function () {
+	    this.pivotNodes = {};
+	    this.id = this.options.id || this.cid;
+	  },
+	  setPaperReference: function (paper) {
+	    this.paper = paper;
+	    this.afterPaperReferenceSet(paper);
+	  },
+	  unsetPaperReference: function () {
+	    this.beforePaperReferenceUnset();
+	    this.paper = null;
+	  },
+	  assertPaperReference() {
+	    if (!this.paper) {
+	      throw new Error('LayerView: paper reference is not set.');
+	    }
+	  },
+	  afterPaperReferenceSet: function () {
+	    // Can be overridden in subclasses.
+	  },
+	  beforePaperReferenceUnset: function () {
+	    // Can be overridden in subclasses.
+	  },
+	  // prevents id to be set on the DOM element
+	  _setAttributes: function (attrs) {
+	    const newAttrs = clone$1(attrs);
+	    delete newAttrs.id;
+	    View.prototype._setAttributes.call(this, newAttrs);
+	  },
+	  className: function () {
+	    const {
+	      id
+	    } = this.options;
+	    return addClassNamePrefix(`${id}-layer`);
+	  },
+	  insertSortedNode: function (node, z) {
+	    this.el.insertBefore(node, this.insertPivot(z));
+	  },
+	  insertNode: function (node) {
+	    const {
+	      el
+	    } = this;
+	    if (node.parentNode !== el) {
+	      el.appendChild(node);
+	    }
+	  },
+	  insertPivot: function (z) {
+	    const {
+	      el,
+	      pivotNodes
+	    } = this;
+	    z = +z;
+	    z || (z = 0);
+	    let pivotNode = pivotNodes[z];
+	    if (pivotNode) return pivotNode;
+	    pivotNode = pivotNodes[z] = document.createComment('z-index:' + (z + 1));
+	    let neighborZ = -Infinity;
+	    for (let currentZ in pivotNodes) {
+	      currentZ = +currentZ;
+	      if (currentZ < z && currentZ > neighborZ) {
+	        neighborZ = currentZ;
+	        if (neighborZ === z - 1) continue;
+	      }
+	    }
+	    if (neighborZ !== -Infinity) {
+	      const neighborPivot = pivotNodes[neighborZ];
+	      // Insert After
+	      el.insertBefore(pivotNode, neighborPivot.nextSibling);
+	    } else {
+	      // First Child
+	      el.insertBefore(pivotNode, el.firstChild);
+	    }
+	    return pivotNode;
+	  },
+	  removePivots: function () {
+	    const {
+	      el,
+	      pivotNodes
+	    } = this;
+	    for (let z in pivotNodes) el.removeChild(pivotNodes[z]);
+	    this.pivotNodes = {};
+	  },
+	  isEmpty: function () {
+	    // Check if the layer has any child elements (pivot comments are not counted).
+	    return this.el.children.length === 0;
+	  },
+	  reset: function () {
+	    this.removePivots();
+	  }
+	});
+	Object.defineProperty(LayerView.prototype, LAYER_VIEW_MARKER, {
+	  value: true
+	});
+
+	/**
+	 * @class GraphLayerView
+	 * @description A GraphLayerView is responsible for managing the rendering of cell views inside a layer.
+	 * It listens to the corresponding GraphLayer model and updates the DOM accordingly.
+	 * It uses dia.Paper sorting options to sort cell views in the DOM based on their `z` attribute.
+	 */
+	const GraphLayerView = LayerView.extend({
+	  SORT_DELAYING_BATCHES: ['add', 'to-front', 'to-back'],
+	  style: {
+	    webkitUserSelect: 'none',
+	    userSelect: 'none'
+	  },
+	  graph: null,
+	  init() {
+	    LayerView.prototype.init.apply(this, arguments);
+	    this.graph = this.model.graph;
+	  },
+	  className: function () {
+	    const {
+	      id
+	    } = this.options;
+	    return [addClassNamePrefix(`${id}-layer`), addClassNamePrefix('cells')].join(' ');
+	  },
+	  afterPaperReferenceSet(paper) {
+	    this.listenTo(this.model, 'sort', this.onCellCollectionSort);
+	    this.listenTo(this.model, 'change', this.onCellChange);
+	    this.listenTo(this.model, 'move', this.onCellMove);
+	    this.listenTo(this.graph, 'batch:stop', this.onGraphBatchStop);
+	  },
+	  beforePaperReferenceUnset() {
+	    this.stopListening(this.model);
+	    this.stopListening(this.graph);
+	  },
+	  onCellCollectionSort() {
+	    if (this.graph.hasActiveBatch(this.SORT_DELAYING_BATCHES)) return;
+	    this.sort();
+	  },
+	  onCellMove(cell, opt = {}) {
+	    // When a cell is moved from one layer to another,
+	    // request insertion of its view in the new layer.
+	    this.paper.requestCellViewInsertion(cell, opt);
+	  },
+	  onCellChange(cell, opt) {
+	    if (!cell.hasChanged('z')) return;
+	    // Re-insert the cell view to maintain correct z-ordering
+	    if (this.paper.options.sorting === sortingTypes.APPROX) {
+	      this.paper.requestCellViewInsertion(cell, opt);
+	    }
+	  },
+	  onGraphBatchStop(data) {
+	    const name = data && data.batchName;
+	    const sortDelayingBatches = this.SORT_DELAYING_BATCHES;
+	    // After certain batches, sorting may be required
+	    if (sortDelayingBatches.includes(name) && !this.graph.hasActiveBatch(sortDelayingBatches)) {
+	      this.sort();
+	    }
+	  },
+	  sort() {
+	    this.assertPaperReference();
+	    const {
+	      paper
+	    } = this;
+	    if (!paper.isExactSorting()) {
+	      // noop
+	      return;
+	    }
+	    if (paper.isFrozen()) {
+	      // sort views once unfrozen
+	      paper._updates.sort = true;
+	      return;
+	    }
+	    this.sortExact();
+	  },
+	  sortExact() {
+	    // Run insertion sort algorithm in order to efficiently sort DOM elements according to their
+	    // associated model `z` attribute.
+	    const cellNodes = Array.from(this.el.children).filter(node => node.getAttribute('model-id'));
+	    const cellCollection = this.model.cellCollection;
+	    sortElements(cellNodes, function (a, b) {
+	      const cellA = cellCollection.get(a.getAttribute('model-id'));
+	      const cellB = cellCollection.get(b.getAttribute('model-id'));
+	      const zA = cellA.attributes.z || 0;
+	      const zB = cellB.attributes.z || 0;
+	      return zA === zB ? 0 : zA < zB ? -1 : 1;
+	    });
+	  },
+	  insertCellView(cellView) {
+	    this.assertPaperReference();
+	    const {
+	      paper
+	    } = this;
+	    const {
+	      el,
+	      model
+	    } = cellView;
+	    switch (paper.options.sorting) {
+	      case sortingTypes.APPROX:
+	        this.insertSortedNode(el, model.get('z'));
+	        break;
+	      case sortingTypes.EXACT:
+	      default:
+	        this.insertNode(el);
+	        break;
+	    }
+	  }
+	});
+	Object.defineProperty(GraphLayerView.prototype, GRAPH_LAYER_VIEW_MARKER, {
+	  value: true
+	});
+
+	/**
+	 * @class LegacyGraphLayerView
+	 * @description A legacy GraphLayerView with an additional class name for backward compatibility.
+	 */
+	const LegacyGraphLayerView = GraphLayerView.extend({
+	  className: function () {
+	    const className = GraphLayerView.prototype.className.apply(this, arguments);
+	    return className + ' ' + addClassNamePrefix('viewport');
+	  }
+	});
+
 	/**
 	 * Deque implementation for managing a double-ended queue.
 	 * This implementation uses a doubly linked list for efficient operations.
@@ -31963,23 +33330,24 @@ var joint = (function (exports) {
 	  }
 	}
 
-	const GridLayer = PaperLayer.extend({
+	const GridLayerView = LayerView.extend({
 	  style: {
 	    'pointer-events': 'none'
 	  },
 	  _gridCache: null,
 	  _gridSettings: null,
 	  init() {
-	    PaperLayer.prototype.init.apply(this, arguments);
-	    const {
-	      options: {
-	        paper
-	      }
-	    } = this;
+	    LayerView.prototype.init.apply(this, arguments);
+	    this.paper = this.options.paper;
 	    this._gridCache = null;
 	    this._gridSettings = [];
+	  },
+	  afterPaperReferenceSet(paper) {
 	    this.listenTo(paper, 'transform resize', this.updateGrid);
 	  },
+	  beforePaperReferenceUnset(paper) {
+	    this.stopListening(paper);
+	  },
 	  setGrid(drawGrid) {
 	    this._gridSettings = this.getGridSettings(drawGrid);
 	    this.renderGrid();
@@ -32004,9 +33372,7 @@ var joint = (function (exports) {
 	  },
 	  renderGrid() {
 	    const {
-	      options: {
-	        paper
-	      }
+	      paper
 	    } = this;
 	    const {
 	      _gridSettings: gridSettings
@@ -32051,9 +33417,7 @@ var joint = (function (exports) {
 	    const {
 	      _gridCache: grid,
 	      _gridSettings: gridSettings,
-	      options: {
-	        paper
-	      }
+	      paper
 	    } = this;
 	    if (!grid) return;
 	    const {
@@ -32087,7 +33451,7 @@ var joint = (function (exports) {
 	    });
 	  },
 	  _getPatternId(index) {
-	    return `pattern_${this.options.paper.cid}_${index}`;
+	    return `pattern_${this.paper.cid}_${index}`;
 	  },
 	  _getGridRefs() {
 	    let {
@@ -32122,27 +33486,27 @@ var joint = (function (exports) {
 	    return grid;
 	  },
 	  _resolveDrawGridOption(opt) {
-	    var namespace = this.options.patterns;
+	    const namespace = this.options.patterns;
 	    if (isString(opt) && Array.isArray(namespace[opt])) {
 	      return namespace[opt].map(function (item) {
 	        return assign({}, item);
 	      });
 	    }
-	    var options = opt || {
+	    const options = opt || {
 	      args: [{}]
 	    };
-	    var isArray = Array.isArray(options);
-	    var name = options.name;
+	    const isArray = Array.isArray(options);
+	    let name = options.name;
 	    if (!isArray && !name && !options.markup) {
 	      name = 'dot';
 	    }
 	    if (name && Array.isArray(namespace[name])) {
-	      var pattern = namespace[name].map(function (item) {
+	      const pattern = namespace[name].map(function (item) {
 	        return assign({}, item);
 	      });
-	      var args = Array.isArray(options.args) ? options.args : [options.args || {}];
+	      const args = Array.isArray(options.args) ? options.args : [options.args || {}];
 	      defaults(args[0], omit(opt, 'args'));
-	      for (var i = 0; i < args.length; i++) {
+	      for (let i = 0; i < args.length; i++) {
 	        if (pattern[i]) {
 	          assign(pattern[i], args[i]);
 	        }
@@ -32159,6 +33523,15 @@ var joint = (function (exports) {
 	  }
 	});
 
+	const paperLayers = {
+	  GRID: 'grid',
+	  BACK: 'back',
+	  /** @deprecated */
+	  CELLS: 'cells',
+	  FRONT: 'front',
+	  TOOLS: 'tools',
+	  LABELS: 'labels'
+	};
 	const sortingTypes = {
 	  NONE: 'sorting-none',
 	  APPROX: 'sorting-approximate',
@@ -32191,18 +33564,205 @@ var joint = (function (exports) {
 	    }
 	  }
 	};
-	const defaultLayers = [{
-	  name: LayersNames.GRID
-	}, {
-	  name: LayersNames.BACK
+	const gridPatterns = {
+	  dot: [{
+	    color: '#AAAAAA',
+	    thickness: 1,
+	    markup: 'rect',
+	    render: function (el, opt) {
+	      V(el).attr({
+	        width: opt.thickness,
+	        height: opt.thickness,
+	        fill: opt.color
+	      });
+	    }
+	  }],
+	  fixedDot: [{
+	    color: '#AAAAAA',
+	    thickness: 1,
+	    markup: 'rect',
+	    render: function (el, opt) {
+	      V(el).attr({
+	        fill: opt.color
+	      });
+	    },
+	    update: function (el, opt, paper) {
+	      const {
+	        sx,
+	        sy
+	      } = paper.scale();
+	      const width = sx <= 1 ? opt.thickness : opt.thickness / sx;
+	      const height = sy <= 1 ? opt.thickness : opt.thickness / sy;
+	      V(el).attr({
+	        width,
+	        height
+	      });
+	    }
+	  }],
+	  mesh: [{
+	    color: '#AAAAAA',
+	    thickness: 1,
+	    markup: 'path',
+	    render: function (el, opt) {
+	      var d;
+	      var width = opt.width;
+	      var height = opt.height;
+	      var thickness = opt.thickness;
+	      if (width - thickness >= 0 && height - thickness >= 0) {
+	        d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
+	      } else {
+	        d = 'M 0 0 0 0';
+	      }
+	      V(el).attr({
+	        'd': d,
+	        stroke: opt.color,
+	        'stroke-width': opt.thickness
+	      });
+	    }
+	  }],
+	  doubleMesh: [{
+	    color: '#AAAAAA',
+	    thickness: 1,
+	    markup: 'path',
+	    render: function (el, opt) {
+	      var d;
+	      var width = opt.width;
+	      var height = opt.height;
+	      var thickness = opt.thickness;
+	      if (width - thickness >= 0 && height - thickness >= 0) {
+	        d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
+	      } else {
+	        d = 'M 0 0 0 0';
+	      }
+	      V(el).attr({
+	        'd': d,
+	        stroke: opt.color,
+	        'stroke-width': opt.thickness
+	      });
+	    }
+	  }, {
+	    color: '#000000',
+	    thickness: 3,
+	    scaleFactor: 4,
+	    markup: 'path',
+	    render: function (el, opt) {
+	      var d;
+	      var width = opt.width;
+	      var height = opt.height;
+	      var thickness = opt.thickness;
+	      if (width - thickness >= 0 && height - thickness >= 0) {
+	        d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
+	      } else {
+	        d = 'M 0 0 0 0';
+	      }
+	      V(el).attr({
+	        'd': d,
+	        stroke: opt.color,
+	        'stroke-width': opt.thickness
+	      });
+	    }
+	  }]
+	};
+	const backgroundPatterns = {
+	  flipXy: function (img) {
+	    // d b
+	    // q p
+
+	    var canvas = document.createElement('canvas');
+	    var imgWidth = img.width;
+	    var imgHeight = img.height;
+	    canvas.width = 2 * imgWidth;
+	    canvas.height = 2 * imgHeight;
+	    var ctx = canvas.getContext('2d');
+	    // top-left image
+	    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+	    // xy-flipped bottom-right image
+	    ctx.setTransform(-1, 0, 0, -1, canvas.width, canvas.height);
+	    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+	    // x-flipped top-right image
+	    ctx.setTransform(-1, 0, 0, 1, canvas.width, 0);
+	    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+	    // y-flipped bottom-left image
+	    ctx.setTransform(1, 0, 0, -1, 0, canvas.height);
+	    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+	    return canvas;
+	  },
+	  flipX: function (img) {
+	    // d b
+	    // d b
+
+	    var canvas = document.createElement('canvas');
+	    var imgWidth = img.width;
+	    var imgHeight = img.height;
+	    canvas.width = imgWidth * 2;
+	    canvas.height = imgHeight;
+	    var ctx = canvas.getContext('2d');
+	    // left image
+	    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+	    // flipped right image
+	    ctx.translate(2 * imgWidth, 0);
+	    ctx.scale(-1, 1);
+	    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+	    return canvas;
+	  },
+	  flipY: function (img) {
+	    // d d
+	    // q q
+
+	    var canvas = document.createElement('canvas');
+	    var imgWidth = img.width;
+	    var imgHeight = img.height;
+	    canvas.width = imgWidth;
+	    canvas.height = imgHeight * 2;
+	    var ctx = canvas.getContext('2d');
+	    // top image
+	    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+	    // flipped bottom image
+	    ctx.translate(0, 2 * imgHeight);
+	    ctx.scale(1, -1);
+	    ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+	    return canvas;
+	  },
+	  watermark: function (img, opt) {
+	    //   d
+	    // d
+
+	    opt = opt || {};
+	    var imgWidth = img.width;
+	    var imgHeight = img.height;
+	    var canvas = document.createElement('canvas');
+	    canvas.width = imgWidth * 3;
+	    canvas.height = imgHeight * 3;
+	    var ctx = canvas.getContext('2d');
+	    var angle = isNumber(opt.watermarkAngle) ? -opt.watermarkAngle : -20;
+	    var radians = toRad(angle);
+	    var stepX = canvas.width / 4;
+	    var stepY = canvas.height / 4;
+	    for (var i = 0; i < 4; i++) {
+	      for (var j = 0; j < 4; j++) {
+	        if ((i + j) % 2 > 0) {
+	          // reset the current transformations
+	          ctx.setTransform(1, 0, 0, 1, (2 * i - 1) * stepX, (2 * j - 1) * stepY);
+	          ctx.rotate(radians);
+	          ctx.drawImage(img, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
+	        }
+	      }
+	    }
+	    return canvas;
+	  }
+	};
+	const implicitLayers = [{
+	  id: paperLayers.GRID,
+	  type: 'GridLayerView',
+	  patterns: gridPatterns
 	}, {
-	  name: LayersNames.CELLS
+	  id: paperLayers.BACK
 	}, {
-	  name: LayersNames.LABELS
+	  id: paperLayers.LABELS
 	}, {
-	  name: LayersNames.FRONT
+	  id: paperLayers.FRONT
 	}, {
-	  name: LayersNames.TOOLS
+	  id: paperLayers.TOOLS
 	}];
 	const CELL_VIEW_PLACEHOLDER_MARKER = Symbol('joint.cellViewPlaceholderMarker');
 	const Paper = View.extend({
@@ -32272,7 +33832,7 @@ var joint = (function (exports) {
 	      // Do not create hard dependency on the joint.shapes.standard namespace (by importing the standard.Link model directly)
 	      const {
 	        cellNamespace
-	      } = this.model.get('cells');
+	      } = this.model.layerCollection;
 	      const ctor = getByPath(cellNamespace, ['standard', 'Link']);
 	      if (!ctor) throw new Error('dia.Paper: no default link model found. Use `options.defaultLink` to specify a default link model.');
 	      return new ctor();
@@ -32358,12 +33918,24 @@ var joint = (function (exports) {
 	    viewManagement: false,
 	    // no docs yet
 	    onViewUpdate: function (view, flag, priority, opt, paper) {
-	      // Do not update connected links when:
-	      // 1. the view was just inserted (added to the graph and rendered)
-	      // 2. the view was just mounted (added back to the paper by viewport function)
-	      // 3. the change was marked as `isolate`.
-	      // 4. the view model was just removed from the graph
-	      if (flag & (paper.FLAG_INSERT | paper.FLAG_REMOVE) || opt.mounting || opt.isolate) return;
+	      if (opt.mounting || opt.isolate) {
+	        // Do not update connected links when:
+	        // - the view was just mounted (added back to the paper by viewport function)
+	        // - the change was marked as `isolate`.
+	        return;
+	      }
+	      // Always update connected links when the view model was replaced with another model
+	      // with the same id.
+	      // Note: the removal is done in 2 steps: remove the old model, add the new model.
+	      // We update connected links on the add step.
+	      if (!(opt.replace && opt.add)) {
+	        if (flag & (paper.FLAG_INSERT | paper.FLAG_REMOVE)) {
+	          // Do not update connected links when:
+	          // - the view was just inserted (added to the graph and rendered)
+	          // - the view model was just removed from the graph
+	          return;
+	        }
+	      }
 	      paper.requestConnectedLinksUpdate(view, priority, opt);
 	    },
 	    // no docs yet
@@ -32380,6 +33952,7 @@ var joint = (function (exports) {
 	    // Default namespaces
 
 	    cellViewNamespace: null,
+	    layerViewNamespace: null,
 	    routerNamespace: null,
 	    connectorNamespace: null,
 	    highlighterNamespace: highlighters,
@@ -32427,10 +34000,11 @@ var joint = (function (exports) {
         }
     `,
 	  svg: null,
-	  viewport: null,
 	  defs: null,
 	  tools: null,
 	  layers: null,
+	  // deprecated, use layers element instead
+	  viewport: null,
 	  // For storing the current transformation matrix (CTM) of the paper's viewport.
 	  _viewportMatrix: null,
 	  // For verifying whether the CTM is up-to-date. The viewport transform attribute
@@ -32440,7 +34014,6 @@ var joint = (function (exports) {
 	  _updates: null,
 	  // Paper Layers
 	  _layers: null,
-	  SORT_DELAYING_BATCHES: ['add', 'to-front', 'to-back'],
 	  UPDATE_DELAYING_BATCHES: ['translate'],
 	  // If you interact with these elements,
 	  // the default interaction such as `element move` is prevented.
@@ -32460,12 +34033,13 @@ var joint = (function (exports) {
 	  // The find buffer is used to extend the area of the search
 	  // to mitigate the differences between the model and view geometry.
 	  DEFAULT_FIND_BUFFER: 200,
-	  // Default layer to insert the cell views into.
-	  DEFAULT_CELL_LAYER: LayersNames.CELLS,
-	  // Update flags
 	  FLAG_INSERT: 1 << 30,
 	  FLAG_REMOVE: 1 << 29,
 	  FLAG_INIT: 1 << 28,
+	  // Layers that are always present on the paper (e.g. grid, back, front, tools)
+	  implicitLayers,
+	  // Reference layer for inserting new graph layers.
+	  graphLayerRefId: paperLayers.LABELS,
 	  init: function () {
 	    const {
 	      options
@@ -32475,6 +34049,12 @@ var joint = (function (exports) {
 	      options.cellViewNamespace = typeof joint !== 'undefined' && has(joint, 'shapes') ? joint.shapes : null;
 	      /* eslint-enable no-undef */
 	    }
+	    const defaultLayerViewNamespace = {
+	      LayerView,
+	      GraphLayerView,
+	      GridLayerView
+	    };
+	    this.layerViewNamespace = defaultsDeep({}, options.layerViewNamespace || {}, defaultLayerViewNamespace);
 	    const model = this.model = options.model || new Graph();
 
 	    // This property tells us if we need to keep the compatibility
@@ -32484,18 +34064,17 @@ var joint = (function (exports) {
 	    // Layers (SVGGroups)
 	    this._layers = {
 	      viewsMap: {},
-	      namesMap: {},
 	      order: []
 	    };
-	    this.cloneOptions();
-	    this.render();
-	    this._setDimensions();
-	    this.startListening();
 
 	    // Hash of all cell views.
 	    this._views = {};
 	    this._viewPlaceholders = {};
 	    this._idToCid = {};
+	    this.cloneOptions();
+	    this.render();
+	    this._setDimensions();
+	    this.startListening();
 
 	    // Mouse wheel events buffer
 	    this._mw_evt_buffer = {
@@ -32504,7 +34083,7 @@ var joint = (function (exports) {
 	    };
 
 	    // Render existing cells in the graph
-	    this.resetViews(model.attributes.cells.models);
+	    this.resetViews(model.getCells());
 	  },
 	  _resetUpdates: function () {
 	    if (this._updates && this._updates.id) cancelFrame(this._updates.id);
@@ -32524,7 +34103,8 @@ var joint = (function (exports) {
 	  },
 	  startListening: function () {
 	    var model = this.model;
-	    this.listenTo(model, 'add', this.onCellAdded).listenTo(model, 'remove', this.onCellRemoved).listenTo(model, 'change', this.onCellChange).listenTo(model, 'reset', this.onGraphReset).listenTo(model, 'sort', this.onGraphSort).listenTo(model, 'batch:stop', this.onGraphBatchStop);
+	    this.listenTo(model, 'add', this.onCellAdded).listenTo(model, 'remove', this.onCellRemoved).listenTo(model, 'reset', this.onGraphReset).listenTo(model, 'batch:stop', this.onGraphBatchStop);
+	    this.listenTo(model, 'layer:add', this.onGraphLayerAdd).listenTo(model, 'layer:remove', this.onGraphLayerRemove).listenTo(model, 'layers:sort', this.onGraphLayerCollectionSort);
 	    this.on('cell:highlight', this.onCellHighlight).on('cell:unhighlight', this.onCellUnhighlight).on('transform', this.update);
 	  },
 	  onCellAdded: function (cell, _, opt) {
@@ -32550,22 +34130,15 @@ var joint = (function (exports) {
 	      this.requestViewUpdate(viewLike, this.FLAG_REMOVE, viewLike.UPDATE_PRIORITY, opt);
 	    }
 	  },
-	  onCellChange: function (cell, opt) {
-	    if (cell === this.model.attributes.cells) return;
-	    if (cell.hasChanged('layer') || cell.hasChanged('z') && this.options.sorting === sortingTypes.APPROX) {
-	      const viewLike = this._getCellViewLike(cell);
-	      if (viewLike) {
-	        this.requestViewUpdate(viewLike, this.FLAG_INSERT, viewLike.UPDATE_PRIORITY, opt);
-	      }
-	    }
-	  },
-	  onGraphReset: function (collection, opt) {
-	    this.resetLayers();
-	    this.resetViews(collection.models, opt);
-	  },
-	  onGraphSort: function () {
-	    if (this.model.hasActiveBatch(this.SORT_DELAYING_BATCHES)) return;
-	    this.sortViews();
+	  onGraphReset: function (_collection, opt) {
+	    // Re-render all graph layer views
+	    // but keep the implicit layer views.
+	    this.renderGraphLayerViews();
+	    this.resetLayerViews();
+	    // Backward compatibility: reassign the `cells` property
+	    // with the default layer view.
+	    this.assertLayerViews();
+	    this.resetViews(this.model.getCells(), opt);
 	  },
 	  onGraphBatchStop: function (data) {
 	    if (this.isFrozen() || this.isIdle()) return;
@@ -32577,10 +34150,92 @@ var joint = (function (exports) {
 	        this.updateViews(data);
 	      }
 	    }
-	    var sortDelayingBatches = this.SORT_DELAYING_BATCHES;
-	    if (sortDelayingBatches.includes(name) && !graph.hasActiveBatch(sortDelayingBatches)) {
-	      this.sortViews();
+	  },
+	  /**
+	  * @protected
+	  * @description When a new layer is added to the graph, we create a new layer view
+	  **/
+	  onGraphLayerAdd: function (layer, _, opt) {
+	    if (this.hasLayerView(layer.id)) return;
+	    const layerView = this.createLayerView({
+	      id: layer.id,
+	      model: layer
+	    });
+	    const layers = this.model.getLayers();
+	    let before;
+	    // Note: There is always at least one graph layer.
+	    if (layers[layers.length - 1] === layer) {
+	      // This is the last layer, so insert before the labels layer
+	      before = paperLayers.LABELS;
+	    } else {
+	      // There is a layer after the current one, so insert before that one
+	      const index = layers.indexOf(layer);
+	      before = layers[index + 1].id;
 	    }
+	    this.addLayerView(layerView, {
+	      before
+	    });
+	  },
+	  /**
+	   * @protected
+	   * @description When a layer is removed from the graph, we remove the corresponding layer view
+	   **/
+	  onGraphLayerRemove: function (layer, _, opt) {
+	    if (!this.hasLayerView(layer)) return;
+
+	    // Request layer removal. Since the UPDATE_PRIORITY is lower
+	    // than cells update priority, the cell views will be removed first.
+	    this.requestLayerViewRemoval(layer);
+	  },
+	  /**
+	   * @protected
+	   * @description When the graph layer collection is sorted,
+	   * we reorder all graph layer views.
+	   **/
+	  onGraphLayerCollectionSort: function (layerCollection) {
+	    layerCollection.each(layer => {
+	      if (!this.hasLayerView(layer)) return;
+	      this.moveLayerView(layer, {
+	        before: this.graphLayerRefId
+	      });
+	    });
+	  },
+	  /**
+	   * @protected
+	   * @description Resets all graph layer views.
+	   */
+	  renderGraphLayerViews: function () {
+	    // Remove all existing graph layer views
+	    // Note: we don't use `getGraphLayerViews()` here because
+	    // rendered graph layer views could be different from the ones
+	    // in the graph layer collection (`onResetGraphLayerCollectionReset`).
+	    this.getLayerViews().forEach(layerView => {
+	      if (!layerView[GRAPH_LAYER_VIEW_MARKER]) return;
+	      this._removeLayerView(layerView);
+	    });
+	    // Create and insert new graph layer views
+	    this.model.getLayers().forEach(layer => {
+	      const layerView = this.createLayerView({
+	        id: layer.id,
+	        model: layer
+	      });
+	      // Insert the layer view into the paper layers, just before the labels layer.
+	      // All cell layers are positioned between the "back" and "labels" layers,
+	      // with the default "cells" layer originally occupying this position.
+	      this.addLayerView(layerView, {
+	        before: this.graphLayerRefId
+	      });
+	    });
+	  },
+	  /**
+	   * @protected
+	   * @description Renders all implicit layer views.
+	   */
+	  renderImplicitLayerViews: function () {
+	    this.implicitLayers.forEach(layerInit => {
+	      const layerView = this.createLayerView(layerInit);
+	      this.addLayerView(layerView);
+	    });
 	  },
 	  cloneOptions: function () {
 	    const {
@@ -32675,136 +34330,295 @@ var joint = (function (exports) {
 	      }]
 	    }];
 	  },
-	  hasLayerView(layerName) {
-	    return layerName in this._layers.viewsMap;
+	  /**
+	   * @public
+	   * @description Checks whether the layer view exists by the given layer id or layer model.
+	   * @param {string|dia.GraphLayer} layerRef - Layer id or layer model.
+	   * @return {boolean} True if the layer view exists, false otherwise.
+	   */
+	  hasLayerView(layerRef) {
+	    let layerId;
+	    if (isString(layerRef)) {
+	      layerId = layerRef;
+	    } else if (layerRef) {
+	      layerId = layerRef.id;
+	    } else {
+	      return false;
+	    }
+	    return layerId in this._layers.viewsMap;
 	  },
-	  getLayerView(layerName) {
-	    const {
-	      _layers: {
-	        viewsMap
-	      }
-	    } = this;
-	    if (layerName in viewsMap) return viewsMap[layerName];
-	    throw new Error(`dia.Paper: Unknown layer "${layerName}".`);
+	  /**
+	   * @public
+	   * @description Returns the layer view by the given layer id or layer model.
+	   * @param {string|dia.GraphLayer} layerRef - Layer id or layer model.
+	   * @return {dia.LayerView} The layer view.
+	   * @throws {Error} if the layer view is not found
+	   */
+	  getLayerView(layerRef) {
+	    let layerId;
+	    if (isString(layerRef)) {
+	      layerId = layerRef;
+	    } else if (layerRef) {
+	      layerId = layerRef.id;
+	    } else {
+	      throw new Error('dia.Paper: No layer provided.');
+	    }
+	    const layerView = this._layers.viewsMap[layerId];
+	    if (!layerView) {
+	      throw new Error(`dia.Paper: Unknown layer view "${layerId}".`);
+	    }
+	    return layerView;
 	  },
-	  getLayerNode(layerName) {
-	    return this.getLayerView(layerName).el;
+	  /**
+	   * @deprecated use `getLayerView(layerId).el` instead
+	   */
+	  getLayerNode(layerId) {
+	    return this.getLayerView(layerId).el;
 	  },
-	  _removeLayer(layerView) {
-	    this._unregisterLayer(layerView);
+	  /**
+	   * @protected
+	   * @description Removes the given layer view from the paper.
+	   * It does not check whether the layer view is empty.
+	   * @param {dia.LayerView} layerView - The layer view to remove.
+	   */
+	  _removeLayerView(layerView) {
+	    this._unregisterLayerView(layerView);
 	    layerView.remove();
 	  },
-	  _unregisterLayer(layerView) {
-	    const {
-	      _layers: {
-	        viewsMap,
-	        namesMap,
-	        order
-	      }
-	    } = this;
-	    const layerName = this._getLayerName(layerView);
-	    order.splice(order.indexOf(layerName), 1);
-	    delete namesMap[layerView.cid];
-	    delete viewsMap[layerName];
+	  /**
+	   * @protected
+	   * @description Removes all layer views from the paper.
+	   * It does not check whether the layer views are empty.
+	   */
+	  _removeLayerViews: function () {
+	    Object.values(this._layers.viewsMap).forEach(layerView => {
+	      this._removeLayerView(layerView);
+	    });
 	  },
-	  _registerLayer(layerName, layerView, beforeLayerView) {
+	  /**
+	   * @protected
+	   * @description Unregisters the given layer view from the paper.
+	   * @param {dia.LayerView} layerView - The layer view to unregister.
+	   */
+	  _unregisterLayerView(layerView) {
 	    const {
 	      _layers: {
 	        viewsMap,
-	        namesMap,
 	        order
 	      }
 	    } = this;
-	    if (beforeLayerView) {
-	      const beforeLayerName = this._getLayerName(beforeLayerView);
-	      order.splice(order.indexOf(beforeLayerName), 0, layerName);
-	    } else {
-	      order.push(layerName);
+	    const layerId = layerView.id;
+	    // Remove the layer id from the order list.
+	    const layerIndex = order.indexOf(layerId);
+	    if (layerIndex !== -1) {
+	      order.splice(layerIndex, 1);
 	    }
-	    viewsMap[layerName] = layerView;
-	    namesMap[layerView.cid] = layerName;
+	    // Unlink the layer view from the paper.
+	    layerView.unsetPaperReference();
+	    // Remove the layer view from the paper's registry.
+	    delete viewsMap[layerId];
 	  },
-	  _getLayerView(layer) {
-	    const {
-	      _layers: {
-	        namesMap,
-	        viewsMap
-	      }
-	    } = this;
-	    if (layer instanceof PaperLayer) {
-	      if (layer.cid in namesMap) return layer;
-	      return null;
+	  /**
+	   * @protected
+	   * @description Registers the given layer view in the paper.
+	   * @param {dia.LayerView} layerView - The layer view to register.
+	   * @throws {Error} if the layer view is not an instance of dia.LayerView
+	   * @throws {Error} if the layer view already exists in the paper
+	   */
+	  _registerLayerView(layerView) {
+	    if (!layerView || !layerView[LAYER_VIEW_MARKER]) {
+	      throw new Error('dia.Paper: The layer view must be an instance of dia.LayerView.');
 	    }
-	    if (layer in viewsMap) return viewsMap[layer];
-	    return null;
+	    if (this.hasLayerView(layerView.id)) {
+	      throw new Error(`dia.Paper: The layer view "${layerView.id}" already exists.`);
+	    }
+	    // Link the layer view back to the paper.
+	    layerView.setPaperReference(this);
+	    // Store the layer view in the paper's registry.
+	    this._layers.viewsMap[layerView.id] = layerView;
 	  },
-	  _getLayerName(layerView) {
+	  /**
+	   * @public
+	   * @description Removes the layer view by the given layer id or layer model.
+	   * @param {string|dia.GraphLayer} layerRef - Layer id or layer model.
+	   * @throws {Error} if the layer view is not empty
+	   */
+	  removeLayerView(layerRef) {
+	    const layerView = this.getLayerView(layerRef);
+	    if (!layerView.isEmpty()) {
+	      throw new Error('dia.Paper: The layer view is not empty.');
+	    }
+	    this._removeLayerView(layerView);
+	  },
+	  /**
+	   * @protected
+	   * @description Schedules the layer view removal by the given layer id or layer model.
+	   * The actual removal will be performed during the paper update cycle.
+	   * @param {string|dia.GraphLayer} layerRef - Layer id or layer model.
+	   * @param {Object} [opt] - Update options.
+	   */
+	  requestLayerViewRemoval(layerRef, opt) {
+	    const layerView = this.getLayerView(layerRef);
 	    const {
-	      _layers: {
-	        namesMap
-	      }
+	      FLAG_REMOVE
 	    } = this;
-	    return namesMap[layerView.cid];
+	    const {
+	      UPDATE_PRIORITY
+	    } = layerView;
+	    this.requestViewUpdate(layerView, FLAG_REMOVE, UPDATE_PRIORITY, opt);
 	  },
-	  _requireLayerView(layer) {
-	    const layerView = this._getLayerView(layer);
-	    if (!layerView) {
-	      if (layer instanceof PaperLayer) {
-	        throw new Error('dia.Paper: The layer is not registered.');
+	  /**
+	   * @public
+	   * @internal not documented
+	   * @description Schedules the cell view insertion into the appropriate layer view.
+	   * The actual insertion will be performed during the paper update cycle.
+	   * @param {dia.Cell} cell - The cell model whose view should be inserted.
+	   * @param {Object} [opt] - Update options.
+	   */
+	  requestCellViewInsertion(cell, opt) {
+	    const viewLike = this._getCellViewLike(cell);
+	    if (!viewLike) return;
+	    this.requestViewUpdate(viewLike, this.FLAG_INSERT, viewLike.UPDATE_PRIORITY, opt);
+	  },
+	  /**
+	   * @private
+	   * Helper method for addLayerView and moveLayerView methods
+	   */
+	  _getBeforeLayerViewFromOptions(layerView, options) {
+	    let {
+	      before = null,
+	      index
+	    } = options;
+	    if (before && index !== undefined) {
+	      throw new Error('dia.Paper: Options "before" and "index" are mutually exclusive.');
+	    }
+	    let computedBefore;
+	    if (index !== undefined) {
+	      const {
+	        _layers: {
+	          order
+	        }
+	      } = this;
+	      if (index >= order.length) {
+	        // If index is greater than the number of layers,
+	        // return before as null (move to the end).
+	        computedBefore = null;
+	      } else if (index < 0) {
+	        // If index is negative, move to the beginning.
+	        computedBefore = order[0];
 	      } else {
-	        throw new Error(`dia.Paper: Unknown layer "${layer}".`);
+	        const originalIndex = order.indexOf(layerView.id);
+	        if (originalIndex !== -1 && index > originalIndex) {
+	          // If moving a layer upwards in the stack, we need to adjust the index
+	          // to account for the layer being removed from its original position.
+	          index += 1;
+	        }
+	        // Otherwise, get the layer ID at the specified index.
+	        computedBefore = order[index] || null;
 	      }
+	    } else {
+	      computedBefore = before;
 	    }
-	    return layerView;
+	    return computedBefore ? this.getLayerView(computedBefore) : null;
 	  },
-	  hasLayer(layer) {
-	    return this._getLayerView(layer) !== null;
+	  /**
+	   * @public
+	   * @description Adds the layer view to the paper.
+	   * @param {dia.LayerView} layerView - The layer view to add.
+	   * @param {Object} [options] - Adding options.
+	   * @param {string|dia.GraphLayer} [options.before] - Layer id or layer model before
+	   */
+	  addLayerView(layerView, options = {}) {
+	    this._registerLayerView(layerView);
+	    const beforeLayerView = this._getBeforeLayerViewFromOptions(layerView, options);
+	    this.insertLayerView(layerView, beforeLayerView);
 	  },
-	  removeLayer(layer) {
-	    const layerView = this._requireLayerView(layer);
-	    if (!layerView.isEmpty()) {
-	      throw new Error('dia.Paper: The layer is not empty.');
-	    }
-	    this._removeLayer(layerView);
+	  /**
+	   * @public
+	   * @description Moves the layer view.
+	   * @param {Paper.LayerRef} layerRef - The layer view reference to move.
+	   * @param {Object} [options] - Moving options.
+	   * @param {Paper.LayerRef} [options.before] - Layer id or layer model before
+	   * @param {number} [options.index] - Zero-based index to which to move the layer view.
+	   */
+	  moveLayerView(layerRef, options = {}) {
+	    const layerView = this.getLayerView(layerRef);
+	    const beforeLayerView = this._getBeforeLayerViewFromOptions(layerView, options);
+	    this.insertLayerView(layerView, beforeLayerView);
 	  },
-	  addLayer(layerName, layerView, options = {}) {
-	    if (!layerName || typeof layerName !== 'string') {
-	      throw new Error('dia.Paper: The layer name must be provided.');
-	    }
-	    if (this._getLayerView(layerName)) {
-	      throw new Error(`dia.Paper: The layer "${layerName}" already exists.`);
-	    }
-	    if (!(layerView instanceof PaperLayer)) {
-	      throw new Error('dia.Paper: The layer view is not an instance of dia.PaperLayer.');
-	    }
+	  /**
+	   * @protected
+	   * @description Inserts the layer view into the paper.
+	   * If the layer view already exists in the paper, it is moved to the new position.
+	   * @param {dia.LayerView} layerView - The layer view to insert.
+	   * @param {dia.LayerView} [before] - Layer view before
+	   * which the layer view should be inserted.
+	   */
+	  insertLayerView(layerView, beforeLayerView) {
+	    const layerId = layerView.id;
 	    const {
-	      insertBefore
-	    } = options;
-	    if (!insertBefore) {
-	      this._registerLayer(layerName, layerView, null);
-	      this.layers.appendChild(layerView.el);
-	    } else {
-	      const beforeLayerView = this._requireLayerView(insertBefore);
-	      this._registerLayer(layerName, layerView, beforeLayerView);
+	      _layers: {
+	        order
+	      }
+	    } = this;
+	    const currentLayerIndex = order.indexOf(layerId);
+
+	    // Should the layer view be inserted before another layer view?
+	    if (beforeLayerView) {
+	      const beforeLayerViewId = beforeLayerView.id;
+	      if (layerId === beforeLayerViewId) {
+	        // The layer view is already in the right place.
+	        return;
+	      }
+	      let beforeLayerPosition = order.indexOf(beforeLayerViewId);
+	      // Remove from the `order` list if the layer view is already in the order.
+	      if (currentLayerIndex !== -1) {
+	        if (currentLayerIndex < beforeLayerPosition) {
+	          beforeLayerPosition -= 1;
+	        }
+	        order.splice(currentLayerIndex, 1);
+	      }
+	      order.splice(beforeLayerPosition, 0, layerId);
 	      this.layers.insertBefore(layerView.el, beforeLayerView.el);
+	      return;
 	    }
+
+	    // Remove from the `order` list if the layer view is already in the order.
+	    // This is needed for the case when the layer view is inserted in the new position.
+	    if (currentLayerIndex !== -1) {
+	      order.splice(currentLayerIndex, 1);
+	    }
+	    order.push(layerId);
+	    this.layers.appendChild(layerView.el);
 	  },
-	  moveLayer(layer, insertBefore) {
-	    const layerView = this._requireLayerView(layer);
-	    if (layerView === this._getLayerView(insertBefore)) return;
-	    const layerName = this._getLayerName(layerView);
-	    this._unregisterLayer(layerView);
-	    this.addLayer(layerName, layerView, {
-	      insertBefore
-	    });
-	  },
-	  getLayerNames() {
-	    // Returns a sorted array of layer names.
+	  /**
+	   * @protected
+	   * @description Returns an array of layer view ids in the order they are rendered.
+	   * @returns {string[]} An array of layer view ids.
+	   */
+	  getLayerViewOrder() {
 	    return this._layers.order.slice();
 	  },
-	  getLayers() {
-	    // Returns a sorted array of layer views.
-	    return this.getLayerNames().map(name => this.getLayerView(name));
+	  /**
+	   * @public
+	   * @description Returns an array of layer views in the order they are rendered.
+	   * @returns {dia.LayerView[]} An array of layer views.
+	   */
+	  getLayerViews() {
+	    return this.getLayerViewOrder().map(id => this.getLayerView(id));
+	  },
+	  /**
+	   * @public
+	   * @description Returns an array of graph layer views in the order they are rendered.
+	   * @returns {dia.GraphLayerView[]} An array of graph layer views.
+	   */
+	  getGraphLayerViews() {
+	    const {
+	      _layers: {
+	        viewsMap
+	      }
+	    } = this;
+	    return this.model.getLayers().map(layer => viewsMap[layer.id]);
 	  },
 	  render: function () {
 	    this.renderChildren();
@@ -32824,7 +34638,7 @@ var joint = (function (exports) {
 	    this.svg = svg;
 	    this.defs = defs;
 	    this.layers = layers;
-	    this.renderLayers();
+	    this.renderLayerViews();
 	    V.ensureId(svg);
 	    this.addStylesheet(stylesheet);
 	    if (options.background) {
@@ -32839,60 +34653,79 @@ var joint = (function (exports) {
 	    if (!css) return;
 	    V(this.svg).prepend(V.createSVGStyle(css));
 	  },
-	  createLayer(name) {
-	    switch (name) {
-	      case LayersNames.GRID:
-	        return new GridLayer({
-	          name,
-	          paper: this,
-	          patterns: this.constructor.gridPatterns
-	        });
-	      default:
-	        return new PaperLayer({
-	          name
-	        });
+	  /**
+	   * @protected
+	   * @description Creates a layer view instance based on the provided options.
+	   * It finds the appropriate layer view constructor from the paper's
+	   * `layerViewNamespace` and instantiates it.
+	   * @param {*} options See `dia.LayerView` options.
+	   * @returns {dia.LayerView}
+	   */
+	  createLayerView(options) {
+	    if (options == null) {
+	      throw new Error('dia.Paper: Layer view options are required.');
+	    }
+	    if (options.id == null) {
+	      throw new Error('dia.Paper: Layer view id is required.');
+	    }
+	    const viewOptions = clone$1(options);
+	    let viewConstructor;
+	    if (viewOptions.model) {
+	      const modelType = viewOptions.model.get('type') || viewOptions.model.constructor.name;
+	      const type = modelType + 'View';
+
+	      // For backward compatibility we use the LegacyGraphLayerView for the default `cells` layer.
+	      if (this.model.layersController.legacyMode) {
+	        viewConstructor = LegacyGraphLayerView;
+	      } else {
+	        viewConstructor = this.layerViewNamespace[type] || LayerView;
+	      }
+	    } else {
+	      // Paper layers
+	      const type = viewOptions.type;
+	      viewConstructor = this.layerViewNamespace[type] || LayerView;
 	    }
+	    return new viewConstructor(viewOptions);
 	  },
-	  renderLayer: function (name) {
-	    const layerView = this.createLayer(name);
-	    this.addLayer(name, layerView);
-	    return layerView;
+	  /**
+	   * @protected
+	   * @description Renders all paper layer views and graph layer views.
+	   */
+	  renderLayerViews: function () {
+	    this._removeLayerViews();
+	    // Render the paper layers.
+	    this.renderImplicitLayerViews();
+	    // Render the layers.
+	    this.renderGraphLayerViews();
+	    // Ensure that essential layer views are present.
+	    this.assertLayerViews();
 	  },
-	  renderLayers: function (layers = defaultLayers) {
-	    this.removeLayers();
-	    layers.forEach(({
-	      name
-	    }) => this.renderLayer(name));
-	    // Throws an exception if doesn't exist
-	    const cellsLayerView = this.getLayerView(LayersNames.CELLS);
-	    const toolsLayerView = this.getLayerView(LayersNames.TOOLS);
-	    const labelsLayerView = this.getLayerView(LayersNames.LABELS);
+	  /**
+	   * @protected
+	   * @description Ensures that essential layer views are present on the paper.
+	   * @throws {Error} if any of the essential layer views is missing
+	   */
+	  assertLayerViews: function () {
+	    // Throws an exception if essential layer views are missing.
+	    const cellsLayerView = this.getLayerView(this.model.getDefaultLayer().id);
+	    const toolsLayerView = this.getLayerView(paperLayers.TOOLS);
+	    const labelsLayerView = this.getLayerView(paperLayers.LABELS);
+
 	    // backwards compatibility
 	    this.tools = toolsLayerView.el;
 	    this.cells = this.viewport = cellsLayerView.el;
-	    // user-select: none;
-	    cellsLayerView.vel.addClass(addClassNamePrefix('viewport'));
+	    // Backwards compatibility: same as `LegacyGraphLayerView` we keep
+	    // the `viewport` class on the labels layer.
 	    labelsLayerView.vel.addClass(addClassNamePrefix('viewport'));
-	    cellsLayerView.el.style.webkitUserSelect = 'none';
-	    cellsLayerView.el.style.userSelect = 'none';
 	    labelsLayerView.el.style.webkitUserSelect = 'none';
 	    labelsLayerView.el.style.userSelect = 'none';
 	  },
-	  removeLayers: function () {
-	    const {
-	      _layers: {
-	        viewsMap
-	      }
-	    } = this;
-	    Object.values(viewsMap).forEach(layerView => this._removeLayer(layerView));
-	  },
-	  resetLayers: function () {
-	    const {
-	      _layers: {
-	        viewsMap
-	      }
-	    } = this;
-	    Object.values(viewsMap).forEach(layerView => layerView.removePivots());
+	  /**
+	   * @protected
+	   * @description Resets all layer views.
+	   */
+	  resetLayerViews: function () {
+	    this.getLayerViews().forEach(layerView => layerView.reset());
 	  },
 	  update: function () {
 	    if (this._background) {
@@ -33008,26 +34841,25 @@ var joint = (function (exports) {
 	    return this;
 	  },
 	  clientMatrix: function () {
-	    return V.createSVGMatrix(this.cells.getScreenCTM());
+	    return V.createSVGMatrix(this.layers.getScreenCTM());
 	  },
 	  requestConnectedLinksUpdate: function (view, priority, opt) {
-	    if (view instanceof CellView) {
-	      var model = view.model;
-	      var links = this.model.getConnectedLinks(model);
-	      for (var j = 0, n = links.length; j < n; j++) {
-	        var link = links[j];
-	        var linkView = this._getCellViewLike(link);
-	        if (!linkView) continue;
-	        // We do not have to update placeholder views.
-	        // They will be updated on initial render.
-	        if (linkView[CELL_VIEW_PLACEHOLDER_MARKER]) continue;
-	        var nextPriority = Math.max(priority + 1, linkView.UPDATE_PRIORITY);
-	        this.scheduleViewUpdate(linkView, linkView.getFlag(LinkView.Flags.UPDATE), nextPriority, opt);
-	      }
+	    if (!view || !view[CELL_VIEW_MARKER]) return;
+	    var model = view.model;
+	    var links = this.model.getConnectedLinks(model);
+	    for (var j = 0, n = links.length; j < n; j++) {
+	      var link = links[j];
+	      var linkView = this._getCellViewLike(link);
+	      if (!linkView) continue;
+	      // We do not have to update placeholder views.
+	      // They will be updated on initial render.
+	      if (linkView[CELL_VIEW_PLACEHOLDER_MARKER]) continue;
+	      var nextPriority = Math.max(priority + 1, linkView.UPDATE_PRIORITY);
+	      this.scheduleViewUpdate(linkView, linkView.getFlag(LinkView.Flags.UPDATE), nextPriority, opt);
 	    }
 	  },
 	  forcePostponedViewUpdate: function (view, flag) {
-	    if (!view || !(view instanceof CellView)) return false;
+	    if (!view || !view[CELL_VIEW_MARKER]) return false;
 	    const model = view.model;
 	    if (model.isElement()) return false;
 	    const dumpOptions = {
@@ -33142,6 +34974,12 @@ var joint = (function (exports) {
 	    const {
 	      model
 	    } = view;
+	    if (view[GRAPH_LAYER_VIEW_MARKER]) {
+	      if (flag & FLAG_REMOVE) {
+	        this.removeLayerView(view);
+	        return 0;
+	      }
+	    }
 	    if (view[CELL_VIEW_MARKER]) {
 	      if (flag & FLAG_REMOVE) {
 	        this.removeView(model);
@@ -33741,7 +35579,7 @@ var joint = (function (exports) {
 	    }
 	    this.options.frozen = updates.keyFrozen = false;
 	    if (updates.sort) {
-	      this.sortViews();
+	      this.sortLayerViews();
 	      updates.sort = false;
 	    }
 	  },
@@ -33769,8 +35607,8 @@ var joint = (function (exports) {
 	    this.freeze();
 	    this._updates.disabled = true;
 	    //clean up all DOM elements/views to prevent memory leaks
-	    this.removeLayers();
 	    this.removeViews();
+	    this._removeLayerViews();
 	  },
 	  getComputedSize: function () {
 	    var options = this.options;
@@ -34008,7 +35846,17 @@ var joint = (function (exports) {
 	    if (opt && opt.useModelGeometry) {
 	      return this.model.getBBox() || new Rect();
 	    }
-	    return V(this.cells).getBBox();
+	    const graphLayerViews = this.getGraphLayerViews();
+	    // Return an empty rectangle if there are no layers
+	    // should not happen in practice
+	    if (graphLayerViews.length === 0) {
+	      return new Rect();
+	    }
+
+	    // Combine content area rectangles from all layers,
+	    // considering only graph layer views to exclude non-cell elements (e.g., grid, tools)
+	    const bbox = Rect.fromRectUnion(...graphLayerViews.map(view => view.vel.getBBox()));
+	    return bbox;
 	  },
 	  // Return the dimensions of the content bbox in the paper units (as it appears on screen).
 	  getContentBBox: function (opt) {
@@ -34084,7 +35932,7 @@ var joint = (function (exports) {
 	      cid,
 	      model: cell,
 	      interactive,
-	      labelsLayer: labelsLayer === true ? LayersNames.LABELS : labelsLayer
+	      labelsLayer: labelsLayer === true ? paperLayers.LABELS : labelsLayer
 	    });
 	  },
 	  _resolveCellViewClass: function (cell) {
@@ -34245,7 +36093,7 @@ var joint = (function (exports) {
 	    this.unfreeze({
 	      key
 	    });
-	    this.sortViews();
+	    this.sortLayerViews();
 	  },
 	  removeViews: function () {
 	    // Remove all views and their references from the paper.
@@ -34259,7 +36107,7 @@ var joint = (function (exports) {
 	    this._viewPlaceholders = {};
 	    this._idToCid = {};
 	  },
-	  sortViews: function () {
+	  sortLayerViews: function () {
 	    if (!this.isExactSorting()) {
 	      // noop
 	      return;
@@ -34269,38 +36117,16 @@ var joint = (function (exports) {
 	      this._updates.sort = true;
 	      return;
 	    }
-	    this.sortViewsExact();
+	    this.sortLayerViewsExact();
 	  },
-	  sortViewsExact: function () {
-	    // Run insertion sort algorithm in order to efficiently sort DOM elements according to their
-	    // associated model `z` attribute.
-
-	    var cellNodes = Array.from(this.cells.childNodes).filter(node => node.getAttribute('model-id'));
-	    var cells = this.model.get('cells');
-	    sortElements(cellNodes, function (a, b) {
-	      var cellA = cells.get(a.getAttribute('model-id'));
-	      var cellB = cells.get(b.getAttribute('model-id'));
-	      var zA = cellA.attributes.z || 0;
-	      var zB = cellB.attributes.z || 0;
-	      return zA === zB ? 0 : zA < zB ? -1 : 1;
-	    });
+	  sortLayerViewsExact: function () {
+	    this.getGraphLayerViews().forEach(view => view.sortExact());
 	  },
 	  insertView: function (view, isInitialInsert) {
-	    const {
-	      el,
-	      model
-	    } = view;
-	    const layerName = model.get('layer') || this.DEFAULT_CELL_LAYER;
-	    const layerView = this.getLayerView(layerName);
-	    switch (this.options.sorting) {
-	      case sortingTypes.APPROX:
-	        layerView.insertSortedNode(el, model.get('z'));
-	        break;
-	      case sortingTypes.EXACT:
-	      default:
-	        layerView.insertNode(el);
-	        break;
-	    }
+	    // layer can be null if it is added to the graph with 'dry' option
+	    const layerId = this.model.getCellLayerId(view.model);
+	    const layerView = this.getLayerView(layerId);
+	    layerView.insertCellView(view);
 	    view.onMount(isInitialInsert);
 	  },
 	  _hideView: function (viewLike) {
@@ -34355,7 +36181,7 @@ var joint = (function (exports) {
 	  // Find the first view climbing up the DOM tree starting at element `el`. Note that `el` can also
 	  // be a selector or a jQuery object.
 	  findView: function ($el) {
-	    var el = isString($el) ? this.cells.querySelector($el) : $el instanceof $ ? $el[0] : $el;
+	    var el = isString($el) ? this.layers.querySelector($el) : $el instanceof $ ? $el[0] : $el;
 	    var id = this.findAttribute('model-id', el);
 	    if (id) return this._views[id];
 	    return undefined;
@@ -34393,7 +36219,7 @@ var joint = (function (exports) {
 	    var views = this.model.getElements().map(this.findViewByModel, this);
 	    return views.filter(function (view) {
 	      return view && view.vel.getBBox({
-	        target: this.cells
+	        target: this.layers
 	      }).containsPoint(p);
 	    }, this);
 	  },
@@ -34407,7 +36233,7 @@ var joint = (function (exports) {
 	    var method = opt.strict ? 'containsRect' : 'intersect';
 	    return views.filter(function (view) {
 	      return view && rect[method](view.vel.getBBox({
-	        target: this.cells
+	        target: this.layers
 	      }));
 	    }, this);
 	  },
@@ -35191,7 +37017,7 @@ var joint = (function (exports) {
 	    if (this.GUARDED_TAG_NAMES.includes(target.tagName)) {
 	      return true;
 	    }
-	    if (view && view.model && view.model instanceof Cell) {
+	    if (view && view.model && view.model[CELL_MARKER]) {
 	      return false;
 	    }
 	    if (this.el === target || this.svg.contains(target)) {
@@ -35206,12 +37032,12 @@ var joint = (function (exports) {
 	    options.gridSize = gridSize;
 	    if (options.drawGrid && !options.drawGridSize) {
 	      // Do not redraw the grid if the `drawGridSize` is set.
-	      this.getLayerView(LayersNames.GRID).renderGrid();
+	      this.getLayerView(paperLayers.GRID).renderGrid();
 	    }
 	    return this;
 	  },
 	  setGrid: function (drawGrid) {
-	    this.getLayerView(LayersNames.GRID).setGrid(drawGrid);
+	    this.getLayerView(paperLayers.GRID).setGrid(drawGrid);
 	    return this;
 	  },
 	  updateBackgroundImage: function (opt) {
@@ -35536,194 +37362,9 @@ var joint = (function (exports) {
 	  }
 	}, {
 	  sorting: sortingTypes,
-	  Layers: LayersNames,
-	  backgroundPatterns: {
-	    flipXy: function (img) {
-	      // d b
-	      // q p
-
-	      var canvas = document.createElement('canvas');
-	      var imgWidth = img.width;
-	      var imgHeight = img.height;
-	      canvas.width = 2 * imgWidth;
-	      canvas.height = 2 * imgHeight;
-	      var ctx = canvas.getContext('2d');
-	      // top-left image
-	      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-	      // xy-flipped bottom-right image
-	      ctx.setTransform(-1, 0, 0, -1, canvas.width, canvas.height);
-	      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-	      // x-flipped top-right image
-	      ctx.setTransform(-1, 0, 0, 1, canvas.width, 0);
-	      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-	      // y-flipped bottom-left image
-	      ctx.setTransform(1, 0, 0, -1, 0, canvas.height);
-	      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-	      return canvas;
-	    },
-	    flipX: function (img) {
-	      // d b
-	      // d b
-
-	      var canvas = document.createElement('canvas');
-	      var imgWidth = img.width;
-	      var imgHeight = img.height;
-	      canvas.width = imgWidth * 2;
-	      canvas.height = imgHeight;
-	      var ctx = canvas.getContext('2d');
-	      // left image
-	      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-	      // flipped right image
-	      ctx.translate(2 * imgWidth, 0);
-	      ctx.scale(-1, 1);
-	      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-	      return canvas;
-	    },
-	    flipY: function (img) {
-	      // d d
-	      // q q
-
-	      var canvas = document.createElement('canvas');
-	      var imgWidth = img.width;
-	      var imgHeight = img.height;
-	      canvas.width = imgWidth;
-	      canvas.height = imgHeight * 2;
-	      var ctx = canvas.getContext('2d');
-	      // top image
-	      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-	      // flipped bottom image
-	      ctx.translate(0, 2 * imgHeight);
-	      ctx.scale(1, -1);
-	      ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-	      return canvas;
-	    },
-	    watermark: function (img, opt) {
-	      //   d
-	      // d
-
-	      opt = opt || {};
-	      var imgWidth = img.width;
-	      var imgHeight = img.height;
-	      var canvas = document.createElement('canvas');
-	      canvas.width = imgWidth * 3;
-	      canvas.height = imgHeight * 3;
-	      var ctx = canvas.getContext('2d');
-	      var angle = isNumber(opt.watermarkAngle) ? -opt.watermarkAngle : -20;
-	      var radians = toRad(angle);
-	      var stepX = canvas.width / 4;
-	      var stepY = canvas.height / 4;
-	      for (var i = 0; i < 4; i++) {
-	        for (var j = 0; j < 4; j++) {
-	          if ((i + j) % 2 > 0) {
-	            // reset the current transformations
-	            ctx.setTransform(1, 0, 0, 1, (2 * i - 1) * stepX, (2 * j - 1) * stepY);
-	            ctx.rotate(radians);
-	            ctx.drawImage(img, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
-	          }
-	        }
-	      }
-	      return canvas;
-	    }
-	  },
-	  gridPatterns: {
-	    dot: [{
-	      color: '#AAAAAA',
-	      thickness: 1,
-	      markup: 'rect',
-	      render: function (el, opt) {
-	        V(el).attr({
-	          width: opt.thickness,
-	          height: opt.thickness,
-	          fill: opt.color
-	        });
-	      }
-	    }],
-	    fixedDot: [{
-	      color: '#AAAAAA',
-	      thickness: 1,
-	      markup: 'rect',
-	      render: function (el, opt) {
-	        V(el).attr({
-	          fill: opt.color
-	        });
-	      },
-	      update: function (el, opt, paper) {
-	        const {
-	          sx,
-	          sy
-	        } = paper.scale();
-	        const width = sx <= 1 ? opt.thickness : opt.thickness / sx;
-	        const height = sy <= 1 ? opt.thickness : opt.thickness / sy;
-	        V(el).attr({
-	          width,
-	          height
-	        });
-	      }
-	    }],
-	    mesh: [{
-	      color: '#AAAAAA',
-	      thickness: 1,
-	      markup: 'path',
-	      render: function (el, opt) {
-	        var d;
-	        var width = opt.width;
-	        var height = opt.height;
-	        var thickness = opt.thickness;
-	        if (width - thickness >= 0 && height - thickness >= 0) {
-	          d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
-	        } else {
-	          d = 'M 0 0 0 0';
-	        }
-	        V(el).attr({
-	          'd': d,
-	          stroke: opt.color,
-	          'stroke-width': opt.thickness
-	        });
-	      }
-	    }],
-	    doubleMesh: [{
-	      color: '#AAAAAA',
-	      thickness: 1,
-	      markup: 'path',
-	      render: function (el, opt) {
-	        var d;
-	        var width = opt.width;
-	        var height = opt.height;
-	        var thickness = opt.thickness;
-	        if (width - thickness >= 0 && height - thickness >= 0) {
-	          d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
-	        } else {
-	          d = 'M 0 0 0 0';
-	        }
-	        V(el).attr({
-	          'd': d,
-	          stroke: opt.color,
-	          'stroke-width': opt.thickness
-	        });
-	      }
-	    }, {
-	      color: '#000000',
-	      thickness: 3,
-	      scaleFactor: 4,
-	      markup: 'path',
-	      render: function (el, opt) {
-	        var d;
-	        var width = opt.width;
-	        var height = opt.height;
-	        var thickness = opt.thickness;
-	        if (width - thickness >= 0 && height - thickness >= 0) {
-	          d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
-	        } else {
-	          d = 'M 0 0 0 0';
-	        }
-	        V(el).attr({
-	          'd': d,
-	          stroke: opt.color,
-	          'stroke-width': opt.thickness
-	        });
-	      }
-	    }]
-	  }
+	  Layers: paperLayers,
+	  backgroundPatterns,
+	  gridPatterns
 	});
 
 	const ToolView = View.extend({
@@ -35822,7 +37463,7 @@ var joint = (function (exports) {
 	    tools: null,
 	    relatedView: null,
 	    name: null
-	    // layer?: LayersNames.TOOLS
+	    // layer?: Paper.Layers.TOOLS
 	    // z?: number
 	  },
 	  configure: function (options) {
@@ -35936,7 +37577,7 @@ var joint = (function (exports) {
 	  },
 	  getLayer() {
 	    const {
-	      layer = LayersNames.TOOLS
+	      layer = Paper.Layers.TOOLS
 	    } = this.options;
 	    return layer;
 	  },
@@ -35965,21 +37606,26 @@ var joint = (function (exports) {
 
 	var index$2 = {
 		__proto__: null,
-		CELL_VIEW_MARKER: CELL_VIEW_MARKER,
 		Cell: Cell,
+		CellCollection: CellCollection,
 		CellView: CellView,
+		DEFAULT_GRAPH_LAYER_TYPE: DEFAULT_GRAPH_LAYER_TYPE,
 		Element: Element$1,
 		ElementView: ElementView,
 		Graph: Graph,
+		GraphLayer: GraphLayer,
+		GraphLayerCollection: GraphLayerCollection,
+		GraphLayerView: GraphLayerView,
+		GridLayerView: GridLayerView,
 		HighlighterView: HighlighterView,
-		LayersNames: LayersNames,
+		LayerView: LayerView,
 		Link: Link$1,
 		LinkView: LinkView,
 		Paper: Paper,
-		PaperLayer: PaperLayer,
 		ToolView: ToolView,
 		ToolsView: ToolsView,
-		attributes: attributes
+		attributes: attributes,
+		sortingTypes: sortingTypes
 	};
 
 	// Vertex Handles
@@ -37986,7 +39632,7 @@ var joint = (function (exports) {
 		Remove: Remove
 	};
 
-	var version = "4.2.0-alpha.1";
+	var version = "4.2.0-beta.2";
 
 	const Vectorizer = V;
 	const layout$1 = {