@superblocksteam/library 2.0.20 → 2.0.21-next.1

package/dist/{index-DoQuZXxx.js → index-DG9yo3A6.js}

@@ -96123,8 +96123,8 @@ class Prop {
   static event() {
     return new Prop("event");
   }
-  static children(config2) {
-    return new ChildrenProp(config2);
+  static children() {
+    return new ChildrenProp();
   }
   static function(implementation) {
     const prop = new Prop("function");
@@ -96193,10 +96193,6 @@ class Prop {
     this.prop.isExternallyReadable = true;
     return this;
   }
-  writable() {
-    this.prop.isExternallySettable = true;
-    return this;
-  }
   readAndWrite() {
     this.prop.isExternallyReadable = true;
     this.prop.isExternallySettable = true;
@@ -96441,16 +96437,9 @@ class RecordProp extends Prop {
   }
 }
 class ChildrenProp extends Prop {
-  constructor(config2) {
+  constructor() {
     super("children");
     __publicField(this, "typeString", "children");
-    __publicField(this, "allowedChildren");
-    this.allowedChildren = config2 == null ? void 0 : config2.allowedChildren;
-  }
-  getConfig() {
-    return {
-      allowedChildren: this.allowedChildren
-    };
   }
 }
 class UnionProp extends Prop {
@@ -96857,7 +96846,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-3ekbDKtc.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-D6jwOSvF.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -96870,7 +96859,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-3ekbDKtc.js").then((module2) => ({
+  return import("./devtools-consolidated-D6jwOSvF.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -97741,6 +97730,9 @@ class EntityManager {
     }
     const managedProp = this.componentRegistry.getManagedProps(entityType).find((p) => p.path === finalProp);
     const getValue2 = computed$1(() => {
+      if ((managedProp == null ? void 0 : managedProp.isExternallyReadable) === false) {
+        return;
+      }
       let ret = null;
       try {
         const metaParent = getMetaParent();
@@ -97801,6 +97793,12 @@ class EntityManager {
       return ret;
     });
     const setValue = (value) => {
+      if ((managedProp == null ? void 0 : managedProp.isExternallySettable) === false) {
+        console.warn(
+          `The property "${finalSegment}" on entity "${name.value}" is not settable, it will be ignored.`
+        );
+        return;
+      }
       const metaParent = getMetaParent();
       metaParent[finalSegment] = value;
     };
@@ -99517,150 +99515,13 @@ const rootStore$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   __proto__: null,
   default: rootStore
 }, Symbol.toStringTag, { value: "Module" }));
-const detachedComponentTypeList = ["Modal", "Slideout"];
-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 === "Column" && dropTargetType !== "Section";
-    }
-  ),
-  rule(
-    "Sections can only be dropped on pages",
-    ({ draggedType, dropTargetType }) => {
-      return draggedType === "Section" && dropTargetType !== "Page";
-    }
-  ),
-  rule(
-    "Only sections can be dropped on non-empty pages",
-    ({ draggedType, dropTargetType, dropTargetEmpty }) => {
-      return draggedType !== "Section" && dropTargetType === "Page" && !dropTargetEmpty;
-    }
-  ),
-  rule(
-    "Only columns can be dropped on non-empty sections",
-    ({ draggedType, dropTargetType, dropTargetEmpty }) => {
-      return draggedType !== "Column" && dropTargetType === "Section" && !dropTargetEmpty;
-    }
-  )
-];
-const isDragAndDropTypeValid = ({
-  draggedType,
-  dropTargetType,
-  dropTargetEmpty,
-  isDraggingNewComponent
-}) => {
-  const actualDraggedType = isDraggingNewComponent && (draggedType === "Modal" || draggedType === "Slideout") ? "Button" : draggedType;
-  const triggeredRestriction = restrictions.find(
-    (restriction) => restriction.restriction({
-      draggedType: actualDraggedType,
-      dropTargetType,
-      dropTargetEmpty,
-      isDraggingNewComponent
-    })
-  );
-  return triggeredRestriction == null;
-};
-const isTypeDroppable = (type5) => {
-  const editorConfig2 = rootStore.componentRegistry.getEditorConfig(type5);
-  return (editorConfig2 == null ? void 0 : editorConfig2.isDroppable) === true;
-};
-const isTypeDraggable = (type5) => {
-  const editorConfig2 = rootStore.componentRegistry.getEditorConfig(type5);
-  return (editorConfig2 == null ? void 0 : editorConfig2.isDraggable) !== false;
-};
-const isContentDraggable = (type5) => {
-  if (!isTypeDraggable(type5)) {
-    return false;
-  }
-  const editorConfig2 = rootStore.componentRegistry.getEditorConfig(type5);
-  return (editorConfig2 == null ? void 0 : editorConfig2.isContentDraggable) !== false;
-};
-function shouldWrapInSectionAndColumn(type5, parentType) {
-  if (DetachedComponentTypes.has(type5)) {
+function isComponentTypeDetached(componentType) {
+  if (!componentType) {
     return false;
   }
-  return parentType === "Page" && type5 !== "Section" || parentType === "Section" && type5 !== "Column";
+  const editorConfig2 = rootStore.componentRegistry.getEditorConfig(componentType);
+  return (editorConfig2 == null ? void 0 : editorConfig2.isDetached) ?? false;
 }
-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 === "Icon") {
-    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 "Text":
-    case "Button":
-    case "Checkbox":
-    case "Switch":
-      return { height, width: Property.Dimension(Dim.fit()) };
-    case "Image":
-      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}`;
 };
@@ -99668,7 +99529,7 @@ const getWidgetRectAnchorName = (instanceId) => {
   return `--widget-rect-${instanceId}`;
 };
 const getWidgetDropAreaAnchorName = (instanceId, widgetType) => {
-  if (widgetType && DetachedComponentTypes.has(widgetType)) {
+  if (widgetType && isComponentTypeDetached(widgetType)) {
     return `--widget-drop-area-${instanceId}`;
   }
   return `--widget-${instanceId}`;
@@ -99677,7 +99538,7 @@ const getEditWrapperId = (instanceId) => {
   return `sb-edit-wrapper-${instanceId}`;
 };
 const getEditWrapperIdWithType = (instanceId, widgetType) => {
-  if (widgetType && DetachedComponentTypes.has(widgetType)) {
+  if (widgetType && isComponentTypeDetached(widgetType)) {
     return `sb-edit-wrapper-for-${widgetType}-${instanceId}`;
   }
   return `sb-edit-wrapper-${instanceId}`;
@@ -104636,14 +104497,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-CM3qFtpk.js"
+            "./allPathsLoader-DzIN8FMY.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-CJaleIID.js"
+            "./splitPathsBySizeLoader-N6g9hlGC.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -129675,6 +129536,177 @@ function useComponentDroppable({
     }
   });
 }
+const ALLOWED_CHILDREN_COMPONENT_TYPES = {
+  Page: ["Section"],
+  Section: ["Column"]
+};
+const RESTRICT_PARENT_TYPES = {
+  Page: [],
+  Section: ["Page"],
+  Column: ["Section", "Page"]
+};
+const getAllowedChildrenComponentTypes = (componentType) => {
+  return ALLOWED_CHILDREN_COMPONENT_TYPES[componentType];
+};
+function isNestable(componentType, parentType) {
+  var _a2;
+  if (parentType && RESTRICT_PARENT_TYPES[componentType] && !((_a2 = RESTRICT_PARENT_TYPES[componentType]) == null ? void 0 : _a2.includes(parentType))) {
+    return false;
+  }
+  return true;
+}
+const detachedComponentTypeList = ["Modal", "Slideout"];
+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 === "Column" && dropTargetType !== "Section";
+    }
+  ),
+  rule(
+    "Sections can only be dropped on pages",
+    ({ draggedType, dropTargetType }) => {
+      return draggedType === "Section" && dropTargetType !== "Page";
+    }
+  ),
+  rule(
+    "Only sections can be dropped on non-empty pages",
+    ({ draggedType, dropTargetType, dropTargetEmpty }) => {
+      return draggedType !== "Section" && dropTargetType === "Page" && !dropTargetEmpty;
+    }
+  ),
+  rule(
+    "Only columns can be dropped on non-empty sections",
+    ({ draggedType, dropTargetType, dropTargetEmpty }) => {
+      return draggedType !== "Column" && dropTargetType === "Section" && !dropTargetEmpty;
+    }
+  )
+];
+const isDragAndDropTypeValid = ({
+  draggedType,
+  dropTargetType,
+  dropTargetEmpty,
+  isDraggingNewComponent
+}) => {
+  const actualDraggedType = isDraggingNewComponent && (draggedType === "Modal" || draggedType === "Slideout") ? "Button" : draggedType;
+  const triggeredRestriction = restrictions.find(
+    (restriction) => restriction.restriction({
+      draggedType: actualDraggedType,
+      dropTargetType,
+      dropTargetEmpty,
+      isDraggingNewComponent
+    })
+  );
+  return triggeredRestriction == null;
+};
+const isTypeDroppable = (type5) => {
+  const editorConfig2 = rootStore.componentRegistry.getEditorConfig(type5);
+  return (editorConfig2 == null ? void 0 : editorConfig2.isDroppable) === true;
+};
+const isTypeDraggable = (type5) => {
+  const editorConfig2 = rootStore.componentRegistry.getEditorConfig(type5);
+  return (editorConfig2 == null ? void 0 : editorConfig2.isDraggable) !== false;
+};
+const isContentDraggable = (type5) => {
+  if (!isTypeDraggable(type5)) {
+    return false;
+  }
+  const editorConfig2 = rootStore.componentRegistry.getEditorConfig(type5);
+  return (editorConfig2 == null ? void 0 : editorConfig2.isContentDraggable) !== false;
+};
+function shouldWrapComponent(type5, parentType) {
+  if (isComponentTypeDetached(type5)) {
+    return [false];
+  }
+  if (!parentType) {
+    return [false];
+  }
+  const allowedChildren = getAllowedChildrenComponentTypes(parentType);
+  if (allowedChildren === void 0 || allowedChildren.includes(type5)) {
+    return [false];
+  } else {
+    return [true, allowedChildren == null ? void 0 : allowedChildren[0]];
+  }
+}
+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 === "Icon") {
+    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 "Text":
+    case "Button":
+    case "Checkbox":
+    case "Switch":
+      return { height, width: Property.Dimension(Dim.fit()) };
+    case "Image":
+      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 DroppableWidget = observer(
   (props2) => {
     var _a2;
@@ -130067,15 +130099,6 @@ function getComponentBaseProperties(componentType, parentInfo, editorTemplateCre
     children: (editorTemplateCreateRequest == null ? void 0 : editorTemplateCreateRequest.children) ?? []
   };
 }
-function checkComponentForParentTypeBeforeCreating(componentType, parentType) {
-  if (componentType === "Section" && parentType !== "Page") {
-    return false;
-  }
-  if (componentType === "Column" && parentType !== "Section" && parentType !== "Page") {
-    return false;
-  }
-  return true;
-}
 function getCreateAtParentElement(relativeParent, createAt) {
   if (createAt === "root") {
     const parentInstanceId = getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(
@@ -130106,10 +130129,8 @@ async function createComponent({
 }) {
   var _a2, _b2;
   const parentInfo = getParentInfo(parent);
-  if (!checkComponentForParentTypeBeforeCreating(componentType, parentInfo.type)) {
-    console.error(
-      `${componentType} cannot be added to ${parentInfo.type} directly`
-    );
+  if (!isNestable(componentType, parentInfo.type)) {
+    console.error(`${componentType} cannot be nested under ${parentInfo.type}`);
     return;
   }
   const editorTemplates = rootStore.componentRegistry.getEditorTemplates(componentType);
@@ -130140,11 +130161,8 @@ async function createComponent({
     baseProperties: baseProperties2
   }) {
     const type5 = (editorTemplateCreateRequest2 == null ? void 0 : editorTemplateCreateRequest2.type) ?? componentType;
-    const willWrapInSectionAndColumn = shouldWrapInSectionAndColumn(
-      type5,
-      parentInfo.type
-    );
-    const isGridLike = willWrapInSectionAndColumn && type5 !== "Column" ? true : parentInfo.isGridLike;
+    const [shouldWrap, wrapInType] = shouldWrapComponent(type5, parentInfo.type);
+    const isGridLike = shouldWrap && type5 !== "Column" ? true : parentInfo.isGridLike;
     const { properties: propertiesFromType, children } = getComponentBaseProperties(
       type5,
       {
@@ -130169,11 +130187,8 @@ async function createComponent({
       scopeName,
       id: editStore2.operationManager.generateSourceId()
     };
-    if (willWrapInSectionAndColumn) {
-      primaryComponent = wrapInSectionColumnIfDroppingOnPage(
-        primaryComponent,
-        parentInfo.type
-      );
+    if (shouldWrap) {
+      primaryComponent = wrapComponentIfNecessary(primaryComponent, wrapInType);
     }
     return primaryComponent;
   }
@@ -130213,54 +130228,25 @@ async function createComponent({
   }
   return createRequests.at(-1).id;
 }
-function wrapInSectionColumnIfDroppingOnPage(primaryComponent, parentType) {
-  const { properties: sectionProperties } = getComponentBaseProperties(
-    "Section",
-    {
-      isGridLike: false
-      // parent is a page
-    }
-  );
-  if (primaryComponent.tagName === "Column") {
-    return {
-      parentElement: primaryComponent.parentElement,
-      tagName: "Section",
-      id: getEditStore().operationManager.generateSourceId(),
-      properties: sectionProperties,
-      children: [primaryComponent]
-    };
+function wrapComponentIfNecessary(primaryComponent, wrapInType) {
+  if (!wrapInType) {
+    return primaryComponent;
   }
-  const { properties: columnProperties } = getComponentBaseProperties(
-    "Column",
-    {
-      isGridLike: false
-      // parent is section
-    }
+  const { properties: properties2 } = getComponentBaseProperties(wrapInType, {
+    isGridLike: false
+    // parent is a page (TODO: it was hardcoded, make it dynamic?)
+  });
+  const [_15, continueWrappingInType] = shouldWrapComponent(
+    primaryComponent.tagName,
+    wrapInType
   );
-  if (parentType === "Section") {
-    return {
-      parentElement: primaryComponent.parentElement,
-      tagName: "Column",
-      id: getEditStore().operationManager.generateSourceId(),
-      properties: columnProperties,
-      children: [primaryComponent]
-    };
-  }
   return {
     parentElement: primaryComponent.parentElement,
-    tagName: "Section",
+    tagName: wrapInType,
     id: getEditStore().operationManager.generateSourceId(),
-    properties: sectionProperties,
+    properties: properties2,
     children: [
-      {
-        tagName: "Column",
-        id: getEditStore().operationManager.generateSourceId(),
-        properties: {
-          ...columnProperties,
-          layout: Property.Static("vertical")
-        },
-        children: [primaryComponent]
-      }
+      wrapComponentIfNecessary(primaryComponent, continueWrappingInType)
     ]
   };
 }
@@ -130403,7 +130389,7 @@ const handleStackDropWithinCanvas = (params) => {
   if (!draggedType) {
     throw new Error(`Missing dragged type: ${draggedId}`);
   }
-  const shouldWrap = shouldWrapInSectionAndColumn(draggedType, dropTargetType);
+  const [shouldWrap] = shouldWrapComponent(draggedType, dropTargetType);
   const activeDragRect = editStore2.ui.dnd.activeDragRect;
   if (shouldWrap) {
     dropComponentInWrappingSectionOrColumn({
@@ -131644,10 +131630,6 @@ function useWidgetHover(rootType) {
     };
   }, [rootType]);
 }
-const DETACHED_COMPONENT_TYPES = [
-  "Modal",
-  "Slideout"
-];
 const InteractionLayer = observer(
   (props2) => {
     useWidgetHover(props2.rootType);
@@ -131680,9 +131662,7 @@ const InteractionLayer = observer(
     if (!isActive2) {
       return null;
     }
-    const interactionRectsForSelectedElements = selectedElements.filter(
-      (info) => !DETACHED_COMPONENT_TYPES.includes(info.type)
-    ).map((info) => {
+    const interactionRectsForSelectedElements = selectedElements.filter((info) => !isComponentTypeDetached(info.type)).map((info) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         InteractionRect,
         {
@@ -131692,7 +131672,9 @@ const InteractionLayer = observer(
         info.sourceId
       );
     });
-    const interactionRectIfDetachedComponent = DETACHED_COMPONENT_TYPES.includes(props2.rootType) && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    const interactionRectIfDetachedComponent = isComponentTypeDetached(
+      props2.rootType
+    ) && /* @__PURE__ */ jsxRuntimeExports.jsx(
       InteractionRect,
       {
         isDragging: false,
@@ -132192,9 +132174,11 @@ function useTrackRuntimeWidget(instanceId, params) {
     stableEffectOptions
   );
 }
-const registerComponent$1 = (type5, config2, Component3) => {
+const registerComponentInternal = (type5, config2, Component3) => {
   const managedProps = createManagedPropsList(config2.propertiesDefinition);
-  const isDroppable = !!managedProps.find((p) => p.dataType === "children");
+  const isDroppable = !!managedProps.find(
+    (p) => p.dataType === "children"
+  );
   rootStore.onEditorRegistered(() => {
     getEditStore().propertiesPanelManager.setPropertiesDefinition(
       type5,
@@ -132988,7 +132972,7 @@ const propertiesDefinition$i = {
     })
   })
 };
-const Button$3 = registerComponent$1(
+const Button$3 = registerComponentInternal(
   "Button",
   {
     propertiesDefinition: propertiesDefinition$i,
@@ -133540,7 +133524,7 @@ const propertiesDefinition$h = {
     loading: loading()
   })
 };
-const Section2 = registerComponent$1(
+const Section2 = registerComponentInternal(
   "Section",
   {
     propertiesDefinition: propertiesDefinition$h
@@ -134057,7 +134041,7 @@ const InternalContainer = (props2) => {
     }
   );
 };
-const Container = registerComponent$1(
+const Container = registerComponentInternal(
   "Container",
   {
     propertiesDefinition: propertiesDefinition$g
@@ -134109,7 +134093,7 @@ const propertiesDefinition$f = {
 };
 const CONTAINER_MIN_WIDTH = Dim.px(0);
 const CONTAINER_FILL_DIM = Dim.fill();
-const Column = registerComponent$1(
+const Column = registerComponentInternal(
   "Column",
   {
     propertiesDefinition: propertiesDefinition$f
@@ -141688,8 +141672,8 @@ const propertiesDefinition$e = {
     }).docs({ description: "Triggers an action on input blur" })
   }),
   meta: Section$1.category(PropsPanelCategory.Meta).children({
-    text: Prop.any().readable().validate(VALIDATORS.TEXT_ALLOW_UNDEFINED).docs({ description: "The current text content of the input field" }),
-    isTouched: Prop.boolean().readable().default(false).docs({
+    text: Prop.any().readAndWrite().validate(VALIDATORS.TEXT_ALLOW_UNDEFINED).docs({ description: "The current text content of the input field" }),
+    isTouched: Prop.boolean().readAndWrite().default(false).docs({
       description: "Whether the input has been interacted with by the user"
     })
   }),
@@ -141711,7 +141695,7 @@ const propertiesDefinition$e = {
     })
   })
 };
-const Input2 = registerComponent$1(
+const Input2 = registerComponentInternal(
   "Input",
   {
     propertiesDefinition: propertiesDefinition$e
@@ -141878,9 +141862,7 @@ const editorConfig$a = {
 };
 const propertiesDefinition$d = {
   contents: Section$1.category(PropsPanelCategory.Content).children({
-    children: Prop.children({
-      allowedChildren: ["Section"]
-    }),
+    children: Prop.children(),
     columns: Prop.array().readAndWrite().propertiesPanel({
       label: "Sections",
       controlType: "SECTION_LIST",
@@ -141911,7 +141893,7 @@ const propertiesDefinition$d = {
     })
   })
 };
-const Page = registerComponent$1(
+const Page = registerComponentInternal(
   "Page",
   {
     propertiesDefinition: propertiesDefinition$d
@@ -148898,7 +148880,7 @@ const useIconContainerStyles = ({
     };
   }, [iconGap, horizontalAlign]);
 };
-const Text$1 = registerComponent$1(
+const Text$1 = registerComponentInternal(
   "Text",
   {
     propertiesDefinition: propertiesDefinition$c
@@ -149419,10 +149401,10 @@ const propertiesDefinition$b = {
   }),
   // non-configurable properties
   meta: Section$1.category(PropsPanelCategory.Meta).children({
-    isOpen: Prop.boolean().readable().default(false).docs({ description: "Whether the modal is currently open and visible" })
+    isOpen: Prop.boolean().readAndWrite().default(false).docs({ description: "Whether the modal is currently open and visible" })
   })
 };
-const Modal = registerComponent$1(
+const Modal = registerComponentInternal(
   "Modal",
   {
     propertiesDefinition: propertiesDefinition$b
@@ -149680,7 +149662,7 @@ const propertiesDefinition$a = {
   }),
   // non-configurable properties
   meta: Section$1.category(PropsPanelCategory.Meta).children({
-    isOpen: Prop.boolean().readable().default(false).docs({
+    isOpen: Prop.boolean().readAndWrite().default(false).docs({
       description: "Whether the slideout is currently open and visible"
     })
   })
@@ -151865,7 +151847,7 @@ const SlideoutComponent = (props2) => {
     }
   );
 };
-const Slideout = registerComponent$1(
+const Slideout = registerComponentInternal(
   "Slideout",
   {
     propertiesDefinition: propertiesDefinition$a
@@ -162009,14 +161991,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-CbhZCOLq.js"
+            "./allPathsLoader-CUezeXdO.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BbneuAAM.js"
+            "./splitPathsBySizeLoader-D3yKiTLq.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -178119,7 +178101,7 @@ const propertiesDefinition$9 = {
           }
         };
       }
-    }).readable().propertiesPanel({
+    }).readAndWrite().propertiesPanel({
       label: "Data",
       placeholder: '[{ "col1": "val1" }]',
       isJSConvertible: false,
@@ -178492,7 +178474,7 @@ const propertiesDefinition$9 = {
     searchText: Prop.string().readable().default(function() {
       return this.defaultSearchText ?? "";
     }).docs({ description: "The current search text applied to the table" }),
-    filters: Prop.any().readable().default(function() {
+    filters: Prop.any().readAndWrite().default(function() {
       return this.defaultFilters;
     }).docs({ description: "The current filters applied to the table" }),
     hiddenColumns: Prop.any().readable().docs({
@@ -193451,7 +193433,7 @@ const EMPTY_ARRAY = [];
 const EMPTY_OBJ = {};
 const noop = () => {
 };
-const Table = registerComponent$1(
+const Table = registerComponentInternal(
   "Table",
   {
     propertiesDefinition: propertiesDefinition$9
@@ -197376,7 +197358,7 @@ const propertiesDefinition$8 = {
     }).docs({
       description: "The array of options available for selection in the dropdown"
     }),
-    defaultValue: Prop.string().propertiesPanel({
+    defaultValue: Prop.string().readAndWrite().propertiesPanel({
       label: "Default selected value",
       helpText: `Default selected value(s). Matches the "value" field from options. Can be an array when using multi-select`,
       placeholder: "Enter options",
@@ -197476,14 +197458,14 @@ const propertiesDefinition$8 = {
     })
   }),
   meta: Section$1.category(PropsPanelCategory.Meta).children({
-    metaSelectedOptionValue: Prop.any().default(function() {
+    metaSelectedOptionValue: Prop.any().readAndWrite().default(function() {
       return this.defaultValue;
     }),
-    metaSelectedOptionValueArr: Prop.any().default(function() {
+    metaSelectedOptionValueArr: Prop.any().readAndWrite().default(function() {
       return Array.isArray(this.defaultValue) ? this.defaultValue : [this.defaultValue];
     }),
-    isTouched: Prop.boolean().default(false),
-    searchText: Prop.string()
+    isTouched: Prop.boolean().readAndWrite().default(false),
+    searchText: Prop.string().readAndWrite()
   }),
   derived: Section$1.category(PropsPanelCategory.Derived).children({
     value: Prop.any().readable().default(function() {
@@ -197696,7 +197678,7 @@ const DropdownStyleOverrides = qe$1.div`
     ${(props2) => props2.$vertical ? labelStyle.vertical : labelStyle.horizontal}
   }
 `;
-const Dropdown = registerComponent$1(
+const Dropdown = registerComponentInternal(
   "Dropdown",
   {
     propertiesDefinition: propertiesDefinition$8
@@ -197937,7 +197919,7 @@ const Dropdown = registerComponent$1(
     ) }) });
   }
 ).editorConfig(editorConfig$5).addEditorTemplate(editorTemplate$5);
-const CustomComponent = registerComponent$1(
+const CustomComponent = registerComponentInternal(
   "CustomComponent",
   {
     propertiesDefinition: {}
@@ -198015,7 +197997,7 @@ function registerComponent(name, propertiesDefinition2, component) {
   } else {
     allSections = propertiesDefinition2;
   }
-  return registerComponent$1(
+  return registerComponentInternal(
     name,
     {
       propertiesDefinition: allSections,
@@ -198187,8 +198169,8 @@ const propertiesDefinition$7 = {
   }),
   // non-configurable properties
   meta: Section$1.category(PropsPanelCategory.Meta).children({
-    isTouched: Prop.boolean().default(false),
-    isChecked: Prop.boolean().readable().default(function() {
+    isTouched: Prop.boolean().readAndWrite().default(false),
+    isChecked: Prop.boolean().readAndWrite().default(function() {
       return this.defaultChecked;
     }).docs({ description: "The current checked state of the checkbox" })
   }),
@@ -198228,7 +198210,7 @@ const CheckboxContainer = qe$1.div`
   flex-direction: column;
   align-items: flex-start;
 `;
-const Checkbox = registerComponent$1(
+const Checkbox = registerComponentInternal(
   "Checkbox",
   {
     propertiesDefinition: propertiesDefinition$7
@@ -198551,7 +198533,7 @@ const propertiesDefinition$6 = {
    * Also handles meta properties like isTouched & selectedDate
    */
   meta: Section$1.category(PropsPanelCategory.Meta).children({
-    selectedDate: Prop.string().readable().default(function() {
+    selectedDate: Prop.string().readAndWrite().default(function() {
       return this.defaultDate;
     }).docs({ description: "The currently selected date in the date picker" }),
     isTouched: Prop.boolean().default(false)
@@ -198620,7 +198602,7 @@ const DatePickerContainer = qe$1.div`
   align-items: flex-start;
   width: 100%;
 `;
-const DatePicker = registerComponent$1(
+const DatePicker = registerComponentInternal(
   "DatePicker",
   {
     propertiesDefinition: propertiesDefinition$6
@@ -198783,8 +198765,8 @@ const propertiesDefinition$5 = {
   }),
   // non-configurable properties
   meta: Section$1.category(PropsPanelCategory.Meta).children({
-    isTouched: Prop.boolean().default(false),
-    isChecked: Prop.boolean().readable().default(function() {
+    isTouched: Prop.boolean().readAndWrite().default(false),
+    isChecked: Prop.boolean().readAndWrite().default(function() {
       return this.defaultChecked;
     }).docs({ description: "The current checked state of the switch" })
   }),
@@ -198960,7 +198942,7 @@ const SwitchContainer = qe$1.div`
   flex-direction: column;
   align-items: flex-start;
 `;
-const Switch = registerComponent$1(
+const Switch = registerComponentInternal(
   "Switch",
   {
     propertiesDefinition: propertiesDefinition$5
@@ -199070,7 +199052,7 @@ const propertiesDefinition$4 = {
 const StyledContainer = qe$1.div`
   overflow: hidden;
 `;
-const Icon = registerComponent$1(
+const Icon = registerComponentInternal(
   "Icon",
   {
     propertiesDefinition: propertiesDefinition$4
@@ -199347,7 +199329,7 @@ const ImageContainer = qe$1.div`
   align-items: flex-start;
   overflow-y: hidden;
 `;
-const Image = registerComponent$1(
+const Image = registerComponentInternal(
   "Image",
   {
     propertiesDefinition: propertiesDefinition$3
@@ -200589,6 +200571,12 @@ const EmbedWrapper$2 = (props2) => {
             case "operations/editor:selectWidgets": {
               const sourceIds = action2.payload.sourceIds;
               getEditStore().ui.setSelectedSourceIds(sourceIds);
+              const instanceIds = sourceIds.map((sourceId) => {
+                return getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(
+                  sourceId
+                );
+              });
+              getEditStore().ui.setSelectedInstanceIds(instanceIds);
               break;
             }
             case "RUN_API": {
@@ -203158,4 +203146,4 @@ export {
   setQueryParams as y,
   download as z
 };
-//# sourceMappingURL=index-DoQuZXxx.js.map
+//# sourceMappingURL=index-DG9yo3A6.js.map