@superblocksteam/library 2.0.6-next.3 → 2.0.6-next.31

package/dist/{index-kjgG33Rg.js → index-CJnCDVsr.js}

@@ -6005,7 +6005,7 @@ const Property = {
   Expression: (value) => PropertyInfo(value, "EXPRESSION"),
   Event: (value) => PropertyInfo(value, "EVENT"),
   Dimension: (value) => PropertyInfo(value, "DIMENSION"),
-  Computed: (value, args) => PropertyInfo(value, "COMPUTED", Array.isArray(args) && args.length > 0 ? { args } : {}),
+  Computed: (value, args) => PropertyInfo(value, "COMPUTED", Array.isArray(args) && args.length > 0 || typeof args === "string" ? { args } : {}),
   Any: (value, type5 = "STATIC") => PropertyInfo(value, type5)
 };
 function isPropertyInfo(value) {
@@ -78418,7 +78418,7 @@ const ShowAlertTrigger = {
 const ResetStateVarTrigger = {
   type: TriggerStepType.RESET_STATE_VAR,
   async execute(context2, step) {
-    if (step.state === void 0) {
+    if (step.variable === void 0) {
       return;
     }
     context2.rootStore.entityManager.runCode({
@@ -78426,22 +78426,22 @@ const ResetStateVarTrigger = {
       name: context2.name,
       func: () => {
         var _a2;
-        return (_a2 = step.state) == null ? void 0 : _a2.set(step.state.defaultValue);
+        return (_a2 = step.variable) == null ? void 0 : _a2.set(step.variable.defaultValue);
       },
       args: []
     });
   },
-  create(stateVar) {
+  create(variable) {
     return {
       type: TriggerStepType.RESET_STATE_VAR,
-      state: stateVar
+      variable
     };
   }
 };
 const SetStateVarTrigger = {
   type: TriggerStepType.SET_STATE_VAR,
   async execute(context2, step) {
-    if (step.state === void 0) {
+    if (step.variable === void 0) {
       return;
     }
     const value = context2.rootStore.entityManager.computeValue({
@@ -78455,15 +78455,15 @@ const SetStateVarTrigger = {
       func: (state, value2) => {
         var _a2;
         if (!state) return;
-        (_a2 = step.state) == null ? void 0 : _a2.set(value2);
+        (_a2 = step.variable) == null ? void 0 : _a2.set(value2);
       },
       args: [value]
     });
   },
-  create(stateVar, value) {
+  create(variable, value) {
     return {
       type: TriggerStepType.SET_STATE_VAR,
-      state: stateVar,
+      variable,
       value
     };
   }
@@ -78471,12 +78471,14 @@ const SetStateVarTrigger = {
 const ControlTimerTrigger = {
   type: TriggerStepType.CONTROL_TIMER,
   async execute(_context, step) {
-    console.log("ControlTimerTrigger", step);
+    if (step.timer) {
+      step.timer[step.action]();
+    }
   },
-  create(timerId, action2) {
+  create(timer, action2) {
     return {
       type: TriggerStepType.CONTROL_TIMER,
-      timerId,
+      timer,
       action: action2
     };
   }
@@ -83504,7 +83506,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-B1B3uBW_.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-Bx5_5I-I.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -83517,7 +83519,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-B1B3uBW_.js").then((module2) => ({
+  return import("./devtools-consolidated-Bx5_5I-I.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -83874,11 +83876,11 @@ class SbEventFlow {
   controlModal(modal, action2) {
     return this.addStep(EventRegistry.controlModal.create(modal, action2));
   }
-  static controlTimer(timerId, action2) {
-    return SbEventFlow.start().controlTimer(timerId, action2);
+  static controlTimer(stateTimer, action2) {
+    return SbEventFlow.start().controlTimer(stateTimer, action2);
   }
-  controlTimer(timerId, action2) {
-    return this.addStep(EventRegistry.controlTimer.create(timerId, action2));
+  controlTimer(stateTimer, action2) {
+    return this.addStep(EventRegistry.controlTimer.create(stateTimer, action2));
   }
   static runApis(apis, onSuccess, onError2) {
     return SbEventFlow.start().runApis(apis, onSuccess, onError2);
@@ -84970,6 +84972,12 @@ const _SuperblocksEditorBridge = class _SuperblocksEditorBridge {
       }
     });
   }
+  socketError(message2) {
+    this.sendImmediate({
+      type: "socket/error",
+      payload: { message: message2 }
+    });
+  }
   // Private implementation details
   queueMessage(message2) {
     if (!this.connectedToParent) {
@@ -85448,7 +85456,7 @@ class ApiManager {
       scopeId,
       this.apiNameToDepCandidates[apiName] ?? []
     );
-    const orchestratorUrl = `${this.baseUrl}v2/execute`;
+    const orchestratorUrl = new URL("v2/execute", this.baseUrl).href;
     const events2 = [];
     await ((_a2 = this.rootStore.editStore) == null ? void 0 : _a2.operationManager.ensureFilesSynced());
     const abortController = new AbortController();
@@ -86150,24 +86158,50 @@ class OperationAPI {
     });
     this.serverUrl = serverUrl;
   }
+  /**
+   * @throws {Error} if the websocket connection can't be initiated after 3 attempts
+   */
   async connect(peerId, userId) {
-    const socket = await connectSocket(this.serverUrl, {
-      peerId,
-      userId,
-      onClose: () => {
-        var _a2;
-        console.log("App<>Dev box Socket closed, retrying...");
-        (_a2 = rootStore.editStore) == null ? void 0 : _a2.connectionManager.disconnect();
-        if (this.retryAttempts < 3) {
-          this.connect(peerId, userId);
-        } else {
-          this.socket = void 0;
-        }
-        this.retryAttempts++;
+    try {
+      const socket = await connectSocket(this.serverUrl, {
+        peerId,
+        userId,
+        onClose: this.handleSocketClose(peerId, userId)
+      });
+      this.retryAttempts = 0;
+      this.socket = socket;
+    } catch {
+      this.retryAttempts++;
+      console.info(
+        `App<>Dev box initial connection failed, retrying attempt ${this.retryAttempts}...`
+      );
+      await this.retryConnection(peerId, userId);
+    }
+  }
+  // Happens after initial connection
+  handleSocketClose(peerId, userId) {
+    return async () => {
+      var _a2;
+      console.info(
+        `App<>Dev box Socket closed, retrying attempt ${this.retryAttempts + 1}...`
+      );
+      (_a2 = rootStore.editStore) == null ? void 0 : _a2.connectionManager.disconnect();
+      await this.retryConnection(peerId, userId);
+      if (this.retryAttempts >= 3) {
+        this.socket = void 0;
       }
-    });
-    this.retryAttempts = 0;
-    this.socket = socket;
+      this.retryAttempts++;
+    };
+  }
+  async retryConnection(peerId, userId) {
+    if (this.retryAttempts < 3) {
+      await this.connect(peerId, userId);
+    } else {
+      console.info(
+        `App<>Dev box Socket closed, failed to reconnect after 3 attempts. Throwing error.`
+      );
+      throw new Error("Failed to reconnect after 3 attempts");
+    }
   }
 }
 const sourceUpdateApi = new OperationAPI(
@@ -86305,12 +86339,13 @@ async function connectSocket(serverUrl, {
       }
     );
     const socket = createISocketClient(isocket);
+    console.log("connected to socket");
     (_b2 = rootStore.editStore) == null ? void 0 : _b2.connectionManager.connect();
     return socket;
   } catch (error) {
     console.error("Error connecting to socket", error);
     (_c2 = rootStore.editStore) == null ? void 0 : _c2.connectionManager.disconnect();
-    return void 0;
+    throw error;
   }
 }
 _executeOrAddToBatch_dec = [action], _addPendingTransaction_dec = [action], _clearPendingTransactions_dec = [action], _batchUpdate_dec = [action], _createComponent_dec = [action], _dropComponent_dec = [action], _deleteComponents_dec = [action], _writeRuntimeProperties_dec = [action], _setWidgetProperties_dec = [action], _setWidgetProperty_dec = [action], _renameWidget_dec = [action];
@@ -86952,7 +86987,7 @@ function getPropertyValue$1({
   return property.value;
 }
 function getSbEventFlow(step, scopeId) {
-  var _a2, _b2, _c2, _d2, _e2, _f2;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
   if (!isValidStepDef(step)) {
     return void 0;
   }
@@ -87025,27 +87060,33 @@ function getSbEventFlow(step, scopeId) {
       return SbEventFlow.controlModal(modalEntity, step.direction);
     }
     case "controlTimer": {
-      const timerEntity = getEntity(step.name);
+      const timerStep = step;
+      if (!((_a2 = timerStep.timer) == null ? void 0 : _a2.name)) {
+        return void 0;
+      }
+      const timerEntity = getEntity(timerStep.timer.name);
       if (!timerEntity) return void 0;
-      return SbEventFlow.controlTimer(step.name, step.command);
+      return SbEventFlow.controlTimer(timerEntity, step.command ?? "start");
     }
     case "setStateVar": {
-      const stateEntity = getEntity((_a2 = step.state) == null ? void 0 : _a2.name);
+      const variableStep = step;
+      const stateEntity = getEntity((_b2 = variableStep.variable) == null ? void 0 : _b2.name);
       if (!stateEntity) return void 0;
-      const value = isPropertyInfo(step.value) ? getPropertyValue$1({
-        property: step.value,
+      const value = isPropertyInfo(variableStep.value) ? getPropertyValue$1({
+        property: variableStep.value,
         scopeId,
-        name: getName((_b2 = step.state) == null ? void 0 : _b2.name)
+        name: getName((_c2 = variableStep.variable) == null ? void 0 : _c2.name)
       }) : step.value;
       return SbEventFlow.setStateVar(stateEntity, value);
     }
     case "resetStateVar": {
-      const resetStateEntity = getEntity((_c2 = step.state) == null ? void 0 : _c2.name);
+      const variableStep = step;
+      const resetStateEntity = getEntity((_d2 = variableStep.variable) == null ? void 0 : _d2.name);
       if (!resetStateEntity) return void 0;
       return SbEventFlow.resetStateVar(resetStateEntity);
     }
     case "resetComponent": {
-      const resetWidgetEntity = getEntity((_d2 = step.widget) == null ? void 0 : _d2.name);
+      const resetWidgetEntity = getEntity((_e2 = step.widget) == null ? void 0 : _e2.name);
       if (!resetWidgetEntity) return void 0;
       return SbEventFlow.resetComponent(
         step.widget,
@@ -87054,7 +87095,7 @@ function getSbEventFlow(step, scopeId) {
       );
     }
     case "setComponentProperty": {
-      const setWidgetEntity = getEntity((_e2 = step.widget) == null ? void 0 : _e2.name);
+      const setWidgetEntity = getEntity((_f2 = step.widget) == null ? void 0 : _f2.name);
       if (!setWidgetEntity) return void 0;
       return SbEventFlow.setComponentProperty(
         step.widget,
@@ -87072,7 +87113,7 @@ function getSbEventFlow(step, scopeId) {
     case "setProfile":
       return SbEventFlow.setProfile(step.profileId, step.profileAction);
     case "triggerEvent":
-      return SbEventFlow.triggerEvent((_f2 = step.event) == null ? void 0 : _f2.name, step.eventPayload);
+      return SbEventFlow.triggerEvent((_g2 = step.event) == null ? void 0 : _g2.name, step.eventPayload);
     default:
       console.warn("Unhandled runtime step type", step.type);
       return void 0;
@@ -91039,14 +91080,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-KDCEbuYo.js"
+            "./allPathsLoader-BRtFt6t5.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-VThmaq3t.js"
+            "./splitPathsBySizeLoader-BIQRx5NP.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -111681,14 +111722,18 @@ const ReactiveComponent = observer(function Component2({
   const reactiveProps = useShallowMobxObserver(safeProps);
   const stylePropWithSize = useStyleWithSize(reactiveProps);
   const styleProp = useMemo$2(() => {
+    const styleWithOverflow = {
+      overflow: "auto",
+      ...stylePropWithSize
+    };
     if (reactiveProps.isVisible === false) {
       const existingOpacity = lodashExports.isNumber(stylePropWithSize.opacity) ? stylePropWithSize.opacity : 1;
       return {
-        ...stylePropWithSize,
+        ...styleWithOverflow,
         opacity: existingOpacity * INVISIBLE_OPACITY
       };
     }
-    return stylePropWithSize;
+    return styleWithOverflow;
   }, [reactiveProps.isVisible, stylePropWithSize]);
   const { setStyle, getFallbackStyle } = useComponentSuspenseStyle();
   useEffect(() => {
@@ -111848,28 +111893,52 @@ const size$2 = ({
     controlType: "WIDTH_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.minWidth,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.minWidth,
-    isVisible: showMinWidth
+    isVisible: function(s3) {
+      var _a2;
+      const hideWidth = ((_a2 = this == null ? void 0 : this.width) == null ? void 0 : _a2.mode) === "px";
+      return Boolean(
+        (showMinWidth ? showMinWidth == null ? void 0 : showMinWidth.call(this, s3) : true) && !hideWidth
+      );
+    }
   });
   const maxWidthProperty = getSizeProp({
     label: "Max width",
     controlType: "WIDTH_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.maxWidth,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.maxWidth,
-    isVisible: showMaxWidth
+    isVisible: function(s3) {
+      var _a2;
+      const hideWidth = ((_a2 = this == null ? void 0 : this.width) == null ? void 0 : _a2.mode) === "px";
+      return Boolean(
+        (showMaxWidth ? showMaxWidth == null ? void 0 : showMaxWidth.call(this, s3) : true) && !hideWidth
+      );
+    }
   });
   const minHeightProperty = getSizeProp({
     label: "Min height",
     controlType: "HEIGHT_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.minHeight,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.minHeight,
-    isVisible: showMinHeight
+    isVisible: function(s3) {
+      var _a2;
+      const hideHeight = ((_a2 = this == null ? void 0 : this.height) == null ? void 0 : _a2.mode) === "px";
+      return Boolean(
+        (showMinHeight ? showMinHeight == null ? void 0 : showMinHeight.call(this, s3) : true) && !hideHeight
+      );
+    }
   });
   const maxHeightProperty = getSizeProp({
     label: "Max height",
     controlType: "HEIGHT_DROPDOWN",
     defaultValue: defaults2 == null ? void 0 : defaults2.maxHeight,
     defaultOnAdd: defaultsOnAdd == null ? void 0 : defaultsOnAdd.maxHeight,
-    isVisible: showMaxHeight
+    isVisible: function(s3) {
+      var _a2;
+      const hideHeight = ((_a2 = this == null ? void 0 : this.height) == null ? void 0 : _a2.mode) === "px";
+      return Boolean(
+        (showMaxHeight ? showMaxHeight == null ? void 0 : showMaxHeight.call(this, s3) : true) && !hideHeight
+      );
+    }
   });
   let heightProperty = Prop.dimension().readAndWrite().propertiesPanel({
     label: "Height",
@@ -117530,12 +117599,18 @@ const AddSectionButton = ({
   sectionInstanceId
 }) => {
   const indexForNewSection = placement === "above" ? indexForBaseSection : indexForBaseSection + 1;
-  const createSection = useCallback(() => {
-    createComponent({
+  const createSection = useCallback(async () => {
+    const newSectionSourceId = await createComponent({
       componentType: "SbSection",
       parent: { id: sectionParentSourceId, index: indexForNewSection },
       scopeName: sectionParentScopeName
     });
+    if (newSectionSourceId) {
+      const newSectionInstanceId = getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(
+        newSectionSourceId
+      );
+      getEditStore().ui.selectWidget(newSectionInstanceId);
+    }
   }, [sectionParentSourceId, indexForNewSection, sectionParentScopeName]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Wrapper$2,
@@ -119823,22 +119898,13 @@ const getStackChildStyle = ({
     (childProps == null ? void 0 : childProps.type) ?? ""
   ) ? Dim.fit() : Dim.fill());
   const widthCss = childCount === 1 && (width == null ? void 0 : width.mode) === "fill" && (parentWidth == null ? void 0 : parentWidth.mode) !== "fit" ? { width: "100%" } : dimToCSS(width, "width", primary === "width");
-  const minWidthCss = getMinMaxCss(
-    childProps == null ? void 0 : childProps.minWidth,
-    "minWidth"
-  );
-  const maxWidthCss = getMinMaxCss(
-    childProps == null ? void 0 : childProps.maxWidth,
-    "maxWidth"
-  );
-  const minHeightCss = getMinMaxCss(
-    childProps == null ? void 0 : childProps.minHeight,
-    "minHeight"
-  );
-  const maxHeightCss = getMinMaxCss(
-    childProps == null ? void 0 : childProps.maxHeight,
-    "maxHeight"
-  );
+  const widthInPx = (width == null ? void 0 : width.mode) === "px";
+  const heightInPx = (height == null ? void 0 : height.mode) === "px";
+  const shouldNotShrink = widthInPx && primary === "width" || heightInPx && primary === "height";
+  const minWidthCss = widthInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.minWidth, "minWidth");
+  const maxWidthCss = widthInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.maxWidth, "maxWidth");
+  const minHeightCss = heightInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.minHeight, "minHeight");
+  const maxHeightCss = heightInPx ? {} : getMinMaxCss(childProps == null ? void 0 : childProps.maxHeight, "maxHeight");
   const margin2 = (childProps == null ? void 0 : childProps.margin) ?? {
     top: Dim.px(0),
     bottom: Dim.px(0),
@@ -119848,6 +119914,7 @@ const getStackChildStyle = ({
   const marginCss = { margin: generatePaddingStyle(margin2) };
   const stickyCss = (childProps == null ? void 0 : childProps.sticky) ? { position: "sticky", top: "0px", zIndex: Layers$1.stickySections } : {};
   const style2 = {
+    ...shouldNotShrink ? { flexShrink: 0 } : {},
     ...heightCss,
     ...widthCss,
     ...minHeightCss,
@@ -120058,20 +120125,16 @@ const generateClassName = (seed2) => {
   return `superblocks_widget_${seed2}`;
 };
 const getCanvasClassName = () => "canvas";
-const getChildName = (child) => {
-  var _a2;
-  return ((_a2 = getBindingIdentifier(child.props.bind)) == null ? void 0 : _a2.entityName) ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE];
-};
 const calculateRowPositions = (orderedNames, childrenArray, rowHeight, pxHeights) => {
   return orderedNames.reduce(
     (acc, name) => {
       var _a2;
-      const child = childrenArray.find((child2) => getChildName(child2) === name);
+      const child = childrenArray.find((child2) => child2.name === name);
       if (!child) {
         return acc;
       }
-      const marginTopPx = (((_a2 = child.props.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
-      const constraintTop = child.props.constraintTop;
+      const marginTopPx = (((_a2 = child.marginTop) == null ? void 0 : _a2.value) ?? 0) * rowHeight;
+      const constraintTop = child.constraintTop;
       const bottomFunc = (name2) => {
         const topRow = acc[name2];
         const pxHeight = pxHeights[name2];
@@ -120096,16 +120159,16 @@ const calculateRowPositions = (orderedNames, childrenArray, rowHeight, pxHeights
 const orderConstraints = (children) => {
   const childrenMap = children.reduce(
     (acc, child) => {
-      acc[getChildName(child)] = child;
+      acc[child.name] = child;
       return acc;
     },
     {}
   );
   const constraintsMap = children.reduce(
     (acc, child) => {
-      if (child.props.constraintTop) {
-        const constraints = Array.isArray(child.props.constraintTop) ? child.props.constraintTop : [child.props.constraintTop];
-        acc[getChildName(child)] = constraints.filter(
+      if (child.constraintTop) {
+        const constraints = Array.isArray(child.constraintTop) ? child.constraintTop : [child.constraintTop];
+        acc[child.name] = constraints.filter(
           (constraint) => !!childrenMap[constraint]
         );
       }
@@ -120117,24 +120180,24 @@ const orderConstraints = (children) => {
   const foundItems = /* @__PURE__ */ new Set();
   const itemsLeft = /* @__PURE__ */ new Set();
   children.forEach((child) => {
-    const constraints = constraintsMap[getChildName(child)] ?? [];
+    const constraints = constraintsMap[child.name] ?? [];
     const hasNoConstraints = constraints.length === 0;
     if (hasNoConstraints) {
-      foundItems.add(getChildName(child));
-      orderedNames.push(getChildName(child));
+      foundItems.add(child.name);
+      orderedNames.push(child.name);
     } else {
       itemsLeft.add(child);
     }
   });
   while (itemsLeft.size > 0) {
     itemsLeft.forEach((child) => {
-      const constraints = constraintsMap[getChildName(child)] ?? [];
+      const constraints = constraintsMap[child.name] ?? [];
       const constraintsLeft = constraints.filter(
         (constraint) => !foundItems.has(constraint)
       );
       if (constraintsLeft.length === 0) {
-        foundItems.add(getChildName(child));
-        orderedNames.push(getChildName(child));
+        foundItems.add(child.name);
+        orderedNames.push(child.name);
         itemsLeft.delete(child);
       }
     });
@@ -120185,99 +120248,141 @@ const heightReducer = (state, action2) => {
   }
 };
 const EMPTY_ARRAY$1 = [];
-const InternalGrid = ({
-  children = EMPTY_ARRAY$1,
-  ...props2
-}) => {
-  var _a2, _b2;
-  const isEditing = Boolean((_a2 = rootStore.editStore) == null ? void 0 : _a2.isInitialized);
-  const { style: style2, ...passThroughProps } = usePassthroughProps(props2);
-  const rowHeight = ((_b2 = props2.rowHeight) == null ? void 0 : _b2.value) ?? 12;
-  const childrenArray = useMemo$2(() => {
-    let childrenArray2 = Array.isArray(children) ? children : [children];
-    if (!isEditing) {
-      childrenArray2 = childrenArray2.filter(
-        (child) => child.props.isVisible !== false
-      );
-    }
-    return childrenArray2;
-  }, [children, isEditing]);
-  const columns = props2.columns ?? 12;
-  const [pxHeights, dispatchHeight] = React__default.useReducer(heightReducer, {});
-  const gridPositions = useMemo$2(() => {
-    const orderedNames = orderConstraints(childrenArray);
-    const rowPos = calculateRowPositions(
-      orderedNames,
-      childrenArray,
-      rowHeight,
-      pxHeights
-    );
-    const positions = childrenArray.reduce(
-      (acc, child) => {
-        var _a3, _b3, _c2;
-        let width = ((_a3 = child.props.width) == null ? void 0 : _a3.value) ?? (child.type.sbType === "SbTable" || child.type.sbType === "SbContainer" ? 6 : 2);
-        if (((_b3 = child.props.width) == null ? void 0 : _b3.mode) === "fill") {
-          width = columns;
-        }
-        acc[getChildName(child)] = {
-          top: rowPos[getChildName(child)],
-          left: ((_c2 = child.props.marginLeft) == null ? void 0 : _c2.value) ?? 0,
-          width,
-          height: Math.ceil(pxHeights[getChildName(child)] / rowHeight)
-        };
-        return acc;
-      },
-      {}
-    );
-    return positions;
-  }, [columns, childrenArray, rowHeight, pxHeights]);
-  const gridStyle = React__default.useMemo(() => {
-    const spacingValue = 0;
-    const columnsSize = `calc(${100 / columns}% - ${(columns - 1) * spacingValue / columns}px)`;
-    return {
-      display: "grid",
-      gridAutoRows: `${rowHeight}px`,
-      gap: `${spacingValue}px`,
-      gridTemplateColumns: `repeat(${columns}, ${columnsSize})`,
-      ...style2
-    };
-  }, [columns, rowHeight, style2]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(DragDisplay, { passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: gridStyle, className: props2.className, children: childrenArray.map((child) => {
-    var _a3, _b3;
-    const heightMode = ((_a3 = child.props.height) == null ? void 0 : _a3.mode) ?? "fit";
-    const top2 = gridPositions[getChildName(child)].top;
-    const left2 = gridPositions[getChildName(child)].left;
-    const rows = gridPositions[getChildName(child)].height;
-    const columns2 = gridPositions[getChildName(child)].width;
+const GridChild = observer(
+  ({
+    childProps,
+    gridPositions,
+    rowHeight,
+    dispatchHeight,
+    childElement
+  }) => {
+    var _a2, _b2;
+    const heightMode = ((_a2 = childProps.height) == null ? void 0 : _a2.mode) ?? "fit";
+    const top2 = gridPositions[childProps.name].top;
+    const left2 = gridPositions[childProps.name].left;
+    const rows = gridPositions[childProps.name].height;
+    const columns = gridPositions[childProps.name].width;
     const Component3 = heightMode === "fit" ? MeasuredComponent : StaticComponent;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
         style: {
           gridRow: `${top2 + 1} / span ${Math.max(1, rows)}`,
-          gridColumn: `${left2 + 1} / span ${Math.max(1, columns2)}`,
+          gridColumn: `${left2 + 1} / span ${Math.max(1, columns)}`,
           width: "100%",
           maxWidth: "100%"
         },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component3,
           {
-            staticHeight: (((_b3 = child.props.height) == null ? void 0 : _b3.value) ?? 0) * rowHeight,
+            staticHeight: (((_b2 = childProps.height) == null ? void 0 : _b2.value) ?? 0) * rowHeight,
             onHeightChanged: (height) => {
               dispatchHeight({
                 type: "SET_HEIGHT",
-                name: getChildName(child),
+                name: childProps.name,
                 height
               });
             },
-            children: child
+            children: childElement
           }
         )
       },
-      getChildName(child)
+      childProps.name
     );
-  }) }) });
-};
+  }
+);
+const InternalGrid = observer(
+  ({ children = EMPTY_ARRAY$1, ...props2 }) => {
+    var _a2;
+    const { style: style2, ...passThroughProps } = usePassthroughProps(props2);
+    const rowHeight = ((_a2 = props2.rowHeight) == null ? void 0 : _a2.value) ?? 12;
+    const childrenArray = useObserverMemo(() => {
+      var _a3;
+      const childrenArray2 = Array.isArray(children) ? children : [children];
+      const isEditing = Boolean((_a3 = rootStore.editStore) == null ? void 0 : _a3.isInitialized);
+      const withEvaluatedProps = childrenArray2.reduce((acc, child) => {
+        const bindingIdentifier = getBindingIdentifier(child.props.bind);
+        const entity = bindingIdentifier ? rootStore.entityManager.getEntity(bindingIdentifier.scopeId, {
+          value: bindingIdentifier.entityName,
+          isAnonymous: false
+        }) : null;
+        const marginTop = (entity == null ? void 0 : entity.marginTop) ?? (isDimension(child.props.marginTop) ? child.props.marginTop : void 0);
+        const marginLeft = (entity == null ? void 0 : entity.marginLeft) ?? (isDimension(child.props.marginLeft) ? child.props.marginLeft : void 0);
+        const width = (entity == null ? void 0 : entity.width) ?? (isDimension(child.props.width) ? child.props.width : void 0);
+        const height = (entity == null ? void 0 : entity.height) ?? (isDimension(child.props.height) ? child.props.height : void 0);
+        const constraintTop = (entity == null ? void 0 : entity.constraintTop) ?? child.props.constraintTop;
+        const isVisible2 = (entity == null ? void 0 : entity.isVisible) ?? child.props.isVisible;
+        const gridChild = {
+          marginTop,
+          marginLeft,
+          width,
+          height,
+          constraintTop,
+          name: (bindingIdentifier == null ? void 0 : bindingIdentifier.entityName) ?? child.props[WIDGET_SOURCE_ID_ATTRIBUTE],
+          // source ID as a fallback
+          sbType: isSbComponent(child) ? child.type.sbType : void 0,
+          element: child
+        };
+        if (isVisible2 !== false || isEditing) {
+          acc.push(gridChild);
+        }
+        return acc;
+      }, []);
+      return withEvaluatedProps;
+    }, [children]);
+    const columns = props2.columns ?? 12;
+    const [pxHeights, dispatchHeight] = React__default.useReducer(heightReducer, {});
+    const gridPositions = useMemo$2(() => {
+      const orderedNames = orderConstraints(childrenArray);
+      const rowPos = calculateRowPositions(
+        orderedNames,
+        childrenArray,
+        rowHeight,
+        pxHeights
+      );
+      const positions = childrenArray.reduce(
+        (acc, child) => {
+          var _a3, _b2, _c2;
+          let width = ((_a3 = child.width) == null ? void 0 : _a3.value) ?? (child.sbType === "SbTable" || child.sbType === "SbContainer" ? 6 : 2);
+          if (((_b2 = child.width) == null ? void 0 : _b2.mode) === "fill") {
+            width = columns;
+          }
+          acc[child.name] = {
+            top: rowPos[child.name],
+            left: ((_c2 = child.marginLeft) == null ? void 0 : _c2.value) ?? 0,
+            width,
+            height: Math.ceil(pxHeights[child.name] / rowHeight)
+          };
+          return acc;
+        },
+        {}
+      );
+      return positions;
+    }, [columns, childrenArray, rowHeight, pxHeights]);
+    const gridStyle = React__default.useMemo(() => {
+      const spacingValue = 0;
+      const columnsSize = `calc(${100 / columns}% - ${(columns - 1) * spacingValue / columns}px)`;
+      return {
+        display: "grid",
+        gridAutoRows: `${rowHeight}px`,
+        gap: `${spacingValue}px`,
+        gridTemplateColumns: `repeat(${columns}, ${columnsSize})`,
+        ...style2
+      };
+    }, [columns, rowHeight, style2]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(DragDisplay, { passThroughProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: gridStyle, className: props2.className, children: childrenArray.map((child) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      GridChild,
+      {
+        childProps: child,
+        childElement: child.element,
+        gridPositions,
+        rowHeight,
+        dispatchHeight
+      },
+      child.name
+    )) }) });
+  }
+);
 const DragDisplay = (props2) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
@@ -145512,14 +145617,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-B3Ii4JGL.js"
+            "./allPathsLoader-BcutVQcb.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-Btq5cpt-.js"
+            "./splitPathsBySizeLoader-B6PtJR5E.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -162715,7 +162820,7 @@ const propertiesDefinition$9 = {
       placeholder: '[{ "col1": "val1" }]',
       isJSConvertible: false,
       helpText: "Takes in an array of objects to display rows in the table. Bind data from an API using {{}}",
-      controlType: "COMPUTED_CODE_EDITOR"
+      controlType: "FUNCTION_CODE_EDITOR"
     }),
     // do not let users set the id property
     // id is managed internally by the table (it's always the key of the column)
@@ -162752,11 +162857,12 @@ const propertiesDefinition$9 = {
       helpText: "Enable per column filtering"
     }),
     defaultFilters: Prop.any().readAndWrite().propertiesPanel({
-      controlType: "COMPUTED_CODE_EDITOR",
+      controlType: "FUNCTION_CODE_EDITOR",
       label: "Default filters",
       visibility: "SHOW_NAME",
       isJSConvertible: false,
       isRemovable: true,
+      defaultOnAdd: () => Property.Computed(""),
       helpText: "Allows specifying the filters that will be used on page load",
       isVisible: function() {
         return this.isFilterable && this.pageType !== "server-side";
@@ -162833,6 +162939,8 @@ const propertiesDefinition$9 = {
       label: "Default sort",
       helpText: "Allows specifying the sort options that will be used on page load",
       controlType: "DEFAULT_TABLE_SORT",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
       childrenDisplayMode: {
         type: "popover",
         title: "Default sort"
@@ -162841,6 +162949,8 @@ const propertiesDefinition$9 = {
     defaultSearchText: Prop.string().readAndWrite().propertiesPanel({
       label: "Default search",
       helpText: "Sets the default search text",
+      isRemovable: true,
+      visibility: "SHOW_NAME",
       isVisible: function() {
         return this.enableClientSideSearch !== false;
       }
@@ -182001,7 +182111,7 @@ const propertiesDefinition$8 = {
       isJSConvertible: false,
       helpText: "Allows users to select either a single option or multiple options. Values must be unique.",
       placeholder: "[{label: 'Option 1', value: 'option1'}]",
-      controlType: "COMPUTED_CODE_EDITOR"
+      controlType: "FUNCTION_CODE_EDITOR"
     }),
     defaultOptionValue: Prop.string().propertiesPanel({
       label: "Default selected value",
@@ -183845,8 +183955,8 @@ const SbVariable = registerSbEntity(
 );
 const propertiesDefinition$1 = {
   general: Section.category(PropsPanelCategory.Uncategorized).propertiesPanel({ showHeader: false }).children({
-    intervalMs: Prop.number().default(3e5).readAndWrite().propertiesPanel({
-      label: "Interval (ms)",
+    intervalMs: Prop.number().default(300).readAndWrite().propertiesPanel({
+      label: "Interval",
       helpText: "Sets the interval of the timer",
       placeholder: "1000",
       isJSConvertible: false,
@@ -184638,6 +184748,7 @@ function listenForUrlChange() {
   return observer2;
 }
 const IframeConnected = observer(function IframeConnected2(props2) {
+  var _a2;
   useEffect(() => {
     if (!isEmbeddedBySuperblocksFirstParty()) {
       return;
@@ -184647,7 +184758,18 @@ const IframeConnected = observer(function IframeConnected2(props2) {
       editStore.setIsInitialized(true);
       editorBridge.connected();
       rootStore.setEditStore(editStore);
-      await sourceUpdateApi.connect(data2.payload.peerId, data2.payload.userId);
+      try {
+        await sourceUpdateApi.connect(data2.payload.peerId, data2.payload.userId);
+      } catch (error) {
+        console.error(
+          "Error connecting to internal socket from library",
+          error
+        );
+        editorBridge.socketError(
+          "Error connecting to the remote dev server, please refresh the page"
+        );
+        return;
+      }
       editorBridge.updatePropertiesPanels(
         editStore.propertiesPanelManager.getNonDynamicPropertiesPanels()
       );
@@ -184676,6 +184798,10 @@ const IframeConnected = observer(function IframeConnected2(props2) {
     };
   }, []);
   const isPossiblyEditor = useMemo$2(isEmbeddedBySuperblocksFirstParty, []);
+  const connectionStatus = (_a2 = rootStore.editStore) == null ? void 0 : _a2.connectionManager.connectionStatus;
+  if (connectionStatus === "pre-init" || connectionStatus === "connecting") {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FullPageSpinner, {});
+  }
   if (isPossiblyEditor && editStore.isInitialized && typeof window !== "undefined") {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(DnDProvider, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(NewComponentsDragLayer, {}),
@@ -186705,14 +186831,38 @@ console.log = (...args) => {
   } catch {
   }
 };
+const loadApisIntoLibrary = async function loadApisIntoLibrary2() {
+  var _a2, _b2;
+  {
+    try {
+      const mod2 = await import("./user-facing/build-manifest.js");
+      const apis = ((_a2 = mod2.default) == null ? void 0 : _a2.apis) ?? {};
+      const apiDependencies = ((_b2 = mod2.default) == null ? void 0 : _b2.apiDependencies) ?? [];
+      rootStore.apis.setAllApis(apis);
+      apiDependencies.forEach((dep) => {
+        rootStore.apis.setApiDepCandidates(dep.apiName, dep.params);
+        rootStore.apis.setApiReferences(dep.apiName, dep.dependencies);
+      });
+    } catch (error) {
+      console.error("Error loading apis into library", error);
+    }
+  }
+};
 const SbProvider = function SbProvider2({
   name = "codemode",
   settings,
-  preloadedData,
   children
 }) {
   var _a2, _b2;
   const isEmbedded = typeof window !== "undefined" && window.parent !== window.self;
+  const [isApisInitialized, setIsApisInitialized] = useState(false);
+  const runApiInitialization = useCallback(async () => {
+    await loadApisIntoLibrary();
+    setIsApisInitialized(true);
+  }, []);
+  useEffect(() => {
+    runApiInitialization();
+  }, [runApiInitialization]);
   const [userAccessibleTheme, setUserAccessibleTheme] = useState(DEFAULT_THEME);
   useEffect(() => {
     const mergedTheme = lodashExports.merge(BASE_THEME_V5, settings == null ? void 0 : settings.theme);
@@ -186724,7 +186874,10 @@ const SbProvider = function SbProvider2({
   }, [settings == null ? void 0 : settings.theme, settings == null ? void 0 : settings.themeOverrides]);
   useEffect(() => {
     initializeStyles(name);
-  }, [preloadedData, name]);
+  }, [name]);
+  if (!isApisInitialized) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FullPageSpinner, {});
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -198333,4 +198486,4 @@ export {
   SbTimer as y,
   SbApi as z
 };
-//# sourceMappingURL=index-kjgG33Rg.js.map
+//# sourceMappingURL=index-CJnCDVsr.js.map