@superblocksteam/library 2.0.6-next.71 → 2.0.6-next.73

package/dist/{index-CJ3tumTb.js → index-BLsacbxP.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, _updateLocation_dec, _init2, _cancelApi_dec, _runApi_dec, _init3, _renameWidget_dec, _setWidgetProperty_dec, _setWidgetProperties_dec, _writeRuntimeProperties_dec, _deleteComponents_dec, _dropComponent_dec, _createComponent_dec, _batchUpdate_dec, _clearPendingTransactions_dec, _addPendingTransaction_dec, _executeOrAddToBatch_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;
+var _updateLocation_dec, _init, _cancelApi_dec, _runApi_dec, _init2, _removeSourceIdElement_dec, _setSourceIdElement_dec, _setActiveRootInstanceId_dec, _init3, _renameWidget_dec, _setWidgetProperty_dec, _setWidgetProperties_dec, _writeRuntimeProperties_dec, _deleteComponents_dec, _dropComponent_dec, _createComponent_dec, _batchUpdate_dec, _clearPendingTransactions_dec, _addPendingTransaction_dec, _executeOrAddToBatch_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, { isValidElement as isValidElement$1, version as version$2, createContext, useContext, useEffect, useRef, useLayoutEffect as useLayoutEffect$2, Component, useState, useMemo as useMemo$2, useCallback, forwardRef, useImperativeHandle, cloneElement as cloneElement$1, createElement, Suspense, Children, memo, useReducer, useSyncExternalStore, PureComponent, createRef } from "react";
 import { S as SvgClose, a as SvgSystemDanger, b as SvgSystemInfo, c as SvgSystemError, d as SvgSystemSuccess, e as SvgPlus, f as SvgHide, g as SvgChevronDown, h as SvgEmptyCheckbox, i as SvgMinus, j as SvgCheckmark, k as SvgPlay, l as SvgDownload, m as SvgTrash, n as SvgFilter, o as SvgFreeze, p as SvgSort, q as SvgEllipsis, r as SvgCrossXs, s as SvgClark } from "./icons-lSlfQ50w.js";
@@ -42979,113 +42979,6 @@ const getDynamicBindings = (dynamicString) => {
 function getStableScopeId(scopeName) {
   return generatePredictableId(`sc-${scopeName}`);
 }
-const getWidgetAnchorName = (instanceId) => {
-  return `--widget-${instanceId}`;
-};
-const getWidgetRectAnchorName = (instanceId) => {
-  return `--widget-rect-${instanceId}`;
-};
-const getWidgetDropAreaAnchorName = (instanceId, widgetType) => {
-  if (widgetType === "SbModal" || widgetType === "SbSlideout") {
-    return `--widget-drop-area-${instanceId}`;
-  }
-  return `--widget-${instanceId}`;
-};
-const getEditWrapperId = (instanceId) => {
-  return `sb-edit-wrapper-${instanceId}`;
-};
-const getEditWrapperIdWithType = (instanceId, widgetType) => {
-  if (widgetType === "SbModal" || widgetType === "SbSlideout") {
-    return `sb-edit-wrapper-for-${widgetType}-${instanceId}`;
-  }
-  return `sb-edit-wrapper-${instanceId}`;
-};
-const getBoundingBoxForWidget = (instanceId) => {
-  var _a2;
-  return (_a2 = getWidgetNode(instanceId)) == null ? void 0 : _a2.getBoundingClientRect();
-};
-const getFirstInstanceElement = (element) => {
-  let current = element;
-  while (current) {
-    const instanceId = current.getAttribute(WIDGET_INSTANCE_ID_ATTRIBUTE);
-    if (instanceId) {
-      return {
-        element: current,
-        instanceId
-      };
-    }
-    current = current.firstElementChild;
-  }
-  return null;
-};
-const getWidgetNode = (instanceId) => {
-  const widgetMeta = getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(instanceId);
-  const sourceId = widgetMeta == null ? void 0 : widgetMeta.sourceId;
-  const type5 = widgetMeta == null ? void 0 : widgetMeta.type;
-  const editWrapperId = getEditWrapperIdWithType(instanceId, type5);
-  const wrapperElem = document.getElementById(editWrapperId);
-  return wrapperElem == null ? void 0 : wrapperElem.querySelector(
-    `[${WIDGET_SOURCE_ID_ATTRIBUTE}="${sourceId}"]`
-  );
-};
-const getIsComponentInInteractionLayer = (instanceId) => {
-  const editStore2 = getEditStore();
-  const activeRootInstanceId = editStore2.interactionLayerManager.activeRootInstanceId;
-  const isDropTargetInInteractionLayer = (
-    // if active root id is undefined, we are in the page and can drop anywhere
-    !activeRootInstanceId || instanceId && (instanceId === activeRootInstanceId || editStore2.runtimeEntitiesManager.isChildOf(
-      instanceId,
-      activeRootInstanceId
-    ))
-  );
-  return isDropTargetInInteractionLayer;
-};
-_setActiveRootInstanceId_dec = [action], _setSourceIdElement_dec = [action], _removeSourceIdElement_dec = [action];
-class InteractionLayerManager {
-  constructor() {
-    __runInitializers(_init, 5, this);
-    /**
-     * The id of the root element that is currently being interacted with
-     * the root can be SbPage, SbModal or SbSlideout
-     * If set to undefined, the interaction layer will be the SbPage
-     * if set to the detached component id, the inteactoin layer will be disabled on the page
-     */
-    __publicField(this, "activeRootInstanceId");
-    __publicField(this, "sourceIdElements", /* @__PURE__ */ new Map());
-    makeAutoObservable(this);
-  }
-  setActiveRootInstanceId(rootInstanceId) {
-    this.activeRootInstanceId = rootInstanceId;
-  }
-  setSourceIdElement(el2, sourceId) {
-    const { element, instanceId } = getFirstInstanceElement(el2) ?? {};
-    if (!element || !instanceId) {
-      return;
-    }
-    this.sourceIdElements.set(instanceId, { sourceId, element });
-    return instanceId;
-  }
-  removeSourceIdElement(instanceId) {
-    this.sourceIdElements.delete(instanceId);
-  }
-  getSourceIdElements(sourceId) {
-    const elements = [];
-    for (const [instanceId, info] of this.sourceIdElements.entries()) {
-      if (info.sourceId === sourceId) {
-        elements.push({
-          element: info.element,
-          instanceId
-        });
-      }
-    }
-    return elements;
-  }
-}
-_init = __decoratorStart(null);
-__decorateElement(_init, 1, "setActiveRootInstanceId", _setActiveRootInstanceId_dec, InteractionLayerManager);
-__decorateElement(_init, 1, "setSourceIdElement", _setSourceIdElement_dec, InteractionLayerManager);
-__decorateElement(_init, 1, "removeSourceIdElement", _removeSourceIdElement_dec, InteractionLayerManager);
-__decoratorMetadata(_init, InteractionLayerManager);
 function cleanObject(obj) {
   obj = toJS(obj);
   if (!obj || typeof obj !== "object") {
@@ -83886,7 +83779,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-BUaLyAXz.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-B12UVG-h.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -83899,7 +83792,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-BUaLyAXz.js").then((module2) => ({
+  return import("./devtools-consolidated-B12UVG-h.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -85107,7 +85000,7 @@ class EntityManager {
 _updateLocation_dec = [action];
 class LocationStore {
   constructor(rootStore2) {
-    __runInitializers(_init2, 5, this);
+    __runInitializers(_init, 5, this);
     __publicField(this, "route");
     __publicField(this, "rootStore");
     this.rootStore = rootStore2;
@@ -85150,9 +85043,9 @@ class LocationStore {
     };
   }
 }
-_init2 = __decoratorStart(null);
-__decorateElement(_init2, 1, "updateLocation", _updateLocation_dec, LocationStore);
-__decoratorMetadata(_init2, LocationStore);
+_init = __decoratorStart(null);
+__decorateElement(_init, 1, "updateLocation", _updateLocation_dec, LocationStore);
+__decoratorMetadata(_init, LocationStore);
 function getApiDeps(entitiesState, scopeId, apiDepCandidates) {
   const apiDepEntries = apiDepCandidates.map((candidateName) => {
     const [entityName, ...rest] = splitJSPath(candidateName) ?? [];
@@ -85509,7 +85402,7 @@ const decodeBytestringsInV2ExecutionResponse = (response) => {
 _runApi_dec = [action], _cancelApi_dec = [action];
 class ApiManager {
   constructor(rootStore2) {
-    __runInitializers(_init3, 5, this);
+    __runInitializers(_init2, 5, this);
     __publicField(this, "baseUrl");
     __publicField(this, "token");
     __publicField(this, "accessToken");
@@ -85692,10 +85585,10 @@ class ApiManager {
     });
   }
 }
-_init3 = __decoratorStart(null);
-__decorateElement(_init3, 1, "runApi", _runApi_dec, ApiManager);
-__decorateElement(_init3, 1, "cancelApi", _cancelApi_dec, ApiManager);
-__decoratorMetadata(_init3, ApiManager);
+_init2 = __decoratorStart(null);
+__decorateElement(_init2, 1, "runApi", _runApi_dec, ApiManager);
+__decorateElement(_init2, 1, "cancelApi", _cancelApi_dec, ApiManager);
+__decoratorMetadata(_init2, ApiManager);
 const richTypes = { Date: true, RegExp: true, String: true, Number: true };
 function diff(obj, newObj, options = { cyclesFix: true }, _stack = []) {
   var _a2, _b2;
@@ -86328,6 +86221,267 @@ const rootStore$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   __proto__: null,
   default: rootStore
 }, Symbol.toStringTag, { value: "Module" }));
+const WithLayoutContainerTypes = /* @__PURE__ */ new Set([
+  "SbContainer",
+  "SbColumn",
+  "SbModal",
+  "SbSlideout"
+]);
+const VStackLikeContainerTypes = /* @__PURE__ */ new Set(["SbPage"]);
+const HStackLikeContainerTypes = /* @__PURE__ */ new Set(["SbSection"]);
+const StackLikeContainerTypes = /* @__PURE__ */ new Set([
+  ...VStackLikeContainerTypes,
+  ...HStackLikeContainerTypes
+]);
+const detachedComponentTypeList = ["SbModal", "SbSlideout"];
+const DetachedComponentTypes = new Set(
+  detachedComponentTypeList
+);
+function rule(description, restriction) {
+  return {
+    description,
+    restriction
+  };
+}
+const restrictions = [
+  rule(
+    "Draggable type must be draggable",
+    ({ draggedType }) => !isTypeDraggable(draggedType)
+  ),
+  rule(
+    "Drop target type must be droppable",
+    ({ dropTargetType }) => !isTypeDroppable(dropTargetType)
+  ),
+  rule(
+    "Columns can only be dropped on sections",
+    ({ draggedType, dropTargetType }) => {
+      return draggedType === "SbColumn" && dropTargetType !== "SbSection";
+    }
+  ),
+  rule(
+    "Sections can only be dropped on pages",
+    ({ draggedType, dropTargetType }) => {
+      return draggedType === "SbSection" && dropTargetType !== "SbPage";
+    }
+  ),
+  rule(
+    "Only sections can be dropped on non-empty pages",
+    ({ draggedType, dropTargetType, dropTargetEmpty }) => {
+      return draggedType !== "SbSection" && dropTargetType === "SbPage" && !dropTargetEmpty;
+    }
+  ),
+  rule(
+    "Only columns can be dropped on non-empty sections",
+    ({ draggedType, dropTargetType, dropTargetEmpty }) => {
+      return draggedType !== "SbColumn" && dropTargetType === "SbSection" && !dropTargetEmpty;
+    }
+  )
+];
+const isDragAndDropTypeValid = ({
+  draggedType,
+  dropTargetType,
+  dropTargetEmpty,
+  isDraggingNewComponent
+}) => {
+  const actualDraggedType = isDraggingNewComponent && (draggedType === "SbModal" || draggedType === "SbSlideout") ? "SbButton" : draggedType;
+  const triggeredRestriction = restrictions.find(
+    (restriction) => restriction.restriction({
+      draggedType: actualDraggedType,
+      dropTargetType,
+      dropTargetEmpty,
+      isDraggingNewComponent
+    })
+  );
+  return triggeredRestriction == null;
+};
+const isTypeDroppable = (type5) => {
+  const component = rootStore.componentRegistry.getComponent(type5);
+  if (component && component.isDroppable === true) {
+    return true;
+  }
+  return false;
+};
+const isTypeDraggable = (type5) => {
+  return type5 !== "SbPage" && type5 !== "SbSlideout" && type5 !== "SbModal";
+};
+const isContentDraggable = (type5) => {
+  return isTypeDraggable(type5) && type5 !== "SbColumn" && type5 !== "SbSection";
+};
+function shouldWrapInSectionAndColumn(type5, parentType) {
+  if (DetachedComponentTypes.has(type5)) {
+    return false;
+  }
+  return parentType === "SbPage" && type5 !== "SbSection" || parentType === "SbSection" && type5 !== "SbColumn";
+}
+const filterSafeStackDimensionProperties = (existingProps) => {
+  const { width, height, size: size2 } = existingProps;
+  let safeHeight;
+  let safeWidth;
+  let safeSize;
+  if ((height == null ? void 0 : height.mode) === "px" || (height == null ? void 0 : height.mode) === "fit" || (height == null ? void 0 : height.mode) === "fill") {
+    safeHeight = Property.Dimension(height);
+  }
+  if ((width == null ? void 0 : width.mode) === "px" || (width == null ? void 0 : width.mode) === "fit" || (width == null ? void 0 : width.mode) === "fill") {
+    safeWidth = Property.Dimension(width);
+  }
+  if ((size2 == null ? void 0 : size2.mode) === "px") {
+    safeSize = Property.Dimension(size2);
+  }
+  return {
+    width: safeWidth,
+    height: safeHeight,
+    size: safeSize
+  };
+};
+const filterSafeGridDimensionProperties = (existingProps) => {
+  const { width, height, size: size2 } = existingProps;
+  const safeDimensions = {};
+  if ((height == null ? void 0 : height.mode) === "rows" || (height == null ? void 0 : height.mode) === "fit") {
+    safeDimensions.height = Property.Dimension(height);
+  }
+  if ((width == null ? void 0 : width.mode) === "columns") {
+    safeDimensions.width = Property.Dimension(width);
+  }
+  if ((size2 == null ? void 0 : size2.mode) === "columns") {
+    safeDimensions.size = Property.Dimension(size2);
+  }
+  return safeDimensions;
+};
+const defaultSizeForComponent = (componentType, isFreeform, draggedDimensions) => {
+  if (componentType === "SbIcon") {
+    return {};
+  }
+  const height = Property.Dimension(Dim.fit());
+  if (isFreeform) {
+    const guWidth = (draggedDimensions == null ? void 0 : draggedDimensions.widthGU) ?? 4;
+    return {
+      height,
+      width: Property.Dimension(Dim.col(guWidth))
+    };
+  }
+  switch (componentType) {
+    case "SbText":
+    case "SbButton":
+    case "SbCheckbox":
+    case "SbSwitch":
+      return { height, width: Property.Dimension(Dim.fit()) };
+    case "SbImage":
+      return {
+        height,
+        width: Property.Dimension(Dim.px((draggedDimensions == null ? void 0 : draggedDimensions.widthPx) ?? 288))
+        // Matches widget config response. This should never be undefined though.
+      };
+    default:
+      return { height, width: Property.Dimension(Dim.fill()) };
+  }
+};
+const getWidgetAnchorName = (instanceId) => {
+  return `--widget-${instanceId}`;
+};
+const getWidgetRectAnchorName = (instanceId) => {
+  return `--widget-rect-${instanceId}`;
+};
+const getWidgetDropAreaAnchorName = (instanceId, widgetType) => {
+  if (widgetType && DetachedComponentTypes.has(widgetType)) {
+    return `--widget-drop-area-${instanceId}`;
+  }
+  return `--widget-${instanceId}`;
+};
+const getEditWrapperId = (instanceId) => {
+  return `sb-edit-wrapper-${instanceId}`;
+};
+const getEditWrapperIdWithType = (instanceId, widgetType) => {
+  if (widgetType && DetachedComponentTypes.has(widgetType)) {
+    return `sb-edit-wrapper-for-${widgetType}-${instanceId}`;
+  }
+  return `sb-edit-wrapper-${instanceId}`;
+};
+const getBoundingBoxForWidget = (instanceId) => {
+  var _a2;
+  return (_a2 = getWidgetNode(instanceId)) == null ? void 0 : _a2.getBoundingClientRect();
+};
+const getFirstInstanceElement = (element) => {
+  let current = element;
+  while (current) {
+    const instanceId = current.getAttribute(WIDGET_INSTANCE_ID_ATTRIBUTE);
+    if (instanceId) {
+      return {
+        element: current,
+        instanceId
+      };
+    }
+    current = current.firstElementChild;
+  }
+  return null;
+};
+const getWidgetNode = (instanceId) => {
+  const widgetMeta = getEditStore().runtimeEntitiesManager.getEditorWidgetMeta(instanceId);
+  const sourceId = widgetMeta == null ? void 0 : widgetMeta.sourceId;
+  const type5 = widgetMeta == null ? void 0 : widgetMeta.type;
+  const editWrapperId = getEditWrapperIdWithType(instanceId, type5);
+  const wrapperElem = document.getElementById(editWrapperId);
+  return wrapperElem == null ? void 0 : wrapperElem.querySelector(
+    `[${WIDGET_SOURCE_ID_ATTRIBUTE}="${sourceId}"]`
+  );
+};
+const getIsComponentInInteractionLayer = (instanceId) => {
+  const editStore2 = getEditStore();
+  const activeRootInstanceId = editStore2.interactionLayerManager.activeRootInstanceId;
+  const isDropTargetInInteractionLayer = (
+    // if active root id is undefined, we are in the page and can drop anywhere
+    !activeRootInstanceId || instanceId && (instanceId === activeRootInstanceId || editStore2.runtimeEntitiesManager.isChildOf(
+      instanceId,
+      activeRootInstanceId
+    ))
+  );
+  return isDropTargetInInteractionLayer;
+};
+_setActiveRootInstanceId_dec = [action], _setSourceIdElement_dec = [action], _removeSourceIdElement_dec = [action];
+class InteractionLayerManager {
+  constructor() {
+    __runInitializers(_init3, 5, this);
+    /**
+     * The id of the root element that is currently being interacted with
+     * the root can be SbPage, SbModal or SbSlideout
+     * If set to undefined, the interaction layer will be the SbPage
+     * if set to the detached component id, the inteactoin layer will be disabled on the page
+     */
+    __publicField(this, "activeRootInstanceId");
+    __publicField(this, "sourceIdElements", /* @__PURE__ */ new Map());
+    makeAutoObservable(this);
+  }
+  setActiveRootInstanceId(rootInstanceId) {
+    this.activeRootInstanceId = rootInstanceId;
+  }
+  setSourceIdElement(el2, sourceId) {
+    const { element, instanceId } = getFirstInstanceElement(el2) ?? {};
+    if (!element || !instanceId) {
+      return;
+    }
+    this.sourceIdElements.set(instanceId, { sourceId, element });
+    return instanceId;
+  }
+  removeSourceIdElement(instanceId) {
+    this.sourceIdElements.delete(instanceId);
+  }
+  getSourceIdElements(sourceId) {
+    const elements = [];
+    for (const [instanceId, info] of this.sourceIdElements.entries()) {
+      if (info.sourceId === sourceId) {
+        elements.push({
+          element: info.element,
+          instanceId
+        });
+      }
+    }
+    return elements;
+  }
+}
+_init3 = __decoratorStart(null);
+__decorateElement(_init3, 1, "setActiveRootInstanceId", _setActiveRootInstanceId_dec, InteractionLayerManager);
+__decorateElement(_init3, 1, "setSourceIdElement", _setSourceIdElement_dec, InteractionLayerManager);
+__decorateElement(_init3, 1, "removeSourceIdElement", _removeSourceIdElement_dec, InteractionLayerManager);
+__decoratorMetadata(_init3, InteractionLayerManager);
 const generateId = () => {
   return Math.random().toString(36).substring(2, 15);
 };
@@ -87919,160 +88073,6 @@ _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",
-  "SbModal",
-  "SbSlideout"
-]);
-const VStackLikeContainerTypes = /* @__PURE__ */ new Set(["SbPage"]);
-const HStackLikeContainerTypes = /* @__PURE__ */ new Set(["SbSection"]);
-const StackLikeContainerTypes = /* @__PURE__ */ new Set([
-  ...VStackLikeContainerTypes,
-  ...HStackLikeContainerTypes
-]);
-const detachedComponentTypeList = ["SbModal", "SbSlideout"];
-const DetachedComponentTypes = new Set(
-  detachedComponentTypeList
-);
-function rule(description, restriction) {
-  return {
-    description,
-    restriction
-  };
-}
-const restrictions = [
-  rule(
-    "Draggable type must be draggable",
-    ({ draggedType }) => !isTypeDraggable(draggedType)
-  ),
-  rule(
-    "Drop target type must be droppable",
-    ({ dropTargetType }) => !isTypeDroppable(dropTargetType)
-  ),
-  rule(
-    "Columns can only be dropped on sections",
-    ({ draggedType, dropTargetType }) => {
-      return draggedType === "SbColumn" && dropTargetType !== "SbSection";
-    }
-  ),
-  rule(
-    "Sections can only be dropped on pages",
-    ({ draggedType, dropTargetType }) => {
-      return draggedType === "SbSection" && dropTargetType !== "SbPage";
-    }
-  ),
-  rule(
-    "Only sections can be dropped on non-empty pages",
-    ({ draggedType, dropTargetType, dropTargetEmpty }) => {
-      return draggedType !== "SbSection" && dropTargetType === "SbPage" && !dropTargetEmpty;
-    }
-  ),
-  rule(
-    "Only columns can be dropped on non-empty sections",
-    ({ draggedType, dropTargetType, dropTargetEmpty }) => {
-      return draggedType !== "SbColumn" && dropTargetType === "SbSection" && !dropTargetEmpty;
-    }
-  )
-];
-const isDragAndDropTypeValid = ({
-  draggedType,
-  dropTargetType,
-  dropTargetEmpty,
-  isDraggingNewComponent
-}) => {
-  const actualDraggedType = isDraggingNewComponent && (draggedType === "SbModal" || draggedType === "SbSlideout") ? "SbButton" : draggedType;
-  const triggeredRestriction = restrictions.find(
-    (restriction) => restriction.restriction({
-      draggedType: actualDraggedType,
-      dropTargetType,
-      dropTargetEmpty,
-      isDraggingNewComponent
-    })
-  );
-  return triggeredRestriction == null;
-};
-const isTypeDroppable = (type5) => {
-  const component = rootStore.componentRegistry.getComponent(type5);
-  if (component && component.isDroppable === true) {
-    return true;
-  }
-  return false;
-};
-const isTypeDraggable = (type5) => {
-  return type5 !== "SbPage" && type5 !== "SbSlideout" && type5 !== "SbModal";
-};
-const isContentDraggable = (type5) => {
-  return isTypeDraggable(type5) && type5 !== "SbColumn" && type5 !== "SbSection";
-};
-function shouldWrapInSectionAndColumn(type5, parentType) {
-  if (DetachedComponentTypes.has(type5)) {
-    return false;
-  }
-  return parentType === "SbPage" && type5 !== "SbSection" || parentType === "SbSection" && type5 !== "SbColumn";
-}
-const filterSafeStackDimensionProperties = (existingProps) => {
-  const { width, height, size: size2 } = existingProps;
-  let safeHeight;
-  let safeWidth;
-  let safeSize;
-  if ((height == null ? void 0 : height.mode) === "px" || (height == null ? void 0 : height.mode) === "fit" || (height == null ? void 0 : height.mode) === "fill") {
-    safeHeight = Property.Dimension(height);
-  }
-  if ((width == null ? void 0 : width.mode) === "px" || (width == null ? void 0 : width.mode) === "fit" || (width == null ? void 0 : width.mode) === "fill") {
-    safeWidth = Property.Dimension(width);
-  }
-  if ((size2 == null ? void 0 : size2.mode) === "px") {
-    safeSize = Property.Dimension(size2);
-  }
-  return {
-    width: safeWidth,
-    height: safeHeight,
-    size: safeSize
-  };
-};
-const filterSafeGridDimensionProperties = (existingProps) => {
-  const { width, height, size: size2 } = existingProps;
-  const safeDimensions = {};
-  if ((height == null ? void 0 : height.mode) === "rows" || (height == null ? void 0 : height.mode) === "fit") {
-    safeDimensions.height = Property.Dimension(height);
-  }
-  if ((width == null ? void 0 : width.mode) === "columns") {
-    safeDimensions.width = Property.Dimension(width);
-  }
-  if ((size2 == null ? void 0 : size2.mode) === "columns") {
-    safeDimensions.size = Property.Dimension(size2);
-  }
-  return safeDimensions;
-};
-const defaultSizeForComponent = (componentType, isFreeform, draggedDimensions) => {
-  if (componentType === "SbIcon") {
-    return {};
-  }
-  const height = Property.Dimension(Dim.fit());
-  if (isFreeform) {
-    const guWidth = (draggedDimensions == null ? void 0 : draggedDimensions.widthGU) ?? 4;
-    return {
-      height,
-      width: Property.Dimension(Dim.col(guWidth))
-    };
-  }
-  switch (componentType) {
-    case "SbText":
-    case "SbButton":
-    case "SbCheckbox":
-    case "SbSwitch":
-      return { height, width: Property.Dimension(Dim.fit()) };
-    case "SbImage":
-      return {
-        height,
-        width: Property.Dimension(Dim.px((draggedDimensions == null ? void 0 : draggedDimensions.widthPx) ?? 288))
-        // Matches widget config response. This should never be undefined though.
-      };
-    default:
-      return { height, width: Property.Dimension(Dim.fill()) };
-  }
-};
 const isWidgetGrid = (widget) => {
   var _a2;
   if (!widget) {
@@ -91318,14 +91318,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-DWutM7hr.js"
+            "./allPathsLoader-DW8drVZx.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BDi1wIry.js"
+            "./splitPathsBySizeLoader-CBpRm4CP.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -116461,6 +116461,7 @@ const Collisions = observer(
         GridDots,
         {
           parentInstanceId,
+          parentType: parentMeta == null ? void 0 : parentMeta.type,
           tileWidth,
           tileHeight,
           targetPadding
@@ -116516,7 +116517,13 @@ const DotsPattern = qe$1.div`
 const GridDots = observer(
   (props2) => {
     var _a2, _b2, _c2, _d2;
-    const { parentInstanceId, tileWidth, tileHeight, targetPadding } = props2;
+    const {
+      parentInstanceId,
+      parentType,
+      tileWidth,
+      tileHeight,
+      targetPadding
+    } = props2;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -116527,7 +116534,11 @@ const GridDots = observer(
           left: "anchor(left)",
           right: "anchor(right)",
           bottom: "anchor(bottom)",
-          positionAnchor: getWidgetAnchorName(parentInstanceId),
+          // do not use getWidgetAnchorName, for detached widget, interaction layer will be child of anchored element, anchor will not work. Drop area is at same level of interaction layer, so it works.
+          positionAnchor: getWidgetDropAreaAnchorName(
+            parentInstanceId,
+            parentType
+          ),
           width: "unset",
           height: "unset",
           ...targetPadding && {
@@ -138204,20 +138215,26 @@ const Overlay = qe$1.div`
     background-color: transparent;
   }
 
+  &[data-has-opened="false"] {
+    animation: none !important;
+    opacity: 0 !important;
+  }
+
   &[data-state="open"] {
-    animation: ${fadeIn} 0.3s ease-in-out;
+    animation: ${fadeIn} 0.3s ease-in-out forwards;
   }
 
   &[data-state="closed"] {
-    animation: ${fadeOut} 0.3s ease-in-out;
+    animation: ${fadeOut} 0.3s ease-in-out forwards;
   }
 `;
-const SlideoutOverlay = React__default.forwardRef(({ hasBackdrop, isOpen }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+const SlideoutOverlay = React__default.forwardRef(({ hasBackdrop, isOpen, hasOpened }, ref2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   Overlay,
   {
     ref: ref2,
     "data-has-backdrop": hasBackdrop,
-    "data-state": isOpen ? "open" : "closed"
+    "data-state": isOpen ? "open" : "closed",
+    "data-has-opened": hasOpened ? "true" : "false"
   }
 ));
 SlideoutOverlay.displayName = "SlideoutOverlay";
@@ -138228,17 +138245,24 @@ const StyledDialogContent = qe$1(Content)`
   height: 100%;
   padding: 0;
   z-index: ${Layers$1.dialog};
-  box-shadow:
-    0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08),
-    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  &[data-state="open"] {
+    box-shadow:
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  }
+
+  &[data-has-opened="false"] {
+    animation: none !important;
+    transform: translateX(100%) !important;
+  }
 
   &[data-state="open"] {
-    animation: ${slideIn} 0.3s ease-in-out;
+    animation: ${slideIn} 0.3s ease-in-out forwards;
   }
 
   &[data-state="closed"] {
-    animation: ${slideOut} 0.3s ease-in-out;
+    animation: ${slideOut} 0.3s ease-in-out forwards;
   }
 `;
 const getParent2 = () => {
@@ -138361,17 +138385,24 @@ const SlideoutComponent = (props2) => {
     },
     [closeOnClickOutside, onClose2]
   );
+  const hasOpenedRef = React__default.useRef(false);
+  React__default.useEffect(() => {
+    if (props2.isOpen) {
+      hasOpenedRef.current = true;
+    }
+  }, [props2.isOpen]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Root$1,
     {
       open: props2.isOpen,
       modal: !props2.isEditing,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Portal$1, { container: getParent2(), children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { container: getParent2(), forceMount: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { pointerEvents: props2.isOpen ? "auto" : "none" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           SlideoutOverlay,
           {
             hasBackdrop: props2.hasBackdrop,
-            isOpen: props2.isOpen
+            isOpen: props2.isOpen,
+            hasOpened: hasOpenedRef.current
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -138384,6 +138415,7 @@ const SlideoutComponent = (props2) => {
             "data-test": "slideout-component",
             id: `slideout-component-${props2.name}`,
             "data-superblocks": `slideout-component-${props2.name}`,
+            "data-has-opened": hasOpenedRef.current ? "true" : "false",
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                 CloseButton,
@@ -138419,7 +138451,7 @@ const SlideoutComponent = (props2) => {
             ]
           }
         )
-      ] })
+      ] }) })
     }
   );
 };
@@ -148370,14 +148402,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-CNN9R2Rh.js"
+            "./allPathsLoader-ShoJD-rd.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-XfZ-1ll3.js"
+            "./splitPathsBySizeLoader-CgkpRfe9.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -196856,8 +196888,16 @@ const fixCursorSnapOffset = (args) => {
       top: y4 - height / 2
     }
   };
+  const editStore2 = getEditStore();
   const collisions = rectIntersection(updated);
-  const sortedCollisions = collisions.map((collision) => {
+  const sortedCollisions = collisions.filter((collision) => {
+    const activeRootInstanceId = editStore2.interactionLayerManager.activeRootInstanceId;
+    if (!activeRootInstanceId) return true;
+    return collision.id === activeRootInstanceId || editStore2.runtimeEntitiesManager.isChildOf(
+      collision.id,
+      activeRootInstanceId
+    );
+  }).map((collision) => {
     var _a2, _b2;
     const rect = (_b2 = (_a2 = collision.data) == null ? void 0 : _a2.droppableContainer) == null ? void 0 : _b2.rect.current;
     const pointerInside = rect && x3 >= rect.left && x3 <= rect.right && y4 >= rect.top && y4 <= rect.bottom;
@@ -200178,4 +200218,4 @@ export {
   SbVariable as y,
   SbTimer as z
 };
-//# sourceMappingURL=index-CJ3tumTb.js.map
+//# sourceMappingURL=index-BLsacbxP.js.map