@superblocksteam/library 2.0.12-next.2 → 2.0.12-next.21

package/dist/{index-CCewmzC_.js → index-CH4jAtWn.js}

@@ -54595,12 +54595,12 @@ const RunApisTrigger = {
       onFinish == null ? void 0 : onFinish(responses);
     });
   },
-  create(apis, onSuccess, onError2) {
+  create(apis, opts) {
     return {
       type: TriggerStepType.RUN_APIS,
       apis,
-      onSuccess,
-      onError: onError2
+      onSuccess: opts == null ? void 0 : opts.onSuccess,
+      onError: opts == null ? void 0 : opts.onError
     };
   }
 };
@@ -54624,12 +54624,12 @@ const ControlModalTrigger = {
       args: [step]
     });
   },
-  create(modal, action2) {
+  create(modal, opts) {
     const meta = getBindingIdentifier(modal);
     return {
       type: TriggerStepType.CONTROL_MODAL,
       name: meta == null ? void 0 : meta.entityName,
-      action: action2
+      action: opts.action
     };
   }
 };
@@ -54648,12 +54648,12 @@ const ControlSlideoutTrigger = {
       args: [step]
     });
   },
-  create(slideout, action2) {
+  create(slideout, opts) {
     const meta = getBindingIdentifier(slideout);
     return {
       type: TriggerStepType.CONTROL_SLIDEOUT,
       name: meta == null ? void 0 : meta.entityName,
-      action: action2
+      action: opts.action
     };
   }
 };
@@ -54775,18 +54775,37 @@ const NavigateToRouteTrigger = {
     };
   }
 };
+const isValidUrlScheme = (url2) => {
+  return (
+    // Standard http call
+    url2.startsWith("http://") || // Secure http call
+    url2.startsWith("https://") || // Mail url to directly open email app prefilled
+    url2.startsWith("mailto:") || // Tel url to directly open phone app prefilled
+    url2.startsWith("tel:")
+  );
+};
 const NavigateToTrigger = {
   type: TriggerStepType.NAVIGATE_TO,
   async execute(_context, step) {
-    window.location.href = step.url;
+    let url2 = step.url;
+    if (!isValidUrlScheme(url2)) {
+      url2 = "https://" + url2;
+    }
+    if (step.newWindow) {
+      window.open(url2, "_blank");
+    } else if (window.top) {
+      window.top.location.href = url2;
+    } else {
+      window.location.href = url2;
+    }
   },
-  create(props2) {
+  create(url2, opts) {
     return {
       type: TriggerStepType.NAVIGATE_TO,
-      url: props2.url,
-      newWindow: props2.newWindow ?? false,
-      replaceHistory: props2.replaceHistory,
-      arguments: props2.arguments
+      url: url2,
+      newWindow: (opts == null ? void 0 : opts.newWindow) ?? false,
+      replaceHistory: opts == null ? void 0 : opts.replaceHistory,
+      arguments: opts == null ? void 0 : opts.arguments
     };
   }
 };
@@ -54795,16 +54814,17 @@ const SetQueryParamsTrigger = {
   async execute(_context, step) {
     console.log("SetQueryParamsTrigger", step);
   },
-  create(queryParams, keepQueryParams = false) {
+  create(queryParams, opts) {
     return {
       type: TriggerStepType.SET_QUERY_PARAMS,
       queryParams,
-      keepQueryParams
+      keepQueryParams: (opts == null ? void 0 : opts.keep) ?? false
     };
   }
 };
 const RunJsTrigger = {
   type: TriggerStepType.RUN_JS,
+  // TODO: implement opts?: { defer?: number }
   create(handler) {
     return {
       type: TriggerStepType.RUN_JS,
@@ -54829,11 +54849,11 @@ const SetProfileTrigger = {
   async execute(_context, step) {
     console.log("SetProfileTrigger", step);
   },
-  create(profileId, action2) {
+  create(profileId, opts) {
     return {
       type: TriggerStepType.SET_PROFILE,
       profileId,
-      action: action2
+      action: opts.action ?? "set"
     };
   }
 };
@@ -89724,7 +89744,7 @@ const StatusIconWrapper = qe$1.div`
 const getCloseIcon = (dataTest) => /* @__PURE__ */ jsxRuntimeExports.jsx(
   CloseIconWrapper,
   {
-    "data-test": `${dataTest}-close`,
+    "data-test": dataTest ? `${dataTest}-close` : "notification-close",
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgClose, {})
   }
 );
@@ -89742,7 +89762,7 @@ const DescriptionWrapper = qe$1.div`
   margin-right: -10px;
 `;
 const styleMessage = (message2, dataTest) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(MessageWrapper, { "data-test": dataTest, children: message2 });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(MessageWrapper, { "data-test": dataTest ? dataTest : "notification", children: message2 });
 };
 const styleDescription = (description) => {
   if (!description) {
@@ -89849,7 +89869,7 @@ function sendNotification({
       }
     },
     props: {
-      "data-testid": dataTest
+      "data-testid": dataTest ?? attrSafeKey(`notification-${key2}`)
     }
   });
 }
@@ -89864,19 +89884,19 @@ const ShowAlertTrigger = {
     });
     sendNotification({
       message: computedMessage,
-      type: step.style,
+      type: step.style ?? "success",
       duration: step.alertDuration ?? 4,
       placement: step.alertPosition ?? NotificationPosition.bottomRight,
       dataTest: "alert-notification"
     });
   },
-  create(message2, alertType, alertDuration, alertPosition) {
+  create(message2, opts) {
     return {
       type: TriggerStepType.SHOW_ALERT,
       message: message2,
-      style: alertType,
-      alertDuration,
-      alertPosition
+      style: (opts == null ? void 0 : opts.type) ?? "success",
+      alertDuration: opts == null ? void 0 : opts.durationMs,
+      alertPosition: opts == null ? void 0 : opts.position
     };
   }
 };
@@ -89926,11 +89946,11 @@ const SetStateVarTrigger = {
       args: [value]
     });
   },
-  create(variable, value) {
+  create(variable, opts) {
     return {
       type: TriggerStepType.SET_STATE_VAR,
       variable,
-      value
+      value: opts.value
     };
   }
 };
@@ -89941,11 +89961,11 @@ const ControlTimerTrigger = {
       step.timer[step.action]();
     }
   },
-  create(timer, action2) {
+  create(timer, opts) {
     return {
       type: TriggerStepType.CONTROL_TIMER,
       timer,
-      action: action2
+      action: opts.action
     };
   }
 };
@@ -89954,12 +89974,12 @@ const TriggerEventTrigger = {
   async execute(_context, step) {
     console.log("TriggerEventTrigger", step);
   },
-  create(eventName, eventPayload) {
+  create(eventName, opts) {
     return {
       type: TriggerStepType.TRIGGER_EVENT,
       event: { name: eventName },
       //TODO(code-mode): this is a hack to get the name
-      eventPayload
+      eventPayload: opts == null ? void 0 : opts.data
     };
   }
 };
@@ -94242,7 +94262,7 @@ function mergeRelations(existingRelations, relations) {
   ) : relations;
   return mergedRelations;
 }
-function getChildren(input, path2, entity, scopedState) {
+function getChildren$2(input, path2, entity, scopedState) {
   function getChildrenFromSection(section) {
     return Object.keys(section.props).reduce(
       (acc, key2) => {
@@ -94653,7 +94673,7 @@ class CompositeProp extends Prop {
     }
     return {
       ...definition,
-      children: getChildren(
+      children: getChildren$2(
         this.nestedProps,
         this.prop.path,
         entity,
@@ -94683,7 +94703,7 @@ class RecordProp extends Prop {
     }
     return {
       ...definition,
-      children: getChildren(
+      children: getChildren$2(
         this.nestedProps,
         this.prop.path,
         entity,
@@ -95080,7 +95100,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-Brbj1JeD.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-CHfJX3eH.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -95093,7 +95113,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-Brbj1JeD.js").then((module2) => ({
+  return import("./devtools-consolidated-CHfJX3eH.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -95390,11 +95410,11 @@ class EventFlow {
   runJS(handler) {
     return this.addStep(EventRegistry.runJs.create(handler));
   }
-  static navigateTo(props2) {
-    return EventFlow.start().navigateTo(props2);
+  static navigateTo(url2, opts) {
+    return EventFlow.start().navigateTo(url2, opts);
   }
-  navigateTo(props2) {
-    return this.addStep(EventRegistry.navigateTo.create(props2));
+  navigateTo(url2, opts) {
+    return this.addStep(EventRegistry.navigateTo.create(url2, opts));
   }
   static navigateToApp(appId) {
     return EventFlow.start().navigateToApp(appId);
@@ -95408,42 +95428,36 @@ class EventFlow {
   navigateToRoute(route) {
     return this.addStep(EventRegistry.navigateToRoute.create(route));
   }
-  static setQueryParams(params, keepQueryParams = false) {
-    return EventFlow.start().setQueryParams(params, keepQueryParams);
+  static setQueryParams(params, opts) {
+    return EventFlow.start().setQueryParams(params, opts);
   }
-  setQueryParams(params, keepQueryParams = false) {
-    return this.addStep(
-      EventRegistry.setQueryParams.create(params, keepQueryParams)
-    );
+  setQueryParams(params, opts) {
+    return this.addStep(EventRegistry.setQueryParams.create(params, opts));
   }
-  static controlSlideout(slideout, action2) {
-    return EventFlow.start().controlSlideout(slideout, action2);
+  static controlSlideout(slideout, opts) {
+    return EventFlow.start().controlSlideout(slideout, opts);
   }
-  controlSlideout(slideout, action2) {
-    return this.addStep(EventRegistry.controlSlideout.create(slideout, action2));
+  controlSlideout(slideout, opts) {
+    return this.addStep(EventRegistry.controlSlideout.create(slideout, opts));
   }
-  static controlModal(modal, action2) {
-    return EventFlow.start().controlModal(modal, action2);
+  static controlModal(modal, opts) {
+    return EventFlow.start().controlModal(modal, opts);
   }
-  controlModal(modal, action2) {
-    return this.addStep(EventRegistry.controlModal.create(modal, action2));
+  controlModal(modal, opts) {
+    return this.addStep(EventRegistry.controlModal.create(modal, opts));
   }
-  static controlTimer(stateTimer, action2) {
-    return EventFlow.start().controlTimer(stateTimer, action2);
+  static controlTimer(stateTimer, opts) {
+    return EventFlow.start().controlTimer(stateTimer, opts);
   }
-  controlTimer(stateTimer, action2) {
-    return this.addStep(EventRegistry.controlTimer.create(stateTimer, action2));
+  controlTimer(stateTimer, opts) {
+    return this.addStep(EventRegistry.controlTimer.create(stateTimer, opts));
   }
-  static runApis(apis, onSuccess, onError2) {
-    return EventFlow.start().runApis(apis, onSuccess, onError2);
+  static runApis(apis, opts) {
+    return EventFlow.start().runApis(apis, opts);
   }
-  runApis(apis, onSuccess, onError2) {
+  runApis(apis, opts) {
     return this.addStep(
-      EventRegistry.executeApi.create(
-        apis,
-        onSuccess,
-        onError2
-      )
+      EventRegistry.executeApi.create(apis, opts)
     );
   }
   static cancelApis(apis, onCancel) {
@@ -95466,11 +95480,11 @@ class EventFlow {
   resetStateVar(state) {
     return this.addStep(EventRegistry.resetStateVar.create(state));
   }
-  static setStateVar(stateVarName, value) {
-    return EventFlow.start().setStateVar(stateVarName, value);
+  static setStateVar(stateVarName, opts) {
+    return EventFlow.start().setStateVar(stateVarName, opts);
   }
-  setStateVar(stateVar, value) {
-    return this.addStep(EventRegistry.setStateVar.create(stateVar, value));
+  setStateVar(stateVar, opts) {
+    return this.addStep(EventRegistry.setStateVar.create(stateVar, opts));
   }
   static setComponentProperty(component, opts) {
     return EventFlow.start().setComponentProperty(component, opts);
@@ -95480,37 +95494,23 @@ class EventFlow {
       EventRegistry.setComponentProperty.create(component, opts)
     );
   }
-  static showAlert(message2, alertType, alertDuration, alertPosition) {
-    return EventFlow.start().showAlert(
-      message2,
-      alertType,
-      alertDuration,
-      alertPosition
-    );
+  static showAlert(message2, opts) {
+    return EventFlow.start().showAlert(message2, opts);
   }
-  showAlert(message2, alertType, alertDuration, alertPosition) {
-    return this.addStep(
-      EventRegistry.showAlert.create(
-        message2,
-        alertType,
-        alertDuration,
-        alertPosition
-      )
-    );
+  showAlert(message2, opts) {
+    return this.addStep(EventRegistry.showAlert.create(message2, opts));
   }
-  static setProfile(profileId, action2) {
-    return EventFlow.start().setProfile(profileId, action2);
+  static setProfile(profileId, opts) {
+    return EventFlow.start().setProfile(profileId, opts);
   }
-  setProfile(profileId, action2) {
-    return this.addStep(EventRegistry.setProfile.create(profileId, action2));
+  setProfile(profileId, opts) {
+    return this.addStep(EventRegistry.setProfile.create(profileId, opts));
   }
-  static triggerEvent(eventName, eventData) {
-    return EventFlow.start().triggerEvent(eventName, eventData);
+  static triggerEvent(eventName, opts) {
+    return EventFlow.start().triggerEvent(eventName, opts);
   }
-  triggerEvent(eventName, eventData) {
-    return this.addStep(
-      EventRegistry.triggerEvent.create(eventName, eventData)
-    );
+  triggerEvent(eventName, opts) {
+    return this.addStep(EventRegistry.triggerEvent.create(eventName, opts));
   }
   static sequence(eventFlows) {
     return EventFlow.start().sequence(eventFlows);
@@ -95634,7 +95634,7 @@ const toExecutableOrValue = (path2, value, isAnExternalFunction = false) => {
       };
     }
   } else if (isFunctionProp(value)) {
-    return { value, type: "normal" };
+    return { value, type: "function" };
   } else if (isDerivedProp(value)) {
     return {
       value: toEvalFunc([path2, value])[1],
@@ -95951,7 +95951,7 @@ class EntityManager {
     }
     const getMetaParent = () => isNested ? lodashExports.get(entityMeta, parentSegments) : entityMeta;
     const snapshot = this.getState.bind(this);
-    const isComputed = typeof eov.value === "function";
+    const isComputed = typeof eov.value === "function" && eov.type !== "function";
     const computeEngine = eov.type === "mustache-bindings" || eov.type === "lazy-function" ? this.evalComputeEngine : this.dirComputeEngine;
     const entityType = entity.type;
     if (eov.type === "external-function") {
@@ -96233,19 +96233,28 @@ class EntityManager {
   addMissingProps(managedProps, addedProperties, scopeId, name) {
     const entity = this.getScope(scopeId).getEntity(name);
     for (const prop of managedProps) {
+      const isComputed = typeof prop.default === "function" && prop.dataType !== "function";
       if (lodashExports.get(entity, prop.path) == null && !addedProperties.has(prop.path) && // for nested properties, only set if the default is defined
       // for top-level properties, we should always add the property
       (!isNestedPath(prop.path) || prop.default !== void 0)) {
-        this.addProperty(
-          scopeId,
-          name,
-          prop.path,
-          toExecutableOrValue(
+        if (isComputed) {
+          this.addProperty(scopeId, name, prop.path, {
+            value: prop.default,
+            type: "normal"
+            // This will be treated as a computed function
+          });
+        } else {
+          this.addProperty(
+            scopeId,
+            name,
             prop.path,
-            prop.default !== void 0 ? fastClone$1(prop.default) : void 0,
-            prop.dataType === "function" || prop.dataType === "event"
-          )
-        );
+            toExecutableOrValue(
+              prop.path,
+              prop.default !== void 0 ? fastClone$1(prop.default) : void 0,
+              prop.dataType === "function" || prop.dataType === "event"
+            )
+          );
+        }
       }
     }
   }
@@ -96277,7 +96286,7 @@ class EntityManager {
       name.value,
       value
     );
-    const isComputed = typeof transformedValue === "function";
+    const isComputed = typeof transformedValue === "function" && type5 !== "function";
     const computeEngine = type5 === "mustache-bindings" || type5 === "lazy-function" ? this.evalComputeEngine : this.dirComputeEngine;
     const result = isComputed ? computeEngine.compute({
       snapshot: this.getState(scopeId),
@@ -96716,7 +96725,7 @@ _runApi_dec = [action], _cancelApi_dec = [action];
 class ApiManager {
   constructor(rootStore2) {
     __runInitializers(_init2, 5, this);
-    __publicField(this, "baseUrl");
+    __publicField(this, "agentUrls", []);
     __publicField(this, "token");
     __publicField(this, "accessToken");
     __publicField(this, "apisByName", {});
@@ -96818,7 +96827,23 @@ class ApiManager {
       scopeId,
       this.apiNameToDepCandidates[apiName] ?? []
     );
-    const orchestratorUrl = new URL("v2/execute", this.baseUrl).href;
+    if (!this.agentUrls.length) {
+      editorBridge.setApiResponse(apiName, {
+        status: "STATUS_COMPLETED",
+        execution: null,
+        errors: [{ message: "No active agent found" }]
+      });
+      sendNotification({
+        message: "No active agent found",
+        type: "error"
+      });
+      return {
+        data: null,
+        error: "No active agent found"
+      };
+    }
+    const agentBaseUrl = this.agentUrls[Math.floor(Math.random() * this.agentUrls.length)];
+    const orchestratorUrl = new URL("v2/execute", agentBaseUrl).href;
     const events2 = [];
     await ((_a2 = this.rootStore.editStore) == null ? void 0 : _a2.operationManager.ensureFilesSynced());
     const abortController = new AbortController();
@@ -98689,11 +98714,10 @@ function getEventFlow(step, scopeId) {
   };
   switch (step.type) {
     case "executeApi":
-      return EventFlow.runApis(
-        getEntities(step.apis.map((api2) => api2.name)),
-        createNestedEventFlow(step.onSuccess ?? []),
-        createNestedEventFlow(step.onError ?? [])
-      );
+      return EventFlow.runApis(step.apis.map((api2) => api2.name), {
+        onSuccess: createNestedEventFlow(step.onSuccess ?? []),
+        onError: createNestedEventFlow(step.onError ?? [])
+      });
     case "cancelApi":
       return EventFlow.cancelApis(
         getEntities(step.apis.map((api2) => api2.name)),
@@ -98711,9 +98735,10 @@ function getEventFlow(step, scopeId) {
         }
       });
     case "navigateTo":
-      return EventFlow.navigateTo({
-        url: step.url,
-        newWindow: step.newWindow
+      return EventFlow.navigateTo(step.url, {
+        newWindow: step.newWindow,
+        replaceHistory: step.replaceHistory,
+        arguments: step.arguments
       });
     case "navigateToApp":
       return EventFlow.navigateToApp(step.targetApp.id);
@@ -98722,17 +98747,23 @@ function getEventFlow(step, scopeId) {
     case "setQueryParams":
       return EventFlow.setQueryParams(
         step.queryParams ? JSON.parse(step.queryParams) : {},
-        step.keepQueryParams
+        {
+          keep: step.keepQueryParams
+        }
       );
     case "controlSlideout": {
       const slideoutEntity = getEntity(step.name);
       if (!slideoutEntity) return void 0;
-      return EventFlow.controlSlideout(slideoutEntity, step.action);
+      return EventFlow.controlSlideout(slideoutEntity, {
+        action: step.action
+      });
     }
     case "controlModal": {
       const modalEntity = getEntity(step.name);
       if (!modalEntity) return void 0;
-      return EventFlow.controlModal(modalEntity, step.action);
+      return EventFlow.controlModal(modalEntity, {
+        action: step.action
+      });
     }
     case "controlTimer": {
       const timerStep = step;
@@ -98741,7 +98772,9 @@ function getEventFlow(step, scopeId) {
       }
       const timerEntity = getEntity(timerStep.timer.name);
       if (!timerEntity) return void 0;
-      return EventFlow.controlTimer(timerEntity, step.action ?? "start");
+      return EventFlow.controlTimer(timerEntity, {
+        action: step.action ?? "start"
+      });
     }
     case "setStateVar": {
       const variableStep = step;
@@ -98752,7 +98785,7 @@ function getEventFlow(step, scopeId) {
         scopeId,
         name: getName((_c2 = variableStep.variable) == null ? void 0 : _c2.name)
       }) : step.value;
-      return EventFlow.setStateVar(stateEntity, value);
+      return EventFlow.setStateVar(stateEntity, { value });
     }
     case "resetStateVar": {
       const variableStep = step;
@@ -98779,16 +98812,22 @@ function getEventFlow(step, scopeId) {
       });
     }
     case "showAlert":
-      return EventFlow.showAlert(
-        step.message,
-        step.style,
-        step.alertDuration,
-        step.alertPosition
-      );
+      return EventFlow.showAlert(step.message, {
+        type: step.style,
+        durationMs: step.alertDuration,
+        position: step.alertPosition
+      });
     case "setProfile":
-      return EventFlow.setProfile(step.profileId, step.action);
+      return EventFlow.setProfile(step.profileId, {
+        action: step.action
+      });
     case "triggerEvent":
-      return EventFlow.triggerEvent((_g2 = step.event) == null ? void 0 : _g2.name, step.eventPayload);
+      return EventFlow.triggerEvent(
+        (_g2 = step.event) == null ? void 0 : _g2.name,
+        step.eventPayload ? {
+          data: step.eventPayload
+        } : void 0
+      );
     default:
       console.warn("Unhandled runtime step type", step.type);
       return void 0;
@@ -102642,14 +102681,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-Tf9x8dtV.js"
+            "./allPathsLoader-BYj7sg41.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-C3MBiqmb.js"
+            "./splitPathsBySizeLoader-go6FZrRw.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -111761,7 +111800,7 @@ function createScope(getInitialEntities, options) {
     scopeId: stableScopeId
   });
   const bindingIds = {};
-  const getBinding = (key2) => {
+  const getBinding2 = (key2) => {
     if (bindingIds[key2]) {
       return bindingIds[key2];
     }
@@ -111789,7 +111828,7 @@ function createScope(getInitialEntities, options) {
               useSuspense: true
             }
           ),
-          getBinding(key2)
+          getBinding2(key2)
         );
       }
     }
@@ -127965,199 +128004,6 @@ const GridDropPreview = observer(() => {
     }
   );
 });
-var KeyValuePropertyType = /* @__PURE__ */ ((KeyValuePropertyType2) => {
-  KeyValuePropertyType2["TEXT"] = "text";
-  KeyValuePropertyType2["NUMBER"] = "number";
-  KeyValuePropertyType2["CURRENCY"] = "currency";
-  KeyValuePropertyType2["PERCENTAGE"] = "percentage";
-  KeyValuePropertyType2["IMAGE"] = "image";
-  KeyValuePropertyType2["VIDEO"] = "video";
-  KeyValuePropertyType2["DATE"] = "date";
-  KeyValuePropertyType2["BUTTON"] = "button";
-  KeyValuePropertyType2["LINK"] = "link";
-  KeyValuePropertyType2["BOOLEAN"] = "boolean";
-  KeyValuePropertyType2["TAGS"] = "tags";
-  KeyValuePropertyType2["EMAIL"] = "email";
-  return KeyValuePropertyType2;
-})(KeyValuePropertyType || {});
-const DEFAULT_TABLE_DATA = [
-  {
-    photo: "https://cdn.superblocks.com/sample-data/rachel_kim.jpg",
-    name: "Rachel Kim",
-    email: "rachel.kim89@gmail.com",
-    role: "Vendor Partner",
-    company: "Urban Threads Co.",
-    status: "Active",
-    date_joined: "2023-04-12",
-    last_activity: "2025-06-07T16:20:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/daniel_vargas.jpg",
-    name: "Daniel Vargas",
-    email: "dvargas1984@yahoo.com",
-    role: "Logistics Contact",
-    company: "Vargas Freight Ltd.",
-    status: "Pending",
-    date_joined: "2024-01-23",
-    last_activity: "2025-05-30T13:45:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/sophie_liu.jpg",
-    name: "Sophie Liu",
-    email: "sophie.liu.personal@gmail.com",
-    role: "Retail Manager",
-    company: "Modern Goods",
-    status: "Active",
-    date_joined: "2022-09-10",
-    last_activity: "2025-06-08T09:03:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/omar_el-sayed.jpg",
-    name: "Omar El-Sayed",
-    email: "omarsayed78@hotmail.com",
-    role: "Accounts Payable",
-    company: "Sayed Textiles",
-    status: "Inactive",
-    date_joined: "2021-06-05",
-    last_activity: "2024-12-18T11:40:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/grace_nguyen.jpg",
-    name: "Grace Nguyen",
-    email: "gracenguyen23@icloud.com",
-    role: "Product Supplier",
-    company: "Green Earth Supplies",
-    status: "Active",
-    date_joined: "2023-11-03",
-    last_activity: "2025-06-08T17:28:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/alex_romero.jpg",
-    name: "Alex Romero",
-    email: "alex.romero@gmail.com",
-    role: "Client Account Owner",
-    company: "Romero & Co.",
-    status: "Suspended",
-    date_joined: "2022-02-28",
-    last_activity: "2025-03-11T08:20:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/lena_schmidt.jpg",
-    name: "Lena Schmidt",
-    email: "lena_schmidt92@gmx.de",
-    role: "Wholesale Contact",
-    company: "Schmidt Imports",
-    status: "Active",
-    date_joined: "2021-12-01",
-    last_activity: "2025-06-06T21:10:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/devon_price.jpg",
-    name: "Devon Price",
-    email: "devon.price22@aol.com",
-    role: "Fulfillment Liaison",
-    company: "DepotLink",
-    status: "Active",
-    date_joined: "2024-05-17",
-    last_activity: "2025-06-08T10:42:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/isabella_rossi.jpg",
-    name: "Isabella Rossi",
-    email: "bella.rossi@gmail.com",
-    role: "Procurement Agent",
-    company: "Rossi Global Sourcing",
-    status: "Pending",
-    date_joined: "2023-07-19",
-    last_activity: "2025-05-29T14:05:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/tariq_khan.jpg",
-    name: "Tariq Khan",
-    email: "tariq.khan92@protonmail.com",
-    role: "International Ops Lead",
-    company: "CrossPort Trade Inc.",
-    status: "Active",
-    date_joined: "2022-11-08",
-    last_activity: "2025-06-08T16:11:00Z"
-  },
-  {
-    photo: "https://cdn.superblocks.com/sample-data/emily_zhang.jpg",
-    name: "Emily Zhang",
-    email: "emilyzhang.home@gmail.com",
-    role: "Logistics Coordinator",
-    company: "Zhang Export Ltd.",
-    status: "Active",
-    date_joined: "2023-03-12",
-    last_activity: "2025-06-08T19:02:00Z"
-  }
-];
-const DEFAULT_TABLE_COLUMNS = {
-  name: {
-    columnType: "text",
-    label: "Name"
-  },
-  email: {
-    columnType: "email",
-    label: "Email"
-  },
-  role: {
-    columnType: "text",
-    label: "Role"
-  },
-  company: {
-    columnType: "text",
-    label: "Company"
-  },
-  status: {
-    columnType: "tags",
-    tagDisplayConfig: {
-      Active: {
-        color: "#14CDB733"
-      },
-      Pending: {
-        color: "#FF9F3533"
-      },
-      Inactive: {
-        color: "#a6a0a033"
-      },
-      Suspended: {
-        color: "#FF62A433"
-      }
-    },
-    label: "Status"
-  },
-  date_joined: {
-    columnType: "date",
-    inputFormat: "YYYY-MM-DD",
-    outputFormat: "MM-DD-YYYY",
-    label: "Date joined"
-  },
-  last_activity: {
-    columnType: "date",
-    inputFormat: "YYYY-MM-DDTHH:mm:ssZ",
-    outputFormat: "MM-DD-YYYY",
-    label: "Last activity"
-  },
-  photo: {
-    columnType: "image",
-    label: "Photo",
-    imageBorderRadius: {
-      topLeft: Dim.px(16),
-      topRight: Dim.px(16),
-      bottomLeft: Dim.px(16),
-      bottomRight: Dim.px(16)
-    }
-  }
-};
-const DEFAULT_TABLE_KEYS = Object.keys(DEFAULT_TABLE_COLUMNS);
-const CLEARED_TABLE_COLUMNS = DEFAULT_TABLE_KEYS.reduce(
-  (acc, key2) => {
-    acc[key2] = void 0;
-    return acc;
-  },
-  {}
-);
 function getParentInfo(parent) {
   const parentComponentMeta = getEditStore().runtimeEntitiesManager.getAnyEditorWidgetMeta(parent.id);
   const isParentGridLike = isWidgetGrid(parentComponentMeta);
@@ -128166,316 +128012,60 @@ function getParentInfo(parent) {
     type: parentComponentMeta == null ? void 0 : parentComponentMeta.type
   };
 }
-function getModalChildren(modalName) {
-  return [
-    {
-      tagName: "Container",
-      properties: {
-        variant: Property.Static("none"),
-        width: Property.Dimension(Dim.fill()),
-        layout: Property.Static("horizontal"),
-        horizontalAlign: Property.Static("left")
-      },
-      children: [
-        {
-          tagName: "Text",
-          properties: {
-            text: Property.Static("Modal Title"),
-            textStyle: Property.Static({
-              variant: "heading3"
-            })
-          },
-          children: []
-        }
-      ]
-    },
-    {
-      tagName: "Container",
-      properties: {
-        variant: Property.Static("none"),
-        width: Property.Dimension(Dim.fill()),
-        horizontalAlign: Property.Static("left")
-      },
-      children: []
-    },
-    {
-      tagName: "Container",
-      properties: {
-        spacing: Property.Dimension(Dim.px(8)),
-        width: Property.Dimension(Dim.fill()),
-        variant: Property.Static("none"),
-        layout: Property.Static("horizontal"),
-        horizontalAlign: Property.Static("right")
-      },
-      children: [
-        {
-          tagName: "Button",
-          properties: {
-            label: Property.Static("Cancel"),
-            variant: Property.Static("secondary"),
-            onClick: Property.Event([
-              {
-                id: "closeModal",
-                type: TriggerStepType.CONTROL_MODAL,
-                name: modalName,
-                action: "close"
-              }
-            ])
-          },
-          children: []
-        },
-        {
-          tagName: "Button",
-          properties: {
-            label: Property.Static("Confirm")
-          },
-          children: []
-        }
-      ]
-    }
-  ];
-}
-function getSlideoutChildren() {
-  return [
-    {
-      tagName: "Container",
-      properties: {
-        variant: Property.Static("none"),
-        width: Property.Dimension(Dim.fill()),
-        layout: Property.Static("horizontal"),
-        horizontalAlign: Property.Static("left")
-      },
-      children: [
-        {
-          tagName: "Text",
-          properties: {
-            text: Property.Static("Slideout Title"),
-            textStyle: Property.Static({
-              variant: "heading3"
-            })
-          },
-          children: []
-        }
-      ]
-    },
-    {
-      tagName: "Container",
-      properties: {
-        variant: Property.Static("none"),
-        width: Property.Dimension(Dim.fill()),
-        height: Property.Dimension(Dim.fill()),
-        horizontalAlign: Property.Static("left"),
-        layout: Property.Static("vertical")
-      },
-      children: []
-    }
-  ];
-}
-function getSectionChildren() {
-  return [
-    {
-      tagName: "Column",
-      properties: {
-        width: Property.Dimension(Dim.fill()),
-        height: Property.Dimension(Dim.fill())
-      },
-      children: []
-    }
-  ];
-}
-function getTriggerComponent({
+const generateUniqueName = (componentType) => {
+  const baseName = componentType;
+  let counter2 = 1;
+  let name = `${baseName}${counter2}`;
+  while (rootStore.nameManager.hasEntityWithName(name)) {
+    counter2++;
+    name = `${baseName}${counter2}`;
+  }
+  return name;
+};
+function getBinding({
   componentType,
-  parentElement,
-  primaryComponentName,
-  triggerComponentId
+  editorTemplateCreateRequest,
+  parentInfo
 }) {
-  if (componentType === "Modal") {
-    return {
-      parentElement,
-      tagName: "Button",
-      id: triggerComponentId,
-      properties: {
-        label: Property.Static("Open Modal"),
-        onClick: Property.Event([
-          {
-            id: "openModal",
-            type: TriggerStepType.CONTROL_MODAL,
-            name: primaryComponentName,
-            action: "open"
-          }
-        ])
-      },
-      children: []
-    };
-  } else if (componentType === "Slideout") {
-    return {
-      parentElement,
-      tagName: "Button",
-      id: triggerComponentId,
-      properties: {
-        label: Property.Static("Open Slideout"),
-        onClick: Property.Event([
-          {
-            id: "openSlideout",
-            type: TriggerStepType.CONTROL_SLIDEOUT,
-            name: primaryComponentName,
-            action: "open"
-          }
-        ])
-      },
-      children: []
-    };
-  }
-  throw new Error("Unhandled component type: " + componentType);
-}
-function getComponentBaseProperties(componentType, parentInfo) {
-  var _a2, _b2, _c2, _d2;
   const customComponents = rootStore.componentRegistry.customComponentList;
-  let properties2 = {};
-  let children = [];
-  const editorTemplates = rootStore.componentRegistry.getEditorTemplates(componentType);
-  if (editorTemplates && editorTemplates.length > 1) {
-    throw new Error(
-      `Multiple editor templates are not supported yet. Found ${editorTemplates.length} for component type: ${componentType}.`
-    );
-  }
-  const context2 = {
-    generateUniqueName: getUniqueName
-  };
-  const editorTemplateOnCreate = (_b2 = (_a2 = editorTemplates == null ? void 0 : editorTemplates[0]) == null ? void 0 : _a2.create) == null ? void 0 : _b2.call(_a2, context2);
-  if (editorTemplateOnCreate && Array.isArray(editorTemplateOnCreate)) {
-    throw new Error(
-      `Multiple creates for on editor template are not supported yet. Found ${editorTemplateOnCreate.length} for component type: ${componentType}.`
-    );
-  }
-  if (editorTemplateOnCreate && editorTemplateOnCreate.bind) {
-    properties2.name = Property.Static(editorTemplateOnCreate.bind);
+  if ((editorTemplateCreateRequest == null ? void 0 : editorTemplateCreateRequest.generateBinding) === true) {
+    return Property.Static(generateUniqueName(componentType));
+  } else if (typeof (editorTemplateCreateRequest == null ? void 0 : editorTemplateCreateRequest.generateBinding) === "string") {
+    return Property.Static(editorTemplateCreateRequest.generateBinding);
   } else {
     const shouldProvideAName = (
-      // TODO: migrate these components
-      componentType === "Dropdown" || componentType === "DatePicker" || componentType === "Checkbox" || componentType === "Switch" || componentType === "Modal" || componentType === "Slideout" || componentType === "Table" || // All components dropped in a grid
+      // All components dropped in a grid
       parentInfo.isGridLike || // All custom components
       customComponents.includes(componentType)
     );
     if (shouldProvideAName) {
-      properties2.name = Property.Static(getUniqueName(componentType));
+      return Property.Static(generateUniqueName(componentType));
     }
+    return void 0;
   }
-  const isContainer = componentType === "Section" || componentType === "Column" || componentType === "Container" || componentType === "Modal" || componentType === "Slideout";
-  if (isContainer && componentType !== "Modal" && componentType !== "Slideout") {
-    properties2.width = Property.Dimension(Dim.fill());
-  }
-  switch (componentType) {
-    case "Text":
-      properties2.text = Property.Static("Hello, world!");
-      break;
-    case "Button":
-      properties2.label = Property.Static("Submit");
-      properties2.onClick = Property.Event([
-        {
-          type: TriggerStepType.RUN_JS,
-          code: "() => console.log('Button clicked')",
-          id: "buttonClick"
-        }
-      ]);
-      break;
-    case "Image":
-      properties2.src = Property.Static(
-        "https://lowcode.s3.us-west-2.amazonaws.com/eilish-billie.jpeg"
-      );
-      properties2.fillContainer = Property.Static(true);
-      properties2.width = parentInfo.isGridLike ? Property.Dimension(Dim.col(4)) : Property.Dimension(Dim.px(300));
-      properties2.height = Property.Dimension(Dim.fit());
-      break;
-    case "KeyValue":
-      properties2.sourceData = Property.Static({
-        id: 123,
-        name: "John Smith",
-        description: "John has been cardholder for 3 years",
-        createdDate: "10-23-2012"
-      });
-      properties2.propertiesOrder = Property.Static([
-        "id",
-        "name",
-        "description",
-        "createdDate"
-      ]);
-      properties2.properties = Property.Static({
-        id: {
-          id: "id",
-          key: "id",
-          type: KeyValuePropertyType.NUMBER,
-          isVisible: true,
-          isDerived: false
-        },
-        name: {
-          id: "name",
-          key: "name",
-          type: KeyValuePropertyType.TEXT,
-          isVisible: true,
-          isDerived: false
-        },
-        description: {
-          id: "description",
-          key: "description",
-          type: KeyValuePropertyType.TEXT,
-          isVisible: true,
-          isDerived: false
-        },
-        createdDate: {
-          id: "createdDate",
-          key: "createdDate",
-          type: KeyValuePropertyType.DATE,
-          isVisible: true,
-          isDerived: false
-        }
-      });
-      break;
-    case "Dropdown":
-      properties2.label = Property.Static("Label");
-      properties2.options = Property.Computed([
-        { label: "All statuses", value: "all" },
-        { label: "Pending", value: "pending" },
-        { label: "Processing", value: "processing" },
-        { label: "Completed", value: "completed" },
-        { label: "Failed", value: "failed" },
-        { label: "Cancelled", value: "cancelled" },
-        { label: "Rejected", value: "rejected" },
-        { label: "On hold", value: "on_hold" }
-      ]);
-      break;
-    case "Modal":
-      children = getModalChildren((_c2 = properties2.name) == null ? void 0 : _c2.value);
-      break;
-    case "Slideout":
-      children = getSlideoutChildren();
-      break;
-    case "Checkbox":
-      properties2.label = Property.Static("Label");
-      break;
-    case "DatePicker":
-      properties2.label = Property.Static("Label");
-      properties2.defaultDate = Property.Static((/* @__PURE__ */ new Date()).toISOString());
-      break;
-    case "Switch":
-      properties2.label = Property.Static("Label");
-      break;
-    case "Section":
-      children = getSectionChildren();
-      break;
-    case "Table":
-      properties2.tableData = Property.Static(DEFAULT_TABLE_DATA);
-      properties2.columns = Property.Static(DEFAULT_TABLE_COLUMNS);
-      properties2.header = Property.Static("Customers");
-      properties2.searchPlaceholder = Property.Static("Search...");
-      break;
+}
+function getComponentBaseProperties(componentType, parentInfo, editorTemplateCreateRequest) {
+  let properties2 = {};
+  const editorTemplates = rootStore.componentRegistry.getEditorTemplates(componentType);
+  if (editorTemplates && editorTemplates.length > 1) {
+    throw new Error(
+      `Multiple editor templates are not supported yet. Found ${editorTemplates.length} for component type: ${componentType}.`
+    );
   }
-  if (editorTemplateOnCreate == null ? void 0 : editorTemplateOnCreate.properties) {
+  if (editorTemplateCreateRequest == null ? void 0 : editorTemplateCreateRequest.properties) {
     properties2 = {
       ...properties2,
-      ...editorTemplateOnCreate.properties
+      ...editorTemplateCreateRequest.properties
     };
   }
+  const binding = getBinding({
+    componentType,
+    editorTemplateCreateRequest,
+    parentInfo
+  });
+  if (binding) {
+    properties2.name = binding;
+  }
   const { width, height, ...restProperties } = properties2;
   const safeDimensions = parentInfo.isGridLike ? filterSafeGridDimensionProperties({
     width: width == null ? void 0 : width.value,
@@ -128489,20 +128079,9 @@ function getComponentBaseProperties(componentType, parentInfo) {
       ...restProperties,
       ...safeDimensions
     },
-    children,
-    name: (_d2 = properties2.name) == null ? void 0 : _d2.value
+    children: (editorTemplateCreateRequest == null ? void 0 : editorTemplateCreateRequest.children) ?? []
   };
 }
-const getUniqueName = (componentType) => {
-  const baseName = componentType;
-  let counter2 = 1;
-  let name = `${baseName}${counter2}`;
-  while (rootStore.nameManager.hasEntityWithName(name)) {
-    counter2++;
-    name = `${baseName}${counter2}`;
-  }
-  return name;
-};
 function checkComponentForParentTypeBeforeCreating(componentType, parentType) {
   if (componentType === "Section" && parentType !== "Page") {
     return false;
@@ -128512,14 +128091,35 @@ function checkComponentForParentTypeBeforeCreating(componentType, parentType) {
   }
   return true;
 }
+function getCreateAtParentElement(relativeParent, createAt) {
+  if (createAt === "root") {
+    const parentInstanceId = getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(
+      relativeParent.id
+    );
+    const pageComponent = getEditStore().runtimeEntitiesManager.getClosestAncestorByType(
+      parentInstanceId,
+      "Page"
+    );
+    if (!pageComponent) {
+      throw new Error(
+        `Page component not found for parent: ${relativeParent.id}`
+      );
+    }
+    return { source: { id: pageComponent.sourceId } };
+  } else {
+    return { source: relativeParent };
+  }
+}
 async function createComponent({
   componentType,
   parent,
   scopeName,
   baseProperties = {},
-  skipTriggerCreation,
+  skipSecondaryComponentsCreation,
+  // will only create the primary component. Secondary components are usually trigger components (e.g: Button that triggers the modal)
   otherComponentsUpdates
 }) {
+  var _a2, _b2;
   const parentInfo = getParentInfo(parent);
   if (!checkComponentForParentTypeBeforeCreating(componentType, parentInfo.type)) {
     console.error(
@@ -128527,88 +128127,106 @@ async function createComponent({
     );
     return;
   }
-  const willWrapInSectionAndColumn = shouldWrapInSectionAndColumn(
-    componentType,
-    parentInfo.type
-  );
-  const isGridLike = willWrapInSectionAndColumn && componentType !== "Column" ? true : parentInfo.isGridLike;
-  const tagName = componentType;
-  const {
-    properties: propertiesFromType,
-    children,
-    name
-  } = getComponentBaseProperties(componentType, {
-    // will wrap in a column with grid layout if dropping on a page or section directly
-    isGridLike
-  });
-  const properties2 = {
-    ...propertiesFromType,
-    ...baseProperties
-  };
-  const parentElement = { source: parent };
-  const isDetachedComponent = DetachedComponentTypes.has(componentType);
-  const needTriggerComponent = isDetachedComponent && !skipTriggerCreation;
+  const editorTemplates = rootStore.componentRegistry.getEditorTemplates(componentType);
+  if (editorTemplates && editorTemplates.length > 1) {
+    throw new Error(
+      `Multiple editor templates are not supported yet. Found ${editorTemplates.length} for component type: ${componentType}.`
+    );
+  }
+  const context2 = {
+    generateUniqueName,
+    parentInfo
+  };
+  const editorTemplateCreateRequest = (_b2 = (_a2 = editorTemplates == null ? void 0 : editorTemplates[0]) == null ? void 0 : _a2.create) == null ? void 0 : _b2.call(_a2, context2);
+  const primaryEditorTemplateCreateRequest = Array.isArray(
+    editorTemplateCreateRequest
+  ) ? editorTemplateCreateRequest[0] : editorTemplateCreateRequest;
+  if (editorTemplateCreateRequest && (primaryEditorTemplateCreateRequest == null ? void 0 : primaryEditorTemplateCreateRequest.type) !== componentType) {
+    throw new Error(
+      `When defining a ${Array.isArray(editorTemplateCreateRequest) ? "multiple" : "single"} component to be created on an EditorTemplate, the type must match with the component being created. got: ${primaryEditorTemplateCreateRequest == null ? void 0 : primaryEditorTemplateCreateRequest.type} when it should have been ${componentType}`
+    );
+  }
+  const editorTemplateCreateRequests = Array.isArray(
+    editorTemplateCreateRequest
+  ) ? editorTemplateCreateRequest : [editorTemplateCreateRequest];
   const editStore2 = getEditStore();
-  const parentInstanceId = editStore2.runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(
-    parent.id
-  );
-  const pageComponent = editStore2.runtimeEntitiesManager.getClosestAncestorByType(
-    parentInstanceId,
-    "Page"
-  );
-  const pageSource = {
-    source: {
-      id: pageComponent == null ? void 0 : pageComponent.sourceId
-    }
-  };
-  let primaryComponent = {
-    parentElement: isDetachedComponent ? pageSource : parentElement,
-    tagName,
-    properties: properties2,
-    children,
-    scopeName,
-    id: editStore2.operationManager.generateSourceId()
-  };
-  if (willWrapInSectionAndColumn) {
-    primaryComponent = wrapInSectionColumnIfDroppingOnPage(
-      primaryComponent,
+  function editorTemplateCreateRequestToInternalCreateRequest({
+    editorTemplateCreateRequest: editorTemplateCreateRequest2,
+    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 { properties: propertiesFromType, children } = getComponentBaseProperties(
+      type5,
+      {
+        // will wrap in a column with grid layout if dropping on a page or section directly
+        isGridLike
+      },
+      editorTemplateCreateRequest2
+    );
+    const properties2 = {
+      ...propertiesFromType,
+      ...baseProperties2
+    };
+    const createAtParentElement = getCreateAtParentElement(
+      parent,
+      editorTemplateCreateRequest2 == null ? void 0 : editorTemplateCreateRequest2.createAt
+    );
+    let primaryComponent = {
+      parentElement: createAtParentElement,
+      tagName: type5,
+      properties: properties2,
+      children,
+      scopeName,
+      id: editStore2.operationManager.generateSourceId()
+    };
+    if (willWrapInSectionAndColumn) {
+      primaryComponent = wrapInSectionColumnIfDroppingOnPage(
+        primaryComponent,
+        parentInfo.type
+      );
+    }
+    return primaryComponent;
   }
-  const performOtherComponentsUpdates = (otherComponentsUpdates2) => {
-    Object.entries(otherComponentsUpdates2).forEach(([sourceId, updates]) => {
-      editStore2.operationManager.setWidgetProperties({
-        sourceId,
-        properties: updates
+  const createRequests = editorTemplateCreateRequests.map(
+    (editorTemplateCreateRequest2, index2) => editorTemplateCreateRequestToInternalCreateRequest({
+      editorTemplateCreateRequest: editorTemplateCreateRequest2,
+      baseProperties: index2 === 0 ? baseProperties : {}
+      // baseProperties are only applied to the primary component
+    })
+  );
+  const hasOtherComponentsUpdates = otherComponentsUpdates && Object.keys(otherComponentsUpdates).length > 0;
+  const hasMultipleCreateComponents = editorTemplateCreateRequests.length > 1 && !skipSecondaryComponentsCreation;
+  const isBatchOperation = hasOtherComponentsUpdates || hasMultipleCreateComponents;
+  if (isBatchOperation) {
+    const performOtherComponentsUpdates = (otherComponentsUpdates2) => {
+      Object.entries(otherComponentsUpdates2).forEach(([sourceId, updates]) => {
+        editStore2.operationManager.setWidgetProperties({
+          sourceId,
+          properties: updates
+        });
       });
-    });
-  };
-  if (needTriggerComponent) {
-    const triggerComponent = getTriggerComponent({
-      componentType,
-      parentElement,
-      primaryComponentName: name,
-      triggerComponentId: editStore2.operationManager.generateSourceId()
-    });
+    };
     editStore2.operationManager.batchUpdate(() => {
-      editStore2.operationManager.createComponent(triggerComponent);
-      editStore2.operationManager.createComponent(primaryComponent);
-      if (otherComponentsUpdates) {
+      if (skipSecondaryComponentsCreation) {
+        editStore2.operationManager.createComponent(createRequests[0]);
+      } else {
+        createRequests.forEach((createRequest) => {
+          editStore2.operationManager.createComponent(createRequest);
+        });
+      }
+      if (hasOtherComponentsUpdates) {
         performOtherComponentsUpdates(otherComponentsUpdates);
       }
     });
-    return triggerComponent.id;
   } else {
-    if (otherComponentsUpdates) {
-      editStore2.operationManager.batchUpdate(() => {
-        editStore2.operationManager.createComponent(primaryComponent);
-        performOtherComponentsUpdates(otherComponentsUpdates);
-      });
-    } else {
-      editStore2.operationManager.createComponent(primaryComponent);
-    }
-    return primaryComponent.id;
+    editStore2.operationManager.createComponent(createRequests[0]);
   }
+  return createRequests.at(-1).id;
 }
 function wrapInSectionColumnIfDroppingOnPage(primaryComponent, parentType) {
   const { properties: sectionProperties } = getComponentBaseProperties(
@@ -130834,6 +130452,21 @@ function useTypographyStyling({
     style: style2
   };
 }
+const editorTemplate$c = {
+  create: () => ({
+    type: "Button",
+    properties: {
+      label: Property.Static("Button"),
+      onClick: Property.Event([
+        {
+          type: TriggerStepType.RUN_JS,
+          code: "() => console.log('Button clicked')",
+          id: "buttonClick"
+        }
+      ])
+    }
+  })
+};
 const DEFAULT_ICON_SPACING = 8;
 const DEFAULT_ICON_SIZE = 16;
 const ICON_POSITION_OPTIONS = [
@@ -131384,7 +131017,7 @@ const Button$3 = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$c);
 const useAlignmentStyles = ({
   layout,
   verticalAlign,
@@ -131786,6 +131419,29 @@ const InternalVStack = (props2) => {
 const InternalHStack = (props2) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InternalStack, { direction: "row", ...props2 });
 };
+function getSectionChildren() {
+  return [
+    {
+      tagName: "Column",
+      properties: {
+        width: Property.Dimension(Dim.fill()),
+        height: Property.Dimension(Dim.fill())
+      },
+      children: []
+    }
+  ];
+}
+const editorTemplate$b = {
+  create: () => {
+    return {
+      type: "Section",
+      children: getSectionChildren(),
+      properties: {
+        width: Property.Dimension(Dim.fill())
+      }
+    };
+  }
+};
 const DEFAULT_SECTION_PADDING = {
   left: Dim.px(0),
   right: Dim.px(0),
@@ -131862,7 +131518,7 @@ const Section2 = registerComponent$1(
       }
     );
   }
-);
+).addEditorTemplate(editorTemplate$b);
 const generateClassName = (seed2) => {
   return `superblocks_widget_${seed2}`;
 };
@@ -132172,6 +131828,14 @@ const StaticComponent = ({
   }, [staticHeight]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...style2, width: "100%", height: "100%" }, children });
 };
+const editorTemplate$a = {
+  create: () => ({
+    type: "Container",
+    properties: {
+      width: Property.Dimension(Dim.fill())
+    }
+  })
+};
 const propertiesDefinition$g = {
   layout: Section$1.category(PropsPanelCategory.Layout).add(
     containerLayout({
@@ -132334,7 +131998,15 @@ const Container = registerComponent$1(
     propertiesDefinition: propertiesDefinition$g
   },
   InternalContainer
-);
+).addEditorTemplate(editorTemplate$a);
+const editorTemplate$9 = {
+  create: () => ({
+    type: "Container",
+    properties: {
+      width: Property.Dimension(Dim.fill())
+    }
+  })
+};
 const propertiesDefinition$f = {
   layout: Section$1.category(PropsPanelCategory.Layout).add(
     containerLayout({
@@ -132400,11 +132072,11 @@ const Column = registerComponent$1(
       }
     );
   }
-);
-const editorTemplate = {
-  create: (context2) => ({
+).addEditorTemplate(editorTemplate$9);
+const editorTemplate$8 = {
+  create: () => ({
     type: "Input",
-    bind: context2.generateUniqueName("Input"),
+    generateBinding: true,
     properties: {
       label: Property.Static("Label")
     }
@@ -140074,7 +139746,7 @@ const Input2 = registerComponent$1(
       }
     ) });
   }
-).addEditorTemplate(editorTemplate);
+).addEditorTemplate(editorTemplate$8);
 const propertiesDefinition$d = {
   contents: Section$1.category(PropsPanelCategory.Content).children({
     columns: Prop.array().readAndWrite().propertiesPanel({
@@ -141943,6 +141615,14 @@ const AutolinkedText = (props2) => {
     }
   );
 };
+const editorTemplate$7 = {
+  create: () => ({
+    type: "Text",
+    properties: {
+      text: Property.Static("Hello, world!")
+    }
+  })
+};
 var button$1 = {};
 var interopRequireDefault = { exports: {} };
 var hasRequiredInteropRequireDefault;
@@ -147140,7 +146820,7 @@ const Text$1 = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$7);
 function useDialogEditing(props2) {
   const { isOpen, instanceId } = props2;
   const { features, isEditing } = useEditor();
@@ -147204,6 +146884,102 @@ function useDialogEditing(props2) {
     prevIsOpenRef.current = isOpen;
   }, [isOpen]);
 }
+function getChildren$1(modalName) {
+  return [
+    {
+      tagName: "Container",
+      properties: {
+        variant: Property.Static("none"),
+        width: Property.Dimension(Dim.fill()),
+        layout: Property.Static("horizontal"),
+        horizontalAlign: Property.Static("left")
+      },
+      children: [
+        {
+          tagName: "Text",
+          properties: {
+            text: Property.Static("Modal Title"),
+            textStyle: Property.Static({
+              variant: "heading3"
+            })
+          },
+          children: []
+        }
+      ]
+    },
+    {
+      tagName: "Container",
+      properties: {
+        variant: Property.Static("none"),
+        width: Property.Dimension(Dim.fill()),
+        horizontalAlign: Property.Static("left")
+      },
+      children: []
+    },
+    {
+      tagName: "Container",
+      properties: {
+        spacing: Property.Dimension(Dim.px(8)),
+        width: Property.Dimension(Dim.fill()),
+        variant: Property.Static("none"),
+        layout: Property.Static("horizontal"),
+        horizontalAlign: Property.Static("right")
+      },
+      children: [
+        {
+          tagName: "Button",
+          properties: {
+            label: Property.Static("Cancel"),
+            variant: Property.Static("secondary"),
+            onClick: Property.Event([
+              {
+                id: "closeModal",
+                type: TriggerStepType.CONTROL_MODAL,
+                name: modalName,
+                action: "close"
+              }
+            ])
+          },
+          children: []
+        },
+        {
+          tagName: "Button",
+          properties: {
+            label: Property.Static("Confirm")
+          },
+          children: []
+        }
+      ]
+    }
+  ];
+}
+const editorTemplate$6 = {
+  create: (context2) => {
+    const modalName = context2.generateUniqueName("Modal");
+    return [
+      {
+        type: "Modal",
+        generateBinding: modalName,
+        children: getChildren$1(modalName),
+        createAt: "root"
+      },
+      {
+        type: "Button",
+        properties: {
+          label: Property.Static("Open Modal"),
+          onClick: Property.Event([
+            {
+              id: "openModal",
+              type: TriggerStepType.CONTROL_MODAL,
+              name: modalName,
+              action: "open"
+            }
+          ])
+        }
+      }
+    ];
+  }
+};
 const MODAL_BORDER_RADIUS = 4;
 const MODAL_WIDTH_PRESETS = {
   // in percentages
@@ -147549,7 +147325,70 @@ const Modal = registerComponent$1(
       }
     );
   }
-);
+).addEditorTemplate(editorTemplate$6);
+function getChildren() {
+  return [
+    {
+      tagName: "Container",
+      properties: {
+        variant: Property.Static("none"),
+        width: Property.Dimension(Dim.fill()),
+        layout: Property.Static("horizontal"),
+        horizontalAlign: Property.Static("left")
+      },
+      children: [
+        {
+          tagName: "Text",
+          properties: {
+            text: Property.Static("Slideout Title"),
+            textStyle: Property.Static({
+              variant: "heading3"
+            })
+          },
+          children: []
+        }
+      ]
+    },
+    {
+      tagName: "Container",
+      properties: {
+        variant: Property.Static("none"),
+        width: Property.Dimension(Dim.fill()),
+        height: Property.Dimension(Dim.fill()),
+        horizontalAlign: Property.Static("left"),
+        layout: Property.Static("vertical")
+      },
+      children: []
+    }
+  ];
+}
+const editorTemplate$5 = {
+  create: (context2) => {
+    const slideoutName = context2.generateUniqueName("Slideout");
+    return [
+      {
+        type: "Slideout",
+        generateBinding: slideoutName,
+        children: getChildren(),
+        createAt: "root"
+      },
+      {
+        type: "Button",
+        properties: {
+          label: Property.Static("Open Slideout"),
+          onClick: Property.Event([
+            {
+              id: "openSlideout",
+              type: TriggerStepType.CONTROL_SLIDEOUT,
+              name: slideoutName,
+              action: "open"
+            }
+          ])
+        }
+      }
+    ];
+  }
+};
 const SlideoutSize = {
   xsmall: "xsmall",
   small: "small",
@@ -149903,7 +149742,7 @@ const Slideout = registerComponent$1(
       }
     );
   }
-);
+).addEditorTemplate(editorTemplate$5);
 const RowDensity = {
   "extra-small": "extra-small",
   small: "small",
@@ -150080,6 +149919,196 @@ const tagColorPalette = [
   "#9D585833",
   "#FF484833"
 ];
+const DEFAULT_TABLE_DATA = [
+  {
+    photo: "https://cdn.superblocks.com/sample-data/rachel_kim.jpg",
+    name: "Rachel Kim",
+    email: "rachel.kim89@gmail.com",
+    role: "Vendor Partner",
+    company: "Urban Threads Co.",
+    status: "Active",
+    date_joined: "2023-04-12",
+    last_activity: "2025-06-07T16:20:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/daniel_vargas.jpg",
+    name: "Daniel Vargas",
+    email: "dvargas1984@yahoo.com",
+    role: "Logistics Contact",
+    company: "Vargas Freight Ltd.",
+    status: "Pending",
+    date_joined: "2024-01-23",
+    last_activity: "2025-05-30T13:45:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/sophie_liu.jpg",
+    name: "Sophie Liu",
+    email: "sophie.liu.personal@gmail.com",
+    role: "Retail Manager",
+    company: "Modern Goods",
+    status: "Active",
+    date_joined: "2022-09-10",
+    last_activity: "2025-06-08T09:03:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/omar_el-sayed.jpg",
+    name: "Omar El-Sayed",
+    email: "omarsayed78@hotmail.com",
+    role: "Accounts Payable",
+    company: "Sayed Textiles",
+    status: "Inactive",
+    date_joined: "2021-06-05",
+    last_activity: "2024-12-18T11:40:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/grace_nguyen.jpg",
+    name: "Grace Nguyen",
+    email: "gracenguyen23@icloud.com",
+    role: "Product Supplier",
+    company: "Green Earth Supplies",
+    status: "Active",
+    date_joined: "2023-11-03",
+    last_activity: "2025-06-08T17:28:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/alex_romero.jpg",
+    name: "Alex Romero",
+    email: "alex.romero@gmail.com",
+    role: "Client Account Owner",
+    company: "Romero & Co.",
+    status: "Suspended",
+    date_joined: "2022-02-28",
+    last_activity: "2025-03-11T08:20:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/lena_schmidt.jpg",
+    name: "Lena Schmidt",
+    email: "lena_schmidt92@gmx.de",
+    role: "Wholesale Contact",
+    company: "Schmidt Imports",
+    status: "Active",
+    date_joined: "2021-12-01",
+    last_activity: "2025-06-06T21:10:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/devon_price.jpg",
+    name: "Devon Price",
+    email: "devon.price22@aol.com",
+    role: "Fulfillment Liaison",
+    company: "DepotLink",
+    status: "Active",
+    date_joined: "2024-05-17",
+    last_activity: "2025-06-08T10:42:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/isabella_rossi.jpg",
+    name: "Isabella Rossi",
+    email: "bella.rossi@gmail.com",
+    role: "Procurement Agent",
+    company: "Rossi Global Sourcing",
+    status: "Pending",
+    date_joined: "2023-07-19",
+    last_activity: "2025-05-29T14:05:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/tariq_khan.jpg",
+    name: "Tariq Khan",
+    email: "tariq.khan92@protonmail.com",
+    role: "International Ops Lead",
+    company: "CrossPort Trade Inc.",
+    status: "Active",
+    date_joined: "2022-11-08",
+    last_activity: "2025-06-08T16:11:00Z"
+  },
+  {
+    photo: "https://cdn.superblocks.com/sample-data/emily_zhang.jpg",
+    name: "Emily Zhang",
+    email: "emilyzhang.home@gmail.com",
+    role: "Logistics Coordinator",
+    company: "Zhang Export Ltd.",
+    status: "Active",
+    date_joined: "2023-03-12",
+    last_activity: "2025-06-08T19:02:00Z"
+  }
+];
+const DEFAULT_TABLE_COLUMNS = {
+  name: {
+    columnType: "text",
+    label: "Name"
+  },
+  email: {
+    columnType: "email",
+    label: "Email"
+  },
+  role: {
+    columnType: "text",
+    label: "Role"
+  },
+  company: {
+    columnType: "text",
+    label: "Company"
+  },
+  status: {
+    columnType: "tags",
+    tagDisplayConfig: {
+      Active: {
+        color: "#14CDB733"
+      },
+      Pending: {
+        color: "#FF9F3533"
+      },
+      Inactive: {
+        color: "#a6a0a033"
+      },
+      Suspended: {
+        color: "#FF62A433"
+      }
+    },
+    label: "Status"
+  },
+  date_joined: {
+    columnType: "date",
+    inputFormat: "YYYY-MM-DD",
+    outputFormat: "MM-DD-YYYY",
+    label: "Date joined"
+  },
+  last_activity: {
+    columnType: "date",
+    inputFormat: "YYYY-MM-DDTHH:mm:ssZ",
+    outputFormat: "MM-DD-YYYY",
+    label: "Last activity"
+  },
+  photo: {
+    columnType: "image",
+    label: "Photo",
+    imageBorderRadius: {
+      topLeft: Dim.px(16),
+      topRight: Dim.px(16),
+      bottomLeft: Dim.px(16),
+      bottomRight: Dim.px(16)
+    }
+  }
+};
+const DEFAULT_TABLE_KEYS = Object.keys(DEFAULT_TABLE_COLUMNS);
+const CLEARED_TABLE_COLUMNS = DEFAULT_TABLE_KEYS.reduce(
+  (acc, key2) => {
+    acc[key2] = void 0;
+    return acc;
+  },
+  {}
+);
+const editorTemplate$4 = {
+  create: () => ({
+    type: "Table",
+    generateBinding: true,
+    properties: {
+      tableData: Property.Static(DEFAULT_TABLE_DATA),
+      columns: Property.Static(DEFAULT_TABLE_COLUMNS),
+      header: Property.Static("Customers"),
+      searchPlaceholder: Property.Static("Search...")
+    }
+  })
+};
 const CurrencyList = CC.getCodes();
 const tableColumnTypes = [
   {
@@ -159771,14 +159800,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-BIuTbNcY.js"
+            "./allPathsLoader-BYewEWVh.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-BM6L8m2i.js"
+            "./splitPathsBySizeLoader-2oYHBTYy.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -190952,13 +190981,14 @@ const _TableWidget = class _TableWidget extends React__default.Component {
   }
   createTableCell(columnProperties, isHidden2) {
     return (props2) => {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i;
       const currentRowIndex = props2.cell.row.index;
-      ((_a2 = this.props.filteredOrderMap) == null ? void 0 : _a2[currentRowIndex]) ?? currentRowIndex;
+      const originalRowIndex = ((_a2 = this.props.filteredOrderMap) == null ? void 0 : _a2[currentRowIndex]) ?? currentRowIndex;
+      const currentRow = ((_b2 = this.props.tableData) == null ? void 0 : _b2[originalRowIndex]) ?? props2.cell.row.original;
       const cellProperties = getCellProperties(
-        (_c2 = (_b2 = this.props) == null ? void 0 : _b2.cellProps) == null ? void 0 : _c2.textStyle,
+        (_d2 = (_c2 = this.props) == null ? void 0 : _c2.cellProps) == null ? void 0 : _d2.textStyle,
         columnProperties,
-        props2.cell.row.original
+        currentRow
       );
       if (columnProperties.columnType === ColumnType.BUTTON) {
         const buttonProps = {
@@ -190973,10 +191003,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
           buttonBorder: cellProperties.buttonBorder,
           buttonVariant: cellProperties.buttonVariant ?? "primary",
           buttonTextStyle: cellProperties.buttonTextStyle,
-          cellIcon: getPropertyValue(
-            columnProperties.buttonIcon,
-            props2.cell.row.original
-          ),
+          cellIcon: getPropertyValue(columnProperties.buttonIcon, currentRow),
           cellIconPosition: cellProperties.cellIconPosition ?? "left",
           rowDensity: this.props.rowDensity,
           id: columnProperties.id,
@@ -190994,7 +191021,7 @@ const _TableWidget = class _TableWidget extends React__default.Component {
             columnId: columnProperties.id
           },
           maxLinesPerRow: this.props.maxLinesPerRow,
-          tableCellTextStyle: (_d2 = this.props.cellProps) == null ? void 0 : _d2.textStyle,
+          tableCellTextStyle: (_e2 = this.props.cellProps) == null ? void 0 : _e2.textStyle,
           value: props2.cell.value
         });
       } else {
@@ -191004,19 +191031,19 @@ const _TableWidget = class _TableWidget extends React__default.Component {
           columnType: columnProperties.columnType,
           editInputType: columnProperties.editInputType,
           maxLinesPerRow: this.props.maxLinesPerRow,
-          tableCellTextStyle: (_e2 = this.props.cellProps) == null ? void 0 : _e2.textStyle,
+          tableCellTextStyle: (_f2 = this.props.cellProps) == null ? void 0 : _f2.textStyle,
           typographies: this.props.theme.typographies,
           cellProps: {
             // since these are overridden by the cellProperties
             ...columnProperties,
             ...getCellProperties(
-              (_g2 = (_f2 = this.props) == null ? void 0 : _f2.cellProps) == null ? void 0 : _g2.textStyle,
+              (_h2 = (_g2 = this.props) == null ? void 0 : _g2.cellProps) == null ? void 0 : _h2.textStyle,
               columnProperties,
-              props2.cell.row.original
+              currentRow
             ),
             isHidden: isHidden2,
             cellProperties,
-            tagsColorAssignment: (_h2 = this.cachedTagColorAssignment) == null ? void 0 : _h2[columnProperties.id],
+            tagsColorAssignment: (_i = this.cachedTagColorAssignment) == null ? void 0 : _i[columnProperties.id],
             booleanStyleFalse: columnProperties.booleanStyleFalse,
             rowDensity: this.props.rowDensity,
             isFocused: props2.isFocused,
@@ -191472,7 +191499,7 @@ const Table = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$4);
 var NS = getClassNamespace$1();
 var MULTISELECT = "".concat(NS, "-multi-select");
 var MULTISELECT_POPOVER = "".concat(MULTISELECT, "-popover");
@@ -195094,6 +195121,25 @@ const ListItemRenderer = (itemProps) => {
   ) }, itemProps.index);
 };
 ListItemRenderer.displayName = "SelectListItemRenderer";
+const editorTemplate$3 = {
+  create: () => ({
+    type: "Dropdown",
+    generateBinding: true,
+    properties: {
+      label: Property.Static("Label"),
+      options: Property.Computed([
+        { label: "All statuses", value: "all" },
+        { label: "Pending", value: "pending" },
+        { label: "Processing", value: "processing" },
+        { label: "Completed", value: "completed" },
+        { label: "Failed", value: "failed" },
+        { label: "Cancelled", value: "cancelled" },
+        { label: "Rejected", value: "rejected" },
+        { label: "On hold", value: "on_hold" }
+      ])
+    }
+  })
+};
 const DropdownEntireObjectOption = "$$ENTIRE_OBJECT";
 const normalizeFunction$1 = (val, transformationValue) => {
   if (transformationValue === DropdownEntireObjectOption) {
@@ -195655,7 +195701,7 @@ const Dropdown = registerComponent$1(
       }
     ) }) });
   }
-);
+).addEditorTemplate(editorTemplate$3);
 const CustomComponent = registerComponent$1(
   "CustomComponent",
   {
@@ -195829,6 +195875,15 @@ class CheckboxComponent extends React__default.PureComponent {
     );
   }
 }
+const editorTemplate$2 = {
+  create: () => ({
+    type: "Checkbox",
+    generateBinding: true,
+    properties: {
+      label: Property.Static("Label")
+    }
+  })
+};
 const propertiesDefinition$7 = {
   general: Section$1.category(PropsPanelCategory.Content).children({
     label: Prop.string().readAndWrite().default("").propertiesPanel({
@@ -195956,7 +196011,7 @@ const Checkbox = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$2);
 const adjustDateFormatSideEffect = (params) => {
   const widgetMeta = params.widgetMeta;
   const widgetState = params.widgetState;
@@ -196330,6 +196385,15 @@ const DatePicker = registerComponent$1(
     ) });
   }
 );
+const editorTemplate$1 = {
+  create: () => ({
+    type: "Switch",
+    generateBinding: true,
+    properties: {
+      label: Property.Static("Label")
+    }
+  })
+};
 const propertiesDefinition$5 = {
   general: Section$1.category(PropsPanelCategory.Content).children({
     label: Prop.string().readAndWrite().default("").propertiesPanel({
@@ -196615,10 +196679,10 @@ const Switch = registerComponent$1(
       props2.sourceId
     ) });
   }
-);
+).addEditorTemplate(editorTemplate$1);
 const propertiesDefinition$4 = {
   general: Section$1.category(PropsPanelCategory.Content).children({
-    icon: Prop.string().readAndWrite().default("info").propertiesPanel({
+    icon: Prop.string().readAndWrite().propertiesPanel({
       label: "Icon",
       helpText: "Select an icon",
       controlType: "ICON_SELECTOR"
@@ -196706,6 +196770,19 @@ const Icon = registerComponent$1(
     );
   }
 );
+const editorTemplate = {
+  create: (context2) => ({
+    type: "Image",
+    properties: {
+      src: Property.Static(
+        "https://lowcode.s3.us-west-2.amazonaws.com/eilish-billie.jpeg"
+      ),
+      fillContainer: Property.Static(true),
+      width: context2.parentInfo.isGridLike ? Property.Dimension(Dim.col(4)) : Property.Dimension(Dim.px(300)),
+      height: Property.Dimension(Dim.fit())
+    }
+  })
+};
 const StyledImage = qe$1.img`
   opacity: 0;
   pointer-events: none;
@@ -196937,7 +197014,7 @@ const Image = registerComponent$1(
       }
     ) });
   }
-);
+).addEditorTemplate(editorTemplate);
 const propertiesDefinition$2 = {
   general: Section$1.category(PropsPanelCategory.Uncategorized).propertiesPanel({ showHeader: false }).children({
     defaultValue: Prop.any().readAndWrite().propertiesPanel({
@@ -197947,7 +198024,7 @@ const EmbedWrapper$2 = (props2) => {
   useEffect(() => {
     const bootstrapResponseListener = (event) => {
       try {
-        rootStore.apis.baseUrl = event.data.payload.agentUrl;
+        rootStore.apis.agentUrls = event.data.payload.agentUrls ?? (event.data.payload.agentUrl ? [event.data.payload.agentUrl] : []);
         rootStore.apis.setTokens(
           event.data.payload.token,
           event.data.payload.accessToken
@@ -197965,6 +198042,13 @@ const EmbedWrapper$2 = (props2) => {
       "sb-bootstrap-response",
       bootstrapResponseListener
     );
+    const updateActiveAgentsListener = (event) => {
+      rootStore.apis.agentUrls = event.data.payload.agentUrls;
+    };
+    iframeMessageHandler.addEventListener(
+      "sb-update-active-agents",
+      updateActiveAgentsListener
+    );
     const retrievePropertyPanelPropsListener = (event) => {
       const sourceId = event.data.payload.sourceId;
       const instanceId = getEditStore().runtimeEntitiesManager.widgets.getAnyInstanceIdForSourceId(
@@ -198052,7 +198136,7 @@ const EmbedWrapper$2 = (props2) => {
         parent,
         scopeName,
         baseProperties,
-        skipTriggerCreation,
+        skipSecondaryComponentsCreation,
         otherComponentsUpdates
       } = event.data.payload;
       try {
@@ -198061,7 +198145,7 @@ const EmbedWrapper$2 = (props2) => {
           parent,
           scopeName,
           baseProperties,
-          skipTriggerCreation,
+          skipSecondaryComponentsCreation,
           otherComponentsUpdates
         });
       } catch (error2) {
@@ -198095,6 +198179,10 @@ const EmbedWrapper$2 = (props2) => {
         "sb-bootstrap-response",
         bootstrapResponseListener
       );
+      iframeMessageHandler.removeEventListener(
+        "sb-update-active-agents",
+        updateActiveAgentsListener
+      );
       iframeMessageHandler.removeEventListener(
         "sb-edit-operation-acknowledge",
         editOperationAcknowledgeListener
@@ -198244,7 +198332,7 @@ const EmbedWrapper$1 = (props2) => {
   useEffect(() => {
     const bootstrapResponseListener = (event) => {
       try {
-        rootStore.apis.baseUrl = event.data.payload.agentUrl;
+        rootStore.apis.agentUrls = event.data.payload.agentUrls ?? (event.data.payload.agentUrl ? [event.data.payload.agentUrl] : []);
         rootStore.apis.setTokens(
           event.data.payload.token,
           event.data.payload.accessToken
@@ -200682,4 +200770,4 @@ export {
   setQueryParams as y,
   download as z
 };
-//# sourceMappingURL=index-CCewmzC_.js.map
+//# sourceMappingURL=index-CH4jAtWn.js.map