@superblocksteam/library 2.0.3-next.101 → 2.0.3-next.103

package/dist/{index-BBdi2OTU.js → index-Cf5B7k85.js}

@@ -46,7 +46,7 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method4) => (__accessCheck(obj, member, "access private method"), method4);
-var _removeSourceIdElement_dec, _setSourceIdElement_dec, _setActiveRootInstanceId_dec, _init, _runApi_dec, _init2, _setWidgetProperty_dec, _setWidgetProperties_dec, _writeRuntimeProperties_dec, _dropComponent_dec, _clearPendingTransactions_dec, _addPendingTransaction_dec, _init3, _processRootWidget_dec, _init4, _refreshPositionsAndGetDropConstraints_dec, _init5, _updateChildPositions_dec, _setWidgetPosition_dec, _setActiveTargetRect_dec, _setActiveDragRect_dec, _setDropTargetId_dec, _setInvalidDropTarget_dec, _setValidRootIds_dec, _cancelNewComponentDrag_dec, _startNewComponentDrag_dec, _setIsDragging_dec, _setWidgetFeatures_dec, _init6;
+var _removeSourceIdElement_dec, _setSourceIdElement_dec, _setActiveRootInstanceId_dec, _init, _runApi_dec, _init2, _setWidgetProperty_dec, _setWidgetProperties_dec, _writeRuntimeProperties_dec, _ackDeletedComponents_dec, _dropComponent_dec, _createComponent_dec, _batchUpdate_dec, _clearPendingTransactions_dec, _addPendingTransaction_dec, _executeOrAddToBatch_dec, _init3, _addWidgetFromPayload_dec, _processRoot_dec, _init4, _addOptimisticCreateWidget_dec, _processRootWidget_dec, _init5, _refreshPositionsAndGetDropConstraints_dec, _init6, _updateChildPositions_dec, _setWidgetPosition_dec, _setActiveTargetRect_dec, _setActiveDragRect_dec, _setDropTargetId_dec, _setInvalidDropTarget_dec, _setValidRootIds_dec, _cancelNewComponentDrag_dec, _startNewComponentDrag_dec, _setIsDragging_dec, _setWidgetFeatures_dec, _init7;
 import * as React from "react";
 import React__default, { useMemo as useMemo$2, createContext, useContext, isValidElement as isValidElement$1, cloneElement as cloneElement$1, Children, useState, createElement, useRef, useLayoutEffect as useLayoutEffect$2, forwardRef, memo, useEffect, version as version$2, Component, useCallback, useImperativeHandle, useReducer, PureComponent, useSyncExternalStore, Suspense, createRef } from "react";
 import * as ReactDOM from "react-dom";
@@ -2703,14 +2703,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-66hpXNFC.js"
+            "./allPathsLoader-C6kYq5jL.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BQDszFo7.js"
+            "./splitPathsBySizeLoader-Cy4Y9soq.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -63982,6 +63982,10 @@ class OperationAPI {
       var _a2;
       return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.createComponent(payload);
     });
+    __publicField(this, "editorDeleteComponents", async (payload) => {
+      var _a2;
+      return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.deleteComponents(payload);
+    });
     __publicField(this, "editorSetProperty", async (payload) => {
       var _a2;
       return (_a2 = this.socket) == null ? void 0 : _a2.call.editor.setProperty(payload);
@@ -64156,11 +64160,14 @@ async function connectSocket(serverUrl, peerId, userId) {
     return void 0;
   }
 }
-_addPendingTransaction_dec = [action], _clearPendingTransactions_dec = [action], _dropComponent_dec = [action], _writeRuntimeProperties_dec = [action], _setWidgetProperties_dec = [action], _setWidgetProperty_dec = [action];
+_executeOrAddToBatch_dec = [action], _addPendingTransaction_dec = [action], _clearPendingTransactions_dec = [action], _batchUpdate_dec = [action], _createComponent_dec = [action], _dropComponent_dec = [action], _ackDeletedComponents_dec = [action], _writeRuntimeProperties_dec = [action], _setWidgetProperties_dec = [action], _setWidgetProperty_dec = [action];
 class OperationManager {
   constructor() {
     __runInitializers(_init3, 5, this);
     __publicField(this, "pendingTransactions", []);
+    __publicField(this, "waitingForBatch", false);
+    __publicField(this, "batchOperations", []);
+    __publicField(this, "batchOperationTransactionId");
     __publicField(this, "visibleSourceIds", []);
     makeAutoObservable(this);
     registerStores({
@@ -64172,23 +64179,70 @@ class OperationManager {
   }
   get pendingReparentOperations() {
     return this.pendingTransactions.filter(
-      (t3) => t3.type === "reparent"
+      (t3) => t3.type === "editor:moveComponent"
     );
   }
-  get pendingSetPropertiesOperations() {
+  get pendingDeleteOperations() {
     return this.pendingTransactions.filter(
-      (t3) => t3.type === "setProperties"
+      (t3) => t3.type === "editor:deleteComponents"
     );
   }
-  get pendingSetPropertyOperations() {
+  get pendingSetPropertiesOperations() {
     return this.pendingTransactions.filter(
-      (t3) => t3.type === "setProperty"
+      (t3) => t3.type === "editor:setProperties"
     );
   }
+  get hasPendingOperations() {
+    return this.pendingTransactions.length > 0;
+  }
   get allNames() {
     return [];
   }
+  executeOrAddToBatch(operation) {
+    const transactionId = this.batchOperationTransactionId ?? generateId$1();
+    const payload = this.waitingForBatch ? operation.payload : {
+      ...operation.payload,
+      transaction: {
+        id: transactionId
+      }
+    };
+    const opWithId = {
+      ...operation,
+      id: transactionId,
+      payload
+    };
+    this.addPendingTransaction(opWithId);
+    if (this.waitingForBatch) {
+      this.batchOperations.push(opWithId);
+    } else {
+      switch (operation.type) {
+        case "editor:moveComponent":
+          return sourceUpdateApi.editorMoveComponent(
+            payload
+          ).catch((e3) => {
+            console.error("Error during operation", e3);
+          });
+        case "editor:setProperties":
+          return sourceUpdateApi.editorSetProperties(
+            payload
+          ).catch((e3) => {
+            console.error("Error during operation", e3);
+          });
+        case "editor:createComponent":
+          return sourceUpdateApi.editorCreateComponent(
+            payload
+          ).catch((e3) => {
+            console.error("Error during operation", e3);
+          });
+      }
+    }
+  }
   addPendingTransaction(transaction2) {
+    if (transaction2.type === "editor:createComponent") {
+      getEditStore().runtimeEntitiesManager.addOptimisticCreateWidget(
+        transaction2.payload
+      );
+    }
     this.pendingTransactions.push(transaction2);
   }
   clearPendingTransactions(transactionIds) {
@@ -64214,53 +64268,70 @@ class OperationManager {
       }
     });
   }
+  batchUpdate(performOperations) {
+    this.waitingForBatch = true;
+    this.batchOperationTransactionId = generateId$1();
+    performOperations();
+    sourceUpdateApi.editorBatchUpdate({
+      updates: this.batchOperations,
+      transaction: {
+        id: this.batchOperationTransactionId
+      }
+    });
+    this.waitingForBatch = false;
+    this.batchOperations = [];
+    this.batchOperationTransactionId = void 0;
+  }
+  createComponent(payload) {
+    this.executeOrAddToBatch({
+      type: "editor:createComponent",
+      payload
+    });
+  }
   dropComponent(action2) {
     const { from: from2, to: to2, propsToChange } = action2;
-    const transactionId = generateId$1();
-    this.addPendingTransaction({
-      type: "reparent",
-      id: transactionId,
-      payload: { from: from2, to: to2, changedProps: propsToChange ?? {} },
-      affectedSourceIds: [from2.source.id, to2.source.id]
-    });
-    sourceUpdateApi.editorMoveComponent({
+    const payload = {
       from: from2,
       to: to2,
-      changedProps: propsToChange ?? {},
-      transaction: {
-        id: transactionId
-      }
-    }).catch((e3) => {
-      console.error("Error during drop on stack", e3);
+      changedProps: propsToChange ?? {}
+    };
+    this.executeOrAddToBatch({
+      type: "editor:moveComponent",
+      payload
+    });
+  }
+  ackDeletedComponents(payload) {
+    var _a2, _b2;
+    if (!((_a2 = payload == null ? void 0 : payload.transaction) == null ? void 0 : _a2.id)) {
+      console.error("No transaction id in delete request", payload);
+      return;
+    }
+    this.addPendingTransaction({
+      type: "editor:deleteComponents",
+      id: (_b2 = payload == null ? void 0 : payload.transaction) == null ? void 0 : _b2.id,
+      payload
     });
   }
   writeRuntimeProperties(sourceId, transactionId, updates) {
     this.addPendingTransaction({
-      type: "setProperties",
+      type: "editor:setProperties",
       id: transactionId,
-      sourceId,
       payload: { element: { source: { id: sourceId } }, properties: updates }
     });
   }
   setWidgetProperties(sourceId, properties2, callback) {
-    const transactionId = generateId$1();
-    this.addPendingTransaction({
-      type: "setProperties",
-      id: transactionId,
-      sourceId,
-      payload: { element: { source: { id: sourceId } }, properties: properties2 },
-      callback
-    });
-    sourceUpdateApi.editorSetProperties({
+    const payload = {
       element: {
         source: {
           id: sourceId
         }
       },
-      properties: properties2,
-      transaction: {
-        id: transactionId
-      }
+      properties: properties2
+    };
+    this.executeOrAddToBatch({
+      type: "editor:setProperties",
+      payload,
+      callback
     });
   }
   setWidgetProperty(sourceId, property, value, callback) {
@@ -64269,11 +64340,18 @@ class OperationManager {
   async ensureFilesSynced() {
     await sourceUpdateApi.ensureFilesSynced();
   }
+  generateSourceId() {
+    return `SB-${generateId$1()}`;
+  }
 }
 _init3 = __decoratorStart(null);
+__decorateElement(_init3, 1, "executeOrAddToBatch", _executeOrAddToBatch_dec, OperationManager);
 __decorateElement(_init3, 1, "addPendingTransaction", _addPendingTransaction_dec, OperationManager);
 __decorateElement(_init3, 1, "clearPendingTransactions", _clearPendingTransactions_dec, OperationManager);
+__decorateElement(_init3, 1, "batchUpdate", _batchUpdate_dec, OperationManager);
+__decorateElement(_init3, 1, "createComponent", _createComponent_dec, OperationManager);
 __decorateElement(_init3, 1, "dropComponent", _dropComponent_dec, OperationManager);
+__decorateElement(_init3, 1, "ackDeletedComponents", _ackDeletedComponents_dec, OperationManager);
 __decorateElement(_init3, 1, "writeRuntimeProperties", _writeRuntimeProperties_dec, OperationManager);
 __decorateElement(_init3, 1, "setWidgetProperties", _setWidgetProperties_dec, OperationManager);
 __decorateElement(_init3, 1, "setWidgetProperty", _setWidgetProperty_dec, OperationManager);
@@ -64498,8 +64576,10 @@ function isSbComponent(child) {
   return typeof child === "object" && ((_a2 = child.type) == null ? void 0 : _a2.isSb) === superblocksComponentSymbol;
 }
 const BindingMetaSymbol = Symbol("binding-meta");
+_processRoot_dec = [action], _addWidgetFromPayload_dec = [action];
 class RuntimeWidgetsManager {
   constructor(nameManager) {
+    __runInitializers(_init4, 5, this);
     __publicField(this, "widgets", {});
     __publicField(this, "sourceIdCount", {});
     __publicField(this, "sourceToInstanceIdSample", {});
@@ -64607,6 +64687,61 @@ class RuntimeWidgetsManager {
       isSbComponent: true
     });
   }
+  addWidgetFromPayload(details, createRequest) {
+    const parentMeta = this.widgets[details.parentInstanceId];
+    if (!parentMeta || !parentMeta.scopeId) {
+      return;
+    }
+    const parentScopeId = parentMeta.scopeId;
+    const traverse = (params) => {
+      var _a2;
+      const { child } = params;
+      const childName = typeof ((_a2 = child.properties.name) == null ? void 0 : _a2.value) === "string" ? child.properties.name.value : void 0;
+      const childIdentifier = this.nameManager.registerAndGetIdentifiers({
+        sourceId: child.id ?? getEditStore().operationManager.generateSourceId(),
+        name: childName,
+        scopeId: parentScopeId,
+        rootId: details.rootInstanceId
+      });
+      const childProps = Object.entries(child.properties).reduce(
+        (acc, [key2, value]) => {
+          if (typeof (value == null ? void 0 : value.value) === "string") {
+            acc[key2] = value.value;
+          }
+          return acc;
+        },
+        {}
+      );
+      const children = child.children.map(
+        (child2) => traverse({
+          child: child2,
+          parentInstanceId: childIdentifier.instanceId
+        })
+      );
+      this.setWidgetMeta(childIdentifier.instanceId, {
+        instanceId: childIdentifier.instanceId,
+        isSbComponent: true,
+        isInCustomComponent: false,
+        sourceId: childIdentifier.sourceId,
+        rootInstanceId: details.rootInstanceId,
+        scopeId: parentScopeId,
+        type: child.tagName,
+        name: childIdentifier.name,
+        props: childProps,
+        parentInstanceId: params.parentInstanceId,
+        children
+      });
+      return {
+        isSupportedElement: true,
+        isSbComponent: true,
+        value: childIdentifier.instanceId
+      };
+    };
+    traverse({
+      child: createRequest,
+      parentInstanceId: details.parentInstanceId
+    });
+  }
   getMeta(id2) {
     return this.widgets[id2];
   }
@@ -64646,10 +64781,14 @@ class RuntimeWidgetsManager {
     return this.getClosestAncestorByType(currentWidget.parentInstanceId, type5);
   }
 }
-_processRootWidget_dec = [action];
+_init4 = __decoratorStart(null);
+__decorateElement(_init4, 1, "processRoot", _processRoot_dec, RuntimeWidgetsManager);
+__decorateElement(_init4, 1, "addWidgetFromPayload", _addWidgetFromPayload_dec, RuntimeWidgetsManager);
+__decoratorMetadata(_init4, RuntimeWidgetsManager);
+_processRootWidget_dec = [action], _addOptimisticCreateWidget_dec = [action];
 class RuntimeEntitiesManager {
   constructor(nameManager, entityManager) {
-    __runInitializers(_init4, 5, this);
+    __runInitializers(_init5, 5, this);
     __publicField(this, "widgets");
     __publicField(this, "entitiesWithLocalBindings", /* @__PURE__ */ new Set());
     __publicField(this, "getOptimisticWidgetMeta", makeMobxCachedGetter((id2) => {
@@ -64720,25 +64859,6 @@ class RuntimeEntitiesManager {
           props: mergedProps
         };
       }
-      const singlePropUpdates = getEditStore().operationManager.pendingSetPropertyOperations.filter(
-        (op2) => op2.payload.element.source.id === sourceId
-      );
-      if (singlePropUpdates.length > 0) {
-        const mergedProps = { ...merged.props ?? {} };
-        singlePropUpdates.forEach((update) => {
-          const { property, value } = update.payload;
-          mergedProps[property] = getPropertyValue$1({
-            entityKey: property,
-            property: value,
-            name,
-            scopeId
-          });
-        });
-        merged = {
-          ...merged,
-          props: mergedProps
-        };
-      }
       const pendingResize = getEditStore().ui.resizing.pendingResize(sourceId);
       if (pendingResize) {
         const { width, height, marginLeft, marginTop } = pendingResize;
@@ -64808,6 +64928,21 @@ class RuntimeEntitiesManager {
   processRootWidget(params) {
     this.widgets.processRoot(params);
   }
+  addOptimisticCreateWidget(createRequest) {
+    const parentMeta = this.getAnyEditorWidgetMeta(
+      createRequest.parentElement.source.id
+    );
+    if (!parentMeta) {
+      return;
+    }
+    this.widgets.addWidgetFromPayload(
+      {
+        rootInstanceId: parentMeta.rootInstanceId,
+        parentInstanceId: parentMeta.instanceId
+      },
+      createRequest
+    );
+  }
   getEditorWidgetMeta(instanceId) {
     return this.getOptimisticWidgetMeta(instanceId);
   }
@@ -64882,28 +65017,52 @@ class RuntimeEntitiesManager {
     return (_b2 = this.widgets.getMeta(parentInstanceId)) == null ? void 0 : _b2.sourceId;
   }
   get relevantChildrenOperationsMap() {
-    const reparentOperations = getEditStore().operationManager.pendingReparentOperations;
-    if (reparentOperations.length === 0) {
-      return {};
-    }
+    const allPending = getEditStore().operationManager.allPendingTransactions;
     const ops = {};
-    for (const op2 of reparentOperations) {
-      const movedSource = op2.payload.from.source.id;
-      const fromParentSource = this.getParentSourceId(movedSource);
-      const toSource = op2.payload.to.source.id;
-      if (fromParentSource) {
-        ops[fromParentSource] ?? (ops[fromParentSource] = []);
-        ops[fromParentSource].push({
-          type: "REMOVE",
-          sourceId: movedSource
+    for (const op2 of allPending) {
+      if (op2.type === "editor:moveComponent") {
+        const payload = op2.payload;
+        const movedSource = payload.from.source.id;
+        const fromParentSource = this.getParentSourceId(movedSource);
+        const toSource = payload.to.source.id;
+        if (fromParentSource) {
+          ops[fromParentSource] ?? (ops[fromParentSource] = []);
+          ops[fromParentSource].push({
+            type: "REMOVE",
+            sourceId: movedSource
+          });
+        }
+        ops[toSource] ?? (ops[toSource] = []);
+        ops[toSource].push({
+          type: "ADD",
+          sourceId: movedSource,
+          index: payload.to.source.index ?? -1
+        });
+      } else if (op2.type === "editor:deleteComponents") {
+        const payload = op2.payload;
+        payload.elements.forEach((element) => {
+          const deletedSource = element.source.id;
+          const parentSourceId = this.getParentSourceId(deletedSource);
+          if (parentSourceId) {
+            ops[parentSourceId] ?? (ops[parentSourceId] = []);
+            ops[parentSourceId].push({
+              type: "REMOVE",
+              sourceId: deletedSource
+            });
+          }
         });
+      } else if (op2.type === "editor:createComponent") {
+        const payload = op2.payload;
+        const parentSourceId = payload.parentElement.source.id;
+        if (parentSourceId && payload.id) {
+          ops[parentSourceId] ?? (ops[parentSourceId] = []);
+          ops[parentSourceId].push({
+            type: "ADD",
+            sourceId: payload.id,
+            index: payload.parentElement.source.index ?? -1
+          });
+        }
       }
-      ops[toSource] ?? (ops[toSource] = []);
-      ops[toSource].push({
-        type: "ADD",
-        sourceId: movedSource,
-        index: op2.payload.to.source.index ?? -1
-      });
     }
     return ops;
   }
@@ -64913,12 +65072,10 @@ class RuntimeEntitiesManager {
   // TODO will need to include all other operations like
   // widget creation/deletion, etc.
   get hasEditOperationsPending() {
-    const reparentOperations = getEditStore().operationManager.pendingReparentOperations;
-    const propUpdates = getEditStore().operationManager.pendingSetPropertiesOperations;
-    const propertyOperations = getEditStore().operationManager.pendingSetPropertyOperations;
+    const hasPendingOperations = getEditStore().operationManager.hasPendingOperations;
     const hasPendingResize = getEditStore().ui.resizing.hasAnyPendingResize;
     const shouldRezisePage = getEditStore().ui.dnd.shouldResizePage;
-    return reparentOperations.length > 0 || propUpdates.length > 0 || propertyOperations.length > 0 || hasPendingResize || shouldRezisePage;
+    return hasPendingOperations || hasPendingResize || shouldRezisePage;
   }
   get getPendingOperations() {
     const pendingResizes = getEditStore().ui.resizing.pendingResizes;
@@ -64957,9 +65114,10 @@ class RuntimeEntitiesManager {
     return this.widgets.getClosestAncestorByType(id2, type5);
   }
 }
-_init4 = __decoratorStart(null);
-__decorateElement(_init4, 1, "processRootWidget", _processRootWidget_dec, RuntimeEntitiesManager);
-__decoratorMetadata(_init4, RuntimeEntitiesManager);
+_init5 = __decoratorStart(null);
+__decorateElement(_init5, 1, "processRootWidget", _processRootWidget_dec, RuntimeEntitiesManager);
+__decorateElement(_init5, 1, "addOptimisticCreateWidget", _addOptimisticCreateWidget_dec, RuntimeEntitiesManager);
+__decoratorMetadata(_init5, RuntimeEntitiesManager);
 const WithLayoutContainerTypes = /* @__PURE__ */ new Set([
   "SbContainer",
   "SbColumn",
@@ -65112,7 +65270,7 @@ _refreshPositionsAndGetDropConstraints_dec = [action];
 class GridManager {
   // cannot derive dnd from root because it may not be initialized yet
   constructor(root2, dnd) {
-    __runInitializers(_init5, 5, this);
+    __runInitializers(_init6, 5, this);
     __publicField(this, "root");
     __publicField(this, "dnd");
     this.root = root2;
@@ -65357,9 +65515,9 @@ class GridManager {
     return activeDragRect;
   }
 }
-_init5 = __decoratorStart(null);
-__decorateElement(_init5, 1, "refreshPositionsAndGetDropConstraints", _refreshPositionsAndGetDropConstraints_dec, GridManager);
-__decoratorMetadata(_init5, GridManager);
+_init6 = __decoratorStart(null);
+__decorateElement(_init6, 1, "refreshPositionsAndGetDropConstraints", _refreshPositionsAndGetDropConstraints_dec, GridManager);
+__decoratorMetadata(_init6, GridManager);
 const isWidgetVStack = (widget) => {
   var _a2, _b2;
   if (!widget || !widget.type) {
@@ -65704,7 +65862,7 @@ const getWidgetNode = (instanceId) => {
 _setWidgetFeatures_dec = [action], _setIsDragging_dec = [action], _startNewComponentDrag_dec = [action], _cancelNewComponentDrag_dec = [action], _setValidRootIds_dec = [action], _setInvalidDropTarget_dec = [action], _setDropTargetId_dec = [action], _setActiveDragRect_dec = [action], _setActiveTargetRect_dec = [action], _setWidgetPosition_dec = [action], _updateChildPositions_dec = [action];
 class DragAndDropManager {
   constructor(root2) {
-    __runInitializers(_init6, 5, this);
+    __runInitializers(_init7, 5, this);
     __publicField(this, "root");
     __publicField(this, "stack");
     __publicField(this, "grid");
@@ -65921,19 +66079,19 @@ class DragAndDropManager {
     this._shouldResizePage = false;
   }
 }
-_init6 = __decoratorStart(null);
-__decorateElement(_init6, 1, "setWidgetFeatures", _setWidgetFeatures_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "setIsDragging", _setIsDragging_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "startNewComponentDrag", _startNewComponentDrag_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "cancelNewComponentDrag", _cancelNewComponentDrag_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "setValidRootIds", _setValidRootIds_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "setInvalidDropTarget", _setInvalidDropTarget_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "setDropTargetId", _setDropTargetId_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "setActiveDragRect", _setActiveDragRect_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "setActiveTargetRect", _setActiveTargetRect_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "setWidgetPosition", _setWidgetPosition_dec, DragAndDropManager);
-__decorateElement(_init6, 1, "updateChildPositions", _updateChildPositions_dec, DragAndDropManager);
-__decoratorMetadata(_init6, DragAndDropManager);
+_init7 = __decoratorStart(null);
+__decorateElement(_init7, 1, "setWidgetFeatures", _setWidgetFeatures_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "setIsDragging", _setIsDragging_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "startNewComponentDrag", _startNewComponentDrag_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "cancelNewComponentDrag", _cancelNewComponentDrag_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "setValidRootIds", _setValidRootIds_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "setInvalidDropTarget", _setInvalidDropTarget_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "setDropTargetId", _setDropTargetId_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "setActiveDragRect", _setActiveDragRect_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "setActiveTargetRect", _setActiveTargetRect_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "setWidgetPosition", _setWidgetPosition_dec, DragAndDropManager);
+__decorateElement(_init7, 1, "updateChildPositions", _updateChildPositions_dec, DragAndDropManager);
+__decoratorMetadata(_init7, DragAndDropManager);
 const VERTICAL_ALIGNMENT_MAP = {
   top: "flex-start",
   center: "center",
@@ -113282,12 +113440,14 @@ function getSectionChildren() {
 function getTriggerComponent({
   componentType,
   parentElement,
-  primaryComponentName
+  primaryComponentName,
+  triggerComponentId
 }) {
   if (componentType === "SbModal") {
     return {
       parentElement,
       tagName: "SbButton",
+      id: triggerComponentId,
       properties: {
         label: Property.Static("Open Modal"),
         onClick: Property.Event([
@@ -113305,6 +113465,7 @@ function getTriggerComponent({
     return {
       parentElement,
       tagName: "SbButton",
+      id: triggerComponentId,
       properties: {
         label: Property.Static("Open Slideout"),
         onClick: Property.Event([
@@ -113484,12 +113645,14 @@ async function createComponent({
   console.log("creating component", { tagName, properties: properties2 });
   const parentElement = { source: parent };
   const needTriggerComponent = componentType === "SbModal" || componentType === "SbSlideout";
+  const editStore2 = getEditStore();
   let primaryComponent = {
     parentElement,
     tagName,
     properties: properties2,
     children,
-    scopeName
+    scopeName,
+    id: editStore2.operationManager.generateSourceId()
   };
   if (willWrapInSectionAndColumn) {
     primaryComponent = wrapInSectionColumnIfDroppingOnPage(
@@ -113501,25 +113664,17 @@ async function createComponent({
     const triggerComponent = getTriggerComponent({
       componentType,
       parentElement,
-      primaryComponentName: name
+      primaryComponentName: name,
+      triggerComponentId: editStore2.operationManager.generateSourceId()
     });
-    const result = await sourceUpdateApi.editorBatchUpdate({
-      updates: [
-        {
-          type: "editor:createComponent",
-          payload: triggerComponent
-        },
-        {
-          type: "editor:createComponent",
-          payload: primaryComponent
-        }
-      ]
+    editStore2.operationManager.batchUpdate(() => {
+      editStore2.operationManager.createComponent(triggerComponent);
+      editStore2.operationManager.createComponent(primaryComponent);
     });
-    if (Array.isArray(result) && result.length > 0 && typeof result[0] === "string") {
-      return result[0];
-    }
+    return triggerComponent.id;
   } else {
-    return sourceUpdateApi.editorCreateComponent(primaryComponent);
+    editStore2.operationManager.createComponent(primaryComponent);
+    return primaryComponent.id;
   }
 }
 function wrapInSectionColumnIfDroppingOnPage(primaryComponent, parentType) {
@@ -113534,6 +113689,7 @@ function wrapInSectionColumnIfDroppingOnPage(primaryComponent, parentType) {
     return {
       parentElement: primaryComponent.parentElement,
       tagName: "SbSection",
+      id: getEditStore().operationManager.generateSourceId(),
       properties: sectionProperties,
       children: [primaryComponent]
     };
@@ -113549,6 +113705,7 @@ function wrapInSectionColumnIfDroppingOnPage(primaryComponent, parentType) {
     return {
       parentElement: primaryComponent.parentElement,
       tagName: "SbColumn",
+      id: getEditStore().operationManager.generateSourceId(),
       properties: columnProperties,
       children: [primaryComponent]
     };
@@ -113556,10 +113713,12 @@ function wrapInSectionColumnIfDroppingOnPage(primaryComponent, parentType) {
   return {
     parentElement: primaryComponent.parentElement,
     tagName: "SbSection",
+    id: getEditStore().operationManager.generateSourceId(),
     properties: sectionProperties,
     children: [
       {
         tagName: "SbColumn",
+        id: getEditStore().operationManager.generateSourceId(),
         properties: {
           ...columnProperties,
           layout: Property.Static("vertical")
@@ -147351,14 +147510,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-NDdzt1-S.js"
+            "./allPathsLoader-BBePZAWr.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-DF5UX5DW.js"
+            "./splitPathsBySizeLoader-D3MLR09i.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -164705,17 +164864,17 @@ function system(constructor, dependencies2 = [], { singleton: singleton2 } = { s
 const id = () => Symbol();
 function init(systemSpec) {
   const singletons = /* @__PURE__ */ new Map();
-  const _init7 = ({ id: id2, constructor, dependencies: dependencies2, singleton: singleton2 }) => {
+  const _init8 = ({ id: id2, constructor, dependencies: dependencies2, singleton: singleton2 }) => {
     if (singleton2 && singletons.has(id2)) {
       return singletons.get(id2);
     }
-    const system2 = constructor(dependencies2.map((e3) => _init7(e3)));
+    const system2 = constructor(dependencies2.map((e3) => _init8(e3)));
     if (singleton2) {
       singletons.set(id2, system2);
     }
     return system2;
   };
-  return _init7(systemSpec);
+  return _init8(systemSpec);
 }
 function omit(keys2, obj) {
   const result = {};
@@ -182179,6 +182338,13 @@ const EmbedWrapper = (props) => {
       "sb-retrieve-property-panel-props",
       retrievePropertyPanelPropsListener
     );
+    const deleteComponentsListener = (event) => {
+      getEditStore().operationManager.ackDeletedComponents(event.data.payload);
+    };
+    iframeMessageHandler.addEventListener(
+      "sb-delete-components",
+      deleteComponentsListener
+    );
     const updatePropertyWithEffectsListener = (event) => {
       const payload = {
         sourceId: event.data.payload.sourceId,
@@ -182228,6 +182394,10 @@ const EmbedWrapper = (props) => {
         "sb-bootstrap-response",
         bootstrapResponseListener
       );
+      iframeMessageHandler.removeEventListener(
+        "sb-delete-components",
+        deleteComponentsListener
+      );
       iframeMessageHandler.removeEventListener(
         "sb-update-property-with-effects",
         updatePropertyWithEffectsListener
@@ -195665,4 +195835,4 @@ export {
   SbProvider as y,
   SbEventFlow as z
 };
-//# sourceMappingURL=index-BBdi2OTU.js.map
+//# sourceMappingURL=index-Cf5B7k85.js.map