@superblocksteam/library 2.0.6-next.57 → 2.0.6-next.59

package/dist/{index-fmpMMpkS.js → index-1LMlc1Q6.js}

@@ -78597,7 +78597,8 @@ const PropsPanelCategory = {
   // these are hidden categories
   Meta: "Meta",
   Derived: "Derived",
-  Functions: "Functions"
+  Functions: "Functions",
+  Internal: "Internal"
 };
 function createPropertiesPanelDefinition(sections, entity, scopedState) {
   const sectionDefs = [];
@@ -82920,6 +82921,16 @@ class Prop {
     const prop = new Prop("function");
     return prop.default(implementation);
   }
+  /**
+   * Creates an internal property that is not exposed in the entity's public interface,
+   * not tracked for reactivity/syncing, and not serialized. This is useful for
+   * storing implementation details like SuspensibleAPI instances that other
+   * properties can reference via `this._propertyName`.
+   */
+  static internal(factory) {
+    const prop = new Prop("internal");
+    return prop.default(factory);
+  }
   /**
    * Creates a composite property, which is a property that contains nested properties. For example,
    * the following composite property:
@@ -82989,6 +83000,10 @@ class Prop {
     }
     return this;
   }
+  // alias for default
+  computed(computeFn) {
+    return this.default(computeFn);
+  }
   allowNestedBindings() {
     this.prop.nestedBindings = true;
     throw new Error("Nested bindings are not supported yet");
@@ -83289,8 +83304,7 @@ function buildPropLeafDefault(prop, name, parentDefault) {
   }
   return propDefault;
 }
-function createManagedPropsList(sections, parentPath = "") {
-  const managedPropsList = [];
+function traverseProps(sections, onProp, parentPath = "") {
   const processProps = (props2, parentPath2, parentDefault) => {
     for (const [name, prop] of Object.entries(props2)) {
       const fullPath = parentPath2 ? `${parentPath2}.${name}` : name;
@@ -83318,12 +83332,7 @@ function createManagedPropsList(sections, parentPath = "") {
           processProps(variantWithoutSharedKeys, fullPath);
         }
       } else if (prop instanceof Prop) {
-        let configuredProp = prop.setName(fullPath);
-        const propDefault = buildPropLeafDefault(prop, name, parentDefault);
-        if (propDefault !== void 0) {
-          configuredProp = configuredProp.default(propDefault);
-        }
-        managedPropsList.push({ ...configuredProp.build() });
+        onProp(prop, fullPath, name, parentDefault);
       } else {
         console.warn("Invalid prop type", { name, prop });
       }
@@ -83332,6 +83341,41 @@ function createManagedPropsList(sections, parentPath = "") {
   for (const [, section] of Object.entries(sections)) {
     processProps(section.props, parentPath);
   }
+}
+function createInternalPropsList(sections, parentPath = "") {
+  const internalPropsList = [];
+  traverseProps(
+    sections,
+    (prop, fullPath) => {
+      const builtProp = prop.setName(fullPath).build();
+      if (builtProp.dataType === "internal" && builtProp.default) {
+        internalPropsList.push({
+          path: fullPath,
+          factory: builtProp.default
+        });
+      }
+    },
+    parentPath
+  );
+  return internalPropsList;
+}
+function createManagedPropsList(sections, parentPath = "") {
+  const managedPropsList = [];
+  traverseProps(
+    sections,
+    (prop, fullPath, name, parentDefault) => {
+      let configuredProp = prop.setName(fullPath);
+      const propDefault = buildPropLeafDefault(prop, name, parentDefault);
+      if (propDefault !== void 0) {
+        configuredProp = configuredProp.default(propDefault);
+      }
+      const builtProp = configuredProp.build();
+      if (builtProp.dataType !== "internal") {
+        managedPropsList.push({ ...builtProp });
+      }
+    },
+    parentPath
+  );
   return managedPropsList;
 }
 var rfdc_1;
@@ -83532,7 +83576,7 @@ function registerStores(stores) {
   internalStores = { ...internalStores, ...stores };
   if (SUPPORTED_MODES.includes("production")) {
     if (Object.keys(internalStores).length === Object.keys(stores).length) {
-      import("./devtools-consolidated-DDIhwU5g.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
+      import("./devtools-consolidated-Cc9P7odf.js").then(({ initializeCustomDevTools, setRegisteredStores }) => {
         setRegisteredStores(internalStores);
         initializeCustomDevTools();
       }).catch((error) => {
@@ -83545,7 +83589,7 @@ function registerStores(stores) {
   }
 }
 const DevToolsInternal = React__default.lazy(() => {
-  return import("./devtools-consolidated-DDIhwU5g.js").then((module2) => ({
+  return import("./devtools-consolidated-Cc9P7odf.js").then((module2) => ({
     default: module2.CustomDevTools
   }));
 });
@@ -83612,17 +83656,26 @@ function createGlobalObject({
     }
   );
 }
-const prettyPrintFunction = (func, args) => {
-  if (!func) return "";
-  const funcStr = func.toString().replace(/\s+/g, " ").trim();
-  const argsStr = args.map((arg) => {
-    try {
-      return typeof arg === "string" ? `"${arg.replace(/\n/g, "\\n").replace(/"/g, '\\"')}"` : String(arg).replace(/\s+/g, " ").trim();
-    } catch (_e2) {
-      return String(arg);
-    }
-  }).join(", ");
-  return `${funcStr}(${argsStr})`;
+const prettyPrintFunction = (func, args, fnName) => {
+  let funcStr;
+  try {
+    funcStr = func.toString().replace(/\s+/g, " ").trim();
+  } catch {
+    funcStr = "[Function]";
+  }
+  let argsStr;
+  try {
+    argsStr = args.map((arg) => {
+      try {
+        return typeof arg === "string" ? `"${arg.replace(/\n/g, "\\n").replace(/"/g, '\\"')}"` : String(arg).replace(/\s+/g, " ").trim();
+      } catch {
+        return String(arg);
+      }
+    }).join(", ");
+  } catch {
+    argsStr = "[Arguments]";
+  }
+  return `${fnName}: ${funcStr}(${argsStr})`;
 };
 class EvalComputeEngine {
   constructor() {
@@ -83672,9 +83725,16 @@ class EvalComputeEngine {
         func.toString()
       );
     } catch (error) {
+      if (error instanceof Promise) {
+        throw error;
+      }
       console.log(`Error in eval(${entityName.value}.${path2})`, {
         error,
-        func: prettyPrintFunction(func, args || [])
+        func: prettyPrintFunction(
+          func,
+          args || [],
+          entityName.value + "." + path2
+        )
       });
       return void 0;
     }
@@ -83699,15 +83759,65 @@ class DirectComputeEngine {
       }
       return func.call(entity, snapshot, ...funcArgs);
     } catch (error) {
+      if (error instanceof Promise) {
+        throw error;
+      }
       console.log(`Error in direct(${entityName.value}.${path2})`, {
         error,
-        func: prettyPrintFunction(func, args || [])
+        func: prettyPrintFunction(
+          func,
+          args || [],
+          entityName.value + "." + path2
+        )
       });
       return void 0;
     }
   }
 }
-function createScopeProxy(scopes) {
+const objectFallbackCache = /* @__PURE__ */ new WeakMap();
+function sanitizeObject(obj) {
+  if (!objectFallbackCache.has(obj)) {
+    objectFallbackCache.set(obj, {});
+  }
+  const fallbackCache = objectFallbackCache.get(obj);
+  return new Proxy(obj, {
+    get(target, prop) {
+      try {
+        const value = target[prop];
+        if (typeof prop === "string") {
+          fallbackCache[prop] = value;
+        }
+        return value;
+      } catch (error) {
+        if (error instanceof Promise) {
+          return typeof prop === "string" ? fallbackCache[prop] : void 0;
+        }
+        throw error;
+      }
+    }
+  });
+}
+function sanitizeEntity(entity) {
+  return sanitizeObject(entity);
+}
+function sanitizeScopedState(state) {
+  return new Proxy(state, {
+    get(target, prop) {
+      const value = target[prop];
+      if (value && typeof value === "object" && "type" in value) {
+        return sanitizeObject(value);
+      }
+      return value;
+    }
+  });
+}
+function sanitizedToJS(value) {
+  if (value === null || value === void 0 || typeof value !== "object") {
+    return toJS(value);
+  }
+  return toJS(sanitizeObject(value));
+}
+function createScopeProxy(scopes, useSuspense = false) {
   const proxy = new Proxy(
     {},
     {
@@ -83717,10 +83827,10 @@ function createScopeProxy(scopes) {
             return void 0;
           }
           if (prop in scope.entities) {
-            return scope.entities[prop];
+            return !useSuspense ? sanitizeEntity(scope.entities[prop]) : scope.entities[prop];
           }
           if (scope !== scopes[0] && scope.name === prop) {
-            return scope.entities;
+            return !useSuspense ? sanitizeScopedState(scope.entities) : scope.entities;
           }
         }
       },
@@ -83754,115 +83864,6 @@ function createScopeProxy(scopes) {
   );
   return proxy;
 }
-function buildPath$1(entry) {
-  if (!entry) return "ROOT";
-  const res = [];
-  while (entry.parent) {
-    res.push(entry.path);
-    entry = entry.parent;
-  }
-  return res.reverse().join("/");
-}
-function isRecursivelyObservable$1(thing) {
-  return isObservableObject(thing) || isObservableArray(thing) || isObservableMap(thing);
-}
-function getRelatedEntity(path2, target) {
-  if (typeof target !== "object" || !("getEntity" in target)) {
-    return void 0;
-  }
-  return target.getEntity({
-    value: path2,
-    isAnonymous: false
-  });
-}
-function deepObserve$1(target, listener) {
-  const entrySet = /* @__PURE__ */ new WeakMap();
-  function genericListener(change) {
-    const entry = entrySet.get(change.object);
-    processChange(change, entry);
-    const relatedEntity = getRelatedEntity(entry.path, target);
-    if (relatedEntity) {
-      listener(
-        {
-          ...change,
-          relatedEntity
-        },
-        buildPath$1(entry),
-        relatedEntity
-      );
-    } else {
-      listener(change, buildPath$1(entry), target);
-    }
-  }
-  function processChange(change, parent) {
-    switch (change.type) {
-      // Object changes
-      case "add":
-        observeRecursively(change.newValue, parent, change.name);
-        break;
-      case "update":
-        unobserveRecursively(change.oldValue);
-        observeRecursively(
-          change.newValue,
-          parent,
-          change.name || "" + change.index
-        );
-        break;
-      case "remove":
-      // object
-      case "delete":
-        unobserveRecursively(change.oldValue);
-        break;
-      // Array changes
-      case "splice":
-        change.removed.map(unobserveRecursively);
-        change.added.forEach(
-          (value, idx) => observeRecursively(value, parent, "" + (change.index + idx))
-        );
-        for (let i3 = change.index + change.addedCount; i3 < change.object.length; i3++) {
-          if (isRecursivelyObservable$1(change.object[i3])) {
-            const entry = entrySet.get(change.object[i3]);
-            if (entry) entry.path = "" + i3;
-          }
-        }
-        break;
-    }
-  }
-  function observeRecursively(thing, parent, path2) {
-    if (isRecursivelyObservable$1(thing)) {
-      const entry = entrySet.get(thing);
-      if (entry) {
-        if (entry.parent !== parent || entry.path !== path2)
-          throw new Error(
-            `The same observable object cannot appear twice in the same tree, trying to assign it to '${buildPath$1(parent)}/${path2}', but it already exists at '${buildPath$1(entry.parent)}/${entry.path}'`
-          );
-      } else {
-        const entry2 = {
-          parent,
-          path: path2,
-          dispose: observe$1(thing, genericListener)
-        };
-        entrySet.set(thing, entry2);
-        entries(thing).forEach(
-          ([key2, value]) => observeRecursively(value, entry2, key2)
-        );
-      }
-    }
-  }
-  function unobserveRecursively(thing) {
-    if (isRecursivelyObservable$1(thing)) {
-      const entry = entrySet.get(thing);
-      if (!entry) return;
-      entrySet.delete(thing);
-      entry.dispose();
-      values$1(thing).forEach(unobserveRecursively);
-    }
-  }
-  observeRecursively(target, void 0, "");
-  return () => {
-    unobserveRecursively(target);
-  };
-}
 class SbEventFlow {
   constructor() {
     __publicField(this, "steps", []);
@@ -84199,11 +84200,21 @@ const buildEntityScope = (id2, name) => ({
   entityMeta: {},
   childScopes: {},
   idToName: {},
-  getEntity(name2) {
-    return this.entities[name2.value];
+  getEntity(name2, options) {
+    const entity = this.entities[name2.value];
+    const useSuspense = (options == null ? void 0 : options.useSuspense) ?? false;
+    if (!useSuspense && entity) {
+      return sanitizeEntity(entity);
+    }
+    return entity;
   },
-  getEntityMeta(name2) {
-    return this.entityMeta[name2.value];
+  getEntityMeta(name2, options) {
+    const entityMeta = this.entityMeta[name2.value];
+    const useSuspense = (options == null ? void 0 : options.useSuspense) ?? false;
+    if (!useSuspense && entityMeta) {
+      return sanitizeEntity(entityMeta);
+    }
+    return entityMeta;
   },
   getEntityName(id22) {
     return this.idToName[id22];
@@ -84251,16 +84262,17 @@ class EntityManager {
       registerStores({ Entities: this.state });
     }
   }
-  getEntity(ScopeId, name) {
-    return this.getState(ScopeId)[name.value];
+  getEntity(scopeId, name, options) {
+    return this.getState(scopeId, options)[name.value];
   }
-  getEntityById(scopeId, id2) {
+  getEntityById(scopeId, id2, options) {
     const scope = this.getScope(scopeId);
-    return scope.getEntity(scope.getEntityName(id2));
+    return scope.getEntity(scope.getEntityName(id2), options);
   }
-  getState(scopeId) {
+  getState(scopeId, options) {
     const scopes = this.getAccessibleScopes(scopeId);
-    return createScopeProxy(scopes);
+    const useSuspense = (options == null ? void 0 : options.useSuspense) ?? false;
+    return createScopeProxy(scopes, useSuspense);
   }
   getScopeName(scopeId) {
     const scope = this.getScope(scopeId);
@@ -84390,6 +84402,10 @@ class EntityManager {
         this means the entire item will have leaf properties (more expensive)`
       );
     }
+    const internalProps = this.componentRegistry.getInternalProps(type5);
+    for (const internalProp of internalProps) {
+      this.addInternalProperty(scopeId, name, internalProp);
+    }
     const functionalProps = toExecutablesOrValues(props2, managedPropsForType);
     const addedProperties = /* @__PURE__ */ new Set();
     for (const [prop, value] of functionalProps) {
@@ -84398,6 +84414,18 @@ class EntityManager {
     }
     this.addMissingProps(managedPropsForType, addedProperties, scopeId, name);
   }
+  addInternalProperty(scopeId, name, internalProp) {
+    const entity = this.getScope(scopeId).getEntity(name);
+    const { path: path2, factory } = internalProp;
+    const instance = factory.call(entity);
+    Object.defineProperty(entity, path2, {
+      value: instance,
+      writable: false,
+      enumerable: false,
+      // This hides it from Object.keys(), JSON.stringify(), etc.
+      configurable: false
+    });
+  }
   addProperty(scopeId, name, prop, eov) {
     if (prop.split(".").includes(RECORD_PATH_IDENTIFIER)) {
       return;
@@ -84427,7 +84455,7 @@ class EntityManager {
     const entityType = entity.type;
     if (eov.type === "external-function") {
       const finalFunction = async (...args) => this.dirComputeEngine.compute({
-        snapshot: snapshot(scopeId),
+        snapshot: snapshot(scopeId, { useSuspense: true }),
         func: eov.value,
         path: prop,
         args,
@@ -84474,7 +84502,7 @@ class EntityManager {
             if (managedProp == null ? void 0 : managedProp.contextual) {
               ret = function(context2) {
                 return computeEngine.compute({
-                  snapshot: snapshot(scopeId),
+                  snapshot: snapshot(scopeId, { useSuspense: true }),
                   entityName: name,
                   func: eov.value,
                   path: prop,
@@ -84484,7 +84512,7 @@ class EntityManager {
               };
             } else {
               ret = computeEngine.compute({
-                snapshot: snapshot(scopeId),
+                snapshot: snapshot(scopeId, { useSuspense: true }),
                 entityName: name,
                 func: eov.value,
                 path: prop
@@ -84495,10 +84523,10 @@ class EntityManager {
           }
         }
         if ((managedProp == null ? void 0 : managedProp.validate) && typeof ret !== "function") {
-          const currentState = snapshot(scopeId);
+          const currentState = snapshot(scopeId, { useSuspense: true });
           const entity2 = currentState[name.value];
           const validationResult = managedProp.validate(ret, entity2);
-          if (entity2[WIDGET_SOURCE_ID_ATTRIBUTE]) {
+          if (entity2 == null ? void 0 : entity2[WIDGET_SOURCE_ID_ATTRIBUTE]) {
             this.setValidationState(
               entity2[WIDGET_SOURCE_ID_ATTRIBUTE],
               prop,
@@ -84514,11 +84542,14 @@ class EntityManager {
           }
           ret = validationResult.result;
         }
-        return ret;
-      } catch (_e2) {
+      } catch (e3) {
+        if (e3 instanceof Promise) {
+          throw e3;
+        }
         console.log("Could not compute property value");
         return void 0;
       }
+      return ret;
     });
     const setValue = (value) => {
       const metaParent = getMetaParent();
@@ -84671,6 +84702,7 @@ class EntityManager {
     }
     this.deleteObsoleteNestedProperties(scopeId, name, props2, entity);
     const managedPropsForType = this.componentRegistry.getManagedProps(type5);
+    const internalProps = this.componentRegistry.getInternalProps(type5);
     const functionalProps = toExecutablesOrValues(props2, managedPropsForType);
     const addedProperties = /* @__PURE__ */ new Set();
     for (const [prop, value] of functionalProps) {
@@ -84679,9 +84711,11 @@ class EntityManager {
     }
     const missingPropKeys = Object.keys(entity).filter((key2) => {
       const propInfo = managedPropsForType.find((p) => p.path === key2);
+      const isInternalProp = internalProps.some((p) => p.path === key2);
       return !(key2 in props2) && // not in props
       !PROTECTED_KEYS.has(key2) && // not a protected key
-      (propInfo == null ? void 0 : propInfo.dataType) !== "function";
+      (propInfo == null ? void 0 : propInfo.dataType) !== "function" && // not a function (these are considered immutable)
+      !isInternalProp;
     });
     missingPropKeys.forEach((key2) => delete entity[key2]);
     this.addMissingProps(managedPropsForType, addedProperties, scopeId, name);
@@ -84759,10 +84793,6 @@ class EntityManager {
     ));
     return { atom, isNew };
   }
-  observeScope(scopeId, listener) {
-    const scope = this.getScope(scopeId);
-    return deepObserve$1(scope, listener);
-  }
 }
 function cleanObject(obj) {
   obj = toJS(obj);
@@ -84862,7 +84892,7 @@ const triggerSendFromQueue = throttle(
   // { leading: false, trailing: true },
 );
 function queueMessage(message2) {
-  actionQueue.push(cleanObject(message2));
+  actionQueue.push(message2);
   triggerSendFromQueue();
 }
 class SbIframeEventInternal extends Event {
@@ -85796,16 +85826,18 @@ function deepObserve(target, listener) {
 }
 function startEditorSync(options) {
   const { store, storeId, keys: keys2, projection, debounce: debounce2 } = options;
-  const reactionOptions = debounce2 ? {
-    delay: debounce2
-  } : void 0;
+  const reactionOptions = {
+    delay: debounce2,
+    name: `editor-sync(${storeId})`
+  };
   let initialState;
   if (keys2) {
-    initialState = toJS(lodashExports.pick(store, Object.keys(keys2)));
+    const p = lodashExports.pick(store, Object.keys(keys2));
+    initialState = sanitizedToJS(p);
   } else if (projection) {
-    initialState = toJS(projection(store));
+    initialState = sanitizedToJS(projection(store));
   } else {
-    initialState = toJS(store);
+    initialState = sanitizedToJS(store);
   }
   editorBridge.initializeEditorSyncedStore({
     storeId,
@@ -85819,7 +85851,7 @@ function startEditorSync(options) {
       return reaction(
         () => {
           const currentProjection = projection(store);
-          return toJS(currentProjection[key2]);
+          return sanitizedToJS(currentProjection[key2]);
         },
         (value) => {
           const diffs = microPatches(lastValue, value, key2);
@@ -85856,7 +85888,7 @@ function startEditorSync(options) {
             patch: {
               op: "update",
               path: [key2],
-              value: toJS(projection(store)[key2])
+              value: sanitizedToJS(projection(store)[key2])
             }
           });
         });
@@ -85931,6 +85963,7 @@ class ComponentRegistry {
     __publicField(this, "_typeRegistry", /* @__PURE__ */ new Map());
     __publicField(this, "_customComponentRegistry", /* @__PURE__ */ new Map());
     __publicField(this, "_managedPropsRegistry", /* @__PURE__ */ new Map());
+    __publicField(this, "_internalPropsRegistry", /* @__PURE__ */ new Map());
     this.rootStore = rootStore2;
     makeAutoObservable(this);
     startEditorSync({
@@ -85970,6 +86003,12 @@ class ComponentRegistry {
   deleteManagedProps(type5) {
     this._managedPropsRegistry.delete(type5);
   }
+  addInternalProps(type5, props2) {
+    this._internalPropsRegistry.set(type5, props2);
+  }
+  getInternalProps(type5) {
+    return this._internalPropsRegistry.get(type5) ?? [];
+  }
   get libraryComponentList() {
     return Array.from(this._typeRegistry.keys());
   }
@@ -86855,10 +86894,15 @@ class PropertiesPanelManager {
     if (this.propertiesPanelTrackerDisposer) {
       this.propertiesPanelTrackerDisposer();
     }
-    this.propertiesPanelTrackerDisposer = autorun(() => {
-      const propertiesPanel = this.getPropertiesPanel(scopeId, instanceId);
-      editorBridge.addPropertiesPanel(sourceId, propertiesPanel);
-    });
+    this.propertiesPanelTrackerDisposer = autorun(
+      () => {
+        const propertiesPanel = this.getPropertiesPanel(scopeId, instanceId);
+        editorBridge.addPropertiesPanel(sourceId, propertiesPanel);
+      },
+      {
+        name: `trackPropertiesPanel[${scopeId}-${instanceId}]`
+      }
+    );
   }
   getPropertiesDefinition(type5) {
     return this.propertiesDefinitions.get(type5);
@@ -91208,14 +91252,14 @@ function getLoaderFn$1(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-B9kcOhBr.js"
+            "./allPathsLoader-D0DZVqPi.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-Z2MNgkRA.js"
+            "./splitPathsBySizeLoader-BtCO3mSJ.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -100335,10 +100379,16 @@ function createSbScope(getInitialEntities, options) {
           return void 0;
         }
         return createBindableEntityProxy(
-          () => rootStore.entityManager.getEntity(scopeId, {
-            value: key2,
-            isAnonymous: false
-          }),
+          () => rootStore.entityManager.getEntity(
+            scopeId,
+            {
+              value: key2,
+              isAnonymous: false
+            },
+            {
+              useSuspense: true
+            }
+          ),
           getBinding(key2)
         );
       }
@@ -111674,14 +111724,46 @@ const createEntityActions = (entityName, scopeId) => ({
   reset: entityActions.reset.bind(null, entityName, scopeId),
   update: entityActions.update.bind(null, entityName, scopeId)
 });
-const useShallowMobxObserver = (obj) => {
+const SuspenseSymbol = Symbol("SuspenseSymbol");
+function toJsOrSuspense(obj, key2) {
+  try {
+    if (key2) {
+      return toJS(obj[key2]);
+    }
+    return toJS(obj);
+  } catch (error) {
+    if (error instanceof Promise) {
+      return {
+        __isSuspenseResult: SuspenseSymbol
+      };
+    }
+    throw error;
+  }
+}
+function removeSuspense(keys2, result, prevSafeResult) {
+  const sanitized = {};
+  for (const key2 of keys2) {
+    const value = result[key2];
+    if (value && value.__isSuspenseResult) {
+      const preSafeValue = (prevSafeResult == null ? void 0 : prevSafeResult[key2]) || null;
+      sanitized[key2] = preSafeValue;
+    } else {
+      sanitized[key2] = value;
+    }
+  }
+  return sanitized;
+}
+const useShallowMobxObserver = (obj, useSuspense = true) => {
   const isFirstRenderRef = useRef(true);
   const [keys2, setKeys] = useState(Object.keys(obj));
-  const [result, setResult] = useState(() => toJS(obj));
+  const preSafeResultRef = useRef(void 0);
+  const [result, setResult] = useState(
+    () => toJsOrSuspense(obj)
+  );
   useEffect(() => {
     if (!isFirstRenderRef.current) {
       setKeys(Object.keys(obj));
-      setResult(toJS(obj));
+      setResult(toJsOrSuspense(obj));
     }
     isFirstRenderRef.current = false;
   }, [obj]);
@@ -111690,12 +111772,12 @@ const useShallowMobxObserver = (obj) => {
       () => Object.keys(obj),
       (newKeys) => {
         setKeys(newKeys);
-        setResult((_prevResult) => {
-          return newKeys.reduce((acc, key2) => {
+        setResult(
+          newKeys.reduce((acc, key2) => {
             acc[key2] = obj[key2];
             return acc;
-          }, {});
-        });
+          }, {})
+        );
       },
       {
         name: "shallowMobxObserver-keys",
@@ -111708,11 +111790,10 @@ const useShallowMobxObserver = (obj) => {
     for (const key2 of keys2) {
       disposers.push(
         reaction(
-          () => toJS(obj[key2]),
+          () => toJsOrSuspense(obj, key2),
           (v2) => {
             setResult((prev2) => {
-              const res = { ...prev2, [key2]: v2 };
-              return res;
+              return { ...prev2, [key2]: v2 };
             });
           },
           {
@@ -111724,6 +111805,21 @@ const useShallowMobxObserver = (obj) => {
     }
     return () => disposers.forEach((disposer) => disposer());
   }, [obj, keys2]);
+  const wholeResultIsSuspense = result && result.__isSuspenseResult;
+  const aKeyIsSuspense = wholeResultIsSuspense || (keys2 == null ? void 0 : keys2.some((key2) => {
+    var _a2;
+    return (_a2 = result[key2]) == null ? void 0 : _a2.__isSuspenseResult;
+  }));
+  const somethingIsSuspense = wholeResultIsSuspense || aKeyIsSuspense;
+  if (somethingIsSuspense && useSuspense) {
+    return obj;
+  }
+  if (somethingIsSuspense && !useSuspense) {
+    const sanitized = removeSuspense(keys2, result, preSafeResultRef.current);
+    preSafeResultRef.current = sanitized;
+    return sanitized;
+  }
+  preSafeResultRef.current = result;
   return result;
 };
 const shimmerAnimation = We$1`
@@ -111840,14 +111936,23 @@ const ReactiveComponent = observer(function Component2({
     scopeId,
     name
   );
-  const entity = rootStore.entityManager.getEntity(scopeId, {
-    value: name,
-    isAnonymous: false
-  });
+  const entity = rootStore.entityManager.getEntity(
+    scopeId,
+    {
+      value: name,
+      isAnonymous: false
+    },
+    {
+      useSuspense: true
+    }
+  );
   const safeProps = useMemo$2(() => {
     return isNameDuplicated || !entity ? removeBindings(widgetProps) : entity;
   }, [isNameDuplicated, widgetProps, entity]);
-  const reactiveProps = useShallowMobxObserver(safeProps);
+  const reactiveProps = useShallowMobxObserver(
+    safeProps,
+    safeProps.loading === void 0
+  );
   const stylePropWithSize = useStyleWithSize(reactiveProps);
   const styleProp = useMemo$2(() => {
     const styleWithOverflow = {
@@ -111915,8 +112020,12 @@ const ReactiveComponent = observer(function Component2({
     }
   );
 });
+const LoadingWrapper = (props2) => {
+  const { getFallbackStyle } = useComponentSuspenseStyle();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, { fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(SuspenseFallback, { style: getFallbackStyle }), children: props2.children });
+};
 const WrappedReactiveComponent = (props2) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentSuspenseStyleProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ReactiveComponent, { ...props2 }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ComponentSuspenseStyleProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ReactiveComponent, { ...props2 }) }) });
 };
 const CustomComponentContext = createContext({
   isInCustomComponent: false,
@@ -119160,7 +119269,9 @@ const registerSbComponent = (type5, config2, Component3) => {
 };
 function registerSbEntity(name, config2, Entity) {
   const managedProps = createManagedPropsList(config2.propertiesDefinition);
+  const internalProps = createInternalPropsList(config2.propertiesDefinition);
   rootStore.componentRegistry.addManagedProps(name, managedProps ?? []);
+  rootStore.componentRegistry.addInternalProps(name, internalProps ?? []);
   rootStore.onEditorRegistered(() => {
     getEditStore().propertiesPanelManager.setPropertiesDefinition(
       name,
@@ -119634,23 +119745,24 @@ const borderRadius = (propertiesPanelConfig = {}) => {
     ...propertiesPanelConfig
   });
 };
-const loading = () => Prop.boolean().default(false).readAndWrite().propertiesPanel({
+const loading = () => Prop.boolean().default(void 0).readAndWrite().propertiesPanel({
   label: "Loading",
   controlType: "RADIO_BUTTON_GROUP",
   helpText: "Whether the component is loading, switch to code mode to set the loading state based whatever you want",
   options: [
     {
       label: "Off",
-      value: false
+      value: false,
+      showTooltip: false
     },
     {
       label: "On",
-      value: true
+      value: true,
+      showTooltip: false
     },
     {
       label: "Auto",
-      disabled: true,
-      tooltip: "Coming soon! Loading state is based on if referenced data is loading",
+      tooltip: "Loading state is based on if referenced data is loading",
       showTooltip: true,
       value: void 0
     }
@@ -127343,9 +127455,26 @@ const hasIconSupport = (inputType) => {
 const _InputComponent = class _InputComponent extends React__default.Component {
   constructor(props2) {
     super(props2);
-    __publicField(this, "numericInputRef");
-    __publicField(this, "inputRef");
-    __publicField(this, "groupWrapperRef");
+    __publicField(this, "numericInputRef", React__default.createRef());
+    __publicField(this, "inputRef", React__default.createRef());
+    __publicField(this, "groupWrapperRef", React__default.createRef());
+    __publicField(this, "processAndSetValue", (value, inputType) => {
+      if (isNumericInput(inputType)) {
+        const isPercentInput = inputType === InputTypes.PERCENTAGE;
+        const number4 = sanitizeNumericInputValue(value, isPercentInput);
+        const numberWithPrecision = this.valueWithPrecision(number4);
+        const formatted = this.formatNumber(numberWithPrecision);
+        this.setState({
+          localValue: numberWithPrecision,
+          displayValue: formatted
+        });
+      } else {
+        this.setState({
+          localValue: value,
+          displayValue: value
+        });
+      }
+    });
     __publicField(this, "onDebouncedValueChange", lodashExports.debounce(
       (value) => this.props.onValueChange(value),
       this.props.disableDebounce ? 0 : 300
@@ -127648,26 +127777,14 @@ const _InputComponent = class _InputComponent extends React__default.Component {
         }
       );
     });
-    let value = props2.value;
-    let displayValue = props2.value;
-    if (isNumericInput(props2.inputType)) {
-      value = String(
-        props2.inputType === InputTypes.PERCENTAGE && props2.value !== "" && !isNaN(Number(props2.value)) ? new Decimal(props2.value).times(100) : props2.value
-      );
-      value = this.valueWithPrecision(value);
-      displayValue = this.formatNumber(value || "");
-    }
     this.state = {
-      localValue: value,
-      displayValue,
       showPassword: false,
       inputFocused: false
     };
-    this.numericInputRef = React__default.createRef();
-    this.inputRef = React__default.createRef();
-    this.groupWrapperRef = React__default.createRef();
+    this.processAndSetValue(props2.value, props2.inputType);
   }
   componentDidMount() {
+    this.processAndSetValue(this.props.value, this.props.inputType);
     this.ensureFocus();
   }
   componentDidUpdate(prevProps) {
@@ -127681,22 +127798,8 @@ const _InputComponent = class _InputComponent extends React__default.Component {
       preventFormattingWhileTyping
     } = this.props;
     if (preventFormattingWhileTyping && this.state.inputFocused) return;
-    const isPercentInput = inputType === InputTypes.PERCENTAGE;
     if (prevProps.numberFormatting !== numberFormatting || prevProps.minimumFractionDigits !== minimumFractionDigits || prevProps.maximumFractionDigits !== maximumFractionDigits || prevProps.inputType !== inputType || prevProps.defaultValue !== defaultValue2 || prevProps.value !== value) {
-      if (isNumericInput(inputType)) {
-        const number4 = sanitizeNumericInputValue(value, isPercentInput);
-        const numberWithPrecision = this.valueWithPrecision(number4);
-        const formatted = this.formatNumber(numberWithPrecision);
-        this.setState({
-          localValue: numberWithPrecision,
-          displayValue: formatted
-        });
-      } else {
-        this.setState({
-          localValue: value,
-          displayValue: value
-        });
-      }
+      this.processAndSetValue(value, inputType);
     }
   }
   componentWillUnmount() {
@@ -148213,14 +148316,14 @@ function getLoaderFn(options) {
           if (!(loader === "all")) return [3, 3];
           return [4, import(
             /* webpackChunkName: "blueprint-icons-all-paths-loader" */
-            "./allPathsLoader-BhebPX_9.js"
+            "./allPathsLoader-Dza5jMza.js"
           )];
         case 2:
           return [2, _b2.sent().allPathsLoader];
         case 3:
           return [4, import(
             /* webpackChunkName: "blueprint-icons-split-paths-by-size-loader" */
-            "./splitPathsBySizeLoader-C-dfe3r6.js"
+            "./splitPathsBySizeLoader-CyCuKl4N.js"
           )];
         case 4:
           return [2, _b2.sent().splitPathsBySizeLoader];
@@ -164566,11 +164669,6 @@ const propertiesDefinition$9 = {
       helpText: "Whether the component is visible",
       controlType: "SWITCH"
     }),
-    collapseWhenHidden: Prop.boolean().propertiesPanel({
-      label: "Collapse when hidden",
-      helpText: "Collapse the component when it is hidden",
-      controlType: "SWITCH"
-    }),
     // todo: move search to its own section (secondary style)
     // TODO(FE-621): move to composite prop once we enable inline
     // rendering of child props in the properties panel.
@@ -183363,7 +183461,7 @@ class DropDownComponent extends React__default.PureComponent {
                               ...basePopoverProps,
                               ...this.props.forceOpen ? controlledPopoverProps : {}
                             },
-                            itemListPredicate: this.itemListPredicate
+                            itemListPredicate: this.itemListPredicate.bind(this)
                           }
                         ),
                         singleSelectDropdownIconElement,
@@ -183403,7 +183501,6 @@ class DropDownComponent extends React__default.PureComponent {
                             scrollToActiveItem: false,
                             resetOnSelect: false,
                             resetOnQuery: false,
-                            itemListPredicate: this.itemListPredicate,
                             placeholder: this.props.placeholder,
                             tagRenderer: this.renderTag,
                             itemRenderer: this.renderMultiSelectItem,
@@ -183460,7 +183557,8 @@ class DropDownComponent extends React__default.PureComponent {
                             width: this.props.width,
                             isValid: !this.props.isInvalid,
                             canvasMode: this.props.canvasMode,
-                            hasIcon: Boolean(this.props.icon)
+                            hasIcon: Boolean(this.props.icon),
+                            itemListPredicate: this.itemListPredicate.bind(this)
                           }
                         ),
                         defaultIconElement,
@@ -184079,7 +184177,10 @@ const SbCustom = registerSbComponent(
     return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "block" }, ...props2, children });
   }
 );
-const layoutPropDef = {
+const defaultSections = {
+  appearance: Section.category(PropsPanelCategory.Appearance).children({
+    loading: loading()
+  }),
   layout: basicLayout()
 };
 function registerComponent(name, propertiesDefinition2, component) {
@@ -184104,7 +184205,7 @@ function registerComponent(name, propertiesDefinition2, component) {
     {
       propertiesDefinition: {
         content: contentSection,
-        ...layoutPropDef,
+        ...defaultSections,
         events: eventSection
       },
       customComponent: true
@@ -185039,7 +185140,7 @@ const SbIcon = registerSbComponent(
   },
   (props2) => {
     const [isLoading, setIsLoading] = useState(false);
-    const { icon, style: style2, color, size: size2, onClick } = props2;
+    const { icon, style: style2, color, size: size2, loading: loading2, onClick } = props2;
     const { style: passthroughStyle, ...passThroughProps } = usePassthroughProps(props2);
     const inlineStyles = useMemo$2(() => {
       const minWidthStyle = !icon ? {
@@ -185058,13 +185159,17 @@ const SbIcon = registerSbComponent(
     const handleClick = useCallback(async () => {
       if (onClick) {
         try {
-          setIsLoading(true);
+          if (loading2 === void 0) {
+            setIsLoading(true);
+          }
           await onClick();
         } finally {
-          setIsLoading(false);
+          if (loading2 === void 0) {
+            setIsLoading(false);
+          }
         }
       }
-    }, [onClick]);
+    }, [onClick, loading2]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       StyledContainer,
       {
@@ -185434,6 +185539,59 @@ const SbTimer = registerSbEntity(
     };
   }
 );
+class SuspensibleAPI {
+  constructor({
+    runFn,
+    cancelFn
+  }) {
+    __publicField(this, "_response");
+    __publicField(this, "_error");
+    __publicField(this, "_promise");
+    __publicField(this, "_isLoading", false);
+    __publicField(this, "_runFn");
+    __publicField(this, "_cancelFn");
+    this._runFn = runFn;
+    this._cancelFn = cancelFn;
+    makeAutoObservable(this);
+  }
+  /**
+   * Context-aware response getter that either returns data or throws promises to trigger React Suspense.
+   */
+  get response() {
+    if (this._isLoading && this._promise) {
+      throw this._promise;
+    }
+    return this._response;
+  }
+  get isLoading() {
+    return this._isLoading;
+  }
+  get error() {
+    return this._error;
+  }
+  async run(...args) {
+    this._isLoading = true;
+    this._error = void 0;
+    this._promise = this._runFn(...args).then(
+      action((data2) => {
+        this._response = data2;
+        this._isLoading = false;
+        return data2;
+      })
+    ).catch(
+      action((error) => {
+        this._error = error;
+        this._isLoading = false;
+        throw error;
+      })
+    );
+    return this._promise;
+  }
+  async cancel(...args) {
+    this._isLoading = false;
+    await this._cancelFn(...args);
+  }
+}
 const propertiesDefinition = {
   events: Section.category(PropsPanelCategory.EventHandlers).children({
     onSuccess: Prop.event().propertiesPanel({ label: "onSuccess" }),
@@ -185445,37 +185603,58 @@ const propertiesDefinition = {
     subHeader: "Configure frontend event handlers to run in response to the API"
   }),
   metadata: Section.category(PropsPanelCategory.Meta).children({
-    response: Prop.any().default(null).readAndWrite(),
-    error: Prop.any().default(null).readAndWrite(),
-    isRunning: Prop.boolean().default(false).readAndWrite()
+    response: Prop.any().computed(function() {
+      return this._suspensibleApi.response;
+    }).readable(),
+    error: Prop.any().computed(function() {
+      return this._suspensibleApi.error;
+    }).readable(),
+    isLoading: Prop.boolean().computed(function() {
+      return this._suspensibleApi.isLoading;
+    }).readable()
   }),
   functions: Section.category("Derived").children({
     run: Prop.function(async function(_s2) {
       var _a2, _b2;
       const api2 = this;
-      api2.error = null;
-      api2.isRunning = true;
-      const result = await rootStore.apis.runApi(api2.name, api2.scopeId).catch(
-        (err) => ({
-          error: err,
-          data: null
-        })
-      );
-      api2.isRunning = false;
-      if (!result.error) {
-        api2.response = result.data;
+      try {
+        const result = await api2._suspensibleApi.run();
         await ((_a2 = api2.onSuccess) == null ? void 0 : _a2.call(api2));
-        return api2.response;
-      } else {
-        api2.error = result.error;
+        return result;
+      } catch (error) {
         await ((_b2 = api2.onError) == null ? void 0 : _b2.call(api2));
-        return null;
+        throw error;
       }
     }),
     cancel: Prop.function(async function(_s2) {
       const api2 = this;
-      api2.isRunning = false;
-      await rootStore.apis.cancelApi(api2.name, api2.scopeId);
+      await api2._suspensibleApi.cancel();
+    })
+  }),
+  internal: Section.category(PropsPanelCategory.Internal).children({
+    /**
+     * Internal SuspensibleAPI instance that manages loading states and React Suspense integration.
+     * This property is hidden from the public interface but accessible to other properties.
+     */
+    _suspensibleApi: Prop.internal(function() {
+      const api2 = this;
+      return new SuspensibleAPI({
+        runFn: async () => {
+          const result = await rootStore.apis.runApi(api2.name, api2.scopeId).catch(
+            (err) => ({
+              error: err,
+              data: null
+            })
+          );
+          if (result.error) {
+            throw result.error;
+          }
+          return result.data;
+        },
+        cancelFn: async () => {
+          rootStore.apis.cancelApi(api2.name, api2.scopeId);
+        }
+      });
     })
   })
 };
@@ -199908,4 +200087,4 @@ export {
   SbVariable as y,
   SbTimer as z
 };
-//# sourceMappingURL=index-fmpMMpkS.js.map
+//# sourceMappingURL=index-1LMlc1Q6.js.map