@superblocksteam/library 2.0.6-next.2 → 2.0.6-next.20

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

@@ -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-Eo3xuD81.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-Eo3xuD81.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);
@@ -86952,7 +86954,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 +87027,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 +87062,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 +87080,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 +91047,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-KDCEbuYo.js"
+            "./allPathsLoader-5w2Df9lN.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-CUJrKt9p.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -111848,28 +111856,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 +117562,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 +119861,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 +119877,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 +120088,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 +120122,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 +120143,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 +120211,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 +145580,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-B3Ii4JGL.js"
+            "./allPathsLoader-BAwHv7e7.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-DALk2KWT.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -162757,6 +162825,7 @@ const propertiesDefinition$9 = {
       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 +162902,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 +162912,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;
       }
@@ -183845,8 +183918,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,
@@ -186705,6 +186778,23 @@ 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,
@@ -186713,6 +186803,14 @@ const SbProvider = function SbProvider2({
 }) {
   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);
@@ -186725,6 +186823,9 @@ const SbProvider = function SbProvider2({
   useEffect(() => {
     initializeStyles(name);
   }, [preloadedData, name]);
+  if (!isApisInitialized) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(FullPageSpinner, {});
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -198333,4 +198434,4 @@ export {
   SbTimer as y,
   SbApi as z
 };
-//# sourceMappingURL=index-kjgG33Rg.js.map
+//# sourceMappingURL=index-Bnnq0M9f.js.map