@plasmicapp/react-web 1.0.37 → 1.0.39

package/README.internal

@@ -3,34 +3,18 @@ and type definitions used by generated blackbox presentational code.
 
 If you want to use this for yourself, then first build the output:
 
-  yarn build
+  pnpm --filter @plasmicapp/react-web build
 
-There are two ways to use this package.
+For fast local iteration in a pnpm consumer, use the workspace's link scripts:
 
+  pnpm local-link:setup @plasmicapp/react-web ~/path/to/consumer
+  pnpm local-link:build @plasmicapp/react-web
 
-Usage 1 - via yarn link
-=======================
+Restart the consumer after rebuilding. When finished, restore registry
+dependencies before deleting its `node_modules`:
 
-Then create a link to this:
+  pnpm local-link:teardown ~/path/to/consumer
 
-  yarn link
-
-Then, from the package where you want to use this package, do:
-
-  yarn link @plasmicapp/react-web
-
-This basically symlinks a folder in your consumer node_modules folder that links back
-to the output from `yarn build`.  If you update any file here, be sure to run `yarn build`
-again so your updates are reflected in consuming packages.
-
-Usage 2 - via package.json
-==========================
-
-Then create a link to this:
-
-  yarn add link:<path to @plasmicapp/react-web directory>
-
-This avoids the problem of multiple `yarn link` that may conflict with each other.
-
-plasmic/wab uses this approach. So you don't have to do anything except for `yarn build` to
-use the latest @plasmicapp/react-web package for plasmic/wab.
+Avoid raw package-manager links: they can resolve React and other peer dependencies
+from this monorepo instead of the consumer. See the root `CONTRIBUTING.md` for the
+full local-link and Verdaccio workflows.

package/dist/all.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 import * as React$1 from 'react';
-import React__default, { AriaAttributes, DOMAttributes as DOMAttributes$1, AriaRole, CSSProperties as CSSProperties$1, ReactNode, ReactElement, FocusEvent, KeyboardEvent as KeyboardEvent$1, SyntheticEvent } from 'react';
-import { AriaCheckboxProps } from '@react-types/checkbox';
-import { AriaSwitchProps } from '@react-types/switch';
+import React__default, { AriaAttributes, DOMAttributes as DOMAttributes$1, AriaRole, CSSProperties as CSSProperties$1, ReactNode, ReactElement, FocusEvent, KeyboardEvent as KeyboardEvent$1, MouseEvent, SyntheticEvent } from 'react';
 
 declare global {
     interface Window {
@@ -13596,6 +13594,10 @@ declare function getStateSpecInPlasmicProxy(obj: any, path: ObjectPath): {
     isImplicitStateArray: boolean;
 } | undefined;
 declare function getCurrentInitialValue(obj: any, path: ObjectPath): any;
+/** Whether the runtime guard has detected instability in this initializer.
+ * Canvas edits clear the diagnostic when the initializer hash changes.
+ */
+declare function hasUnstableStateInitializer(obj: any, path: ObjectPath): boolean;
 declare function resetToInitialValue(obj: any, path: ObjectPath): void;
 /**
  * Forked from https://github.com/lukeed/dset
@@ -13975,6 +13977,34 @@ declare function Trans({ transKey, children }: TransProps): React__default.React
 
 
 
+type ValidationState = 'valid' | 'invalid';
+
+type ValidationError = string | string[];
+
+interface Validation<T = unknown> {
+  /** Whether user input is required on the input before form submission. */
+  isRequired?: boolean;
+  /** Whether the input value is invalid. */
+  isInvalid?: boolean;
+  /** @deprecated Use `isInvalid` instead. */
+  validationState?: ValidationState;
+  /**
+   * Whether to use native HTML form validation to prevent form submission
+   * when the value is missing or invalid, or mark the field as required
+   * or invalid via ARIA.
+   *
+   * @default 'aria'
+   */
+  validationBehavior?: 'aria' | 'native';
+  /**
+   * A function that returns an error message if a given value is invalid.
+   * Validation errors are displayed to the user when the form is submitted
+   * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
+   * prop instead.
+   */
+  validate?: (value: T) => ValidationError | true | null | undefined;
+}
+
 interface InputBase {
   /** Whether the input is disabled. */
   isDisabled?: boolean;
@@ -14019,6 +14049,14 @@ interface AriaLabelingProps {
   'aria-details'?: string;
 }
 
+interface AriaValidationProps {
+  // https://www.w3.org/TR/wai-aria-1.2/#aria-errormessage
+  /**
+   * Identifies the element that provides an error message for the object.
+   */
+  'aria-errormessage'?: string;
+}
+
 // A set of common DOM props that are allowed on any component
 // Ensure this is synced with DOMPropNames in filterDOMProps
 interface DOMProps {
@@ -14039,6 +14077,20 @@ interface FocusableDOMProps extends DOMProps {
   excludeFromTabOrder?: boolean;
 }
 
+interface InputDOMProps {
+  /**
+   * The name of the input element, used when submitting an HTML form. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  name?: string;
+  /**
+   * The `<form>` element to associate the input with.
+   * The value of this attribute must be the id of a `<form>` in the same document.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+   */
+  form?: string;
+}
+
 /** Any focusable element, including both HTML and SVG elements. */
 interface FocusableElement extends Element, HTMLOrSVGElement {}
 
@@ -14277,6 +14329,31 @@ interface FocusEvents<Target = Element> {
   onFocusChange?: (isFocused: boolean) => void;
 }
 
+interface PressEvents {
+  /** Handler that is called when the press is released over the target. */
+  onPress?: (e: PressEvent) => void;
+  /** Handler that is called when a press interaction starts. */
+  onPressStart?: (e: PressEvent) => void;
+  /**
+   * Handler that is called when a press interaction ends, either
+   * over the target or when the pointer leaves the target.
+   */
+  onPressEnd?: (e: PressEvent) => void;
+  /** Handler that is called when the press state changes. */
+  onPressChange?: (isPressed: boolean) => void;
+  /**
+   * Handler that is called when a press is released over the target, regardless of
+   * whether it started on the target or not.
+   */
+  onPressUp?: (e: PressEvent) => void;
+  /**
+   * **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`
+   * provided for compatibility with other libraries. `onPress` provides
+   * additional event details for non-mouse interactions.
+   */
+  onClick?: (e: MouseEvent<FocusableElement>) => void;
+}
+
 interface FocusableProps<Target = Element> extends FocusEvents<Target>, KeyboardEvents {
   /** Whether the element should receive focus on render. */
   autoFocus?: boolean;
@@ -14437,6 +14514,50 @@ declare function useButton<P extends PlumeButtonProps, C extends AnyPlasmicClass
     };
 };
 
+interface ToggleStateOptions extends InputBase {
+    /**
+     * Whether the element should be selected (uncontrolled).
+     */
+    defaultSelected?: boolean;
+    /**
+     * Whether the element should be selected (controlled).
+     */
+    isSelected?: boolean;
+    /**
+     * Handler that is called when the element's selection state changes.
+     */
+    onChange?: (isSelected: boolean) => void;
+}
+interface ToggleProps extends ToggleStateOptions, Validation<boolean>, FocusableProps {
+    /**
+     * The label for the element.
+     */
+    children?: ReactNode;
+    /**
+     * The value of the input element, used when submitting an HTML form. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).
+     */
+    value?: string;
+}
+
+interface AriaToggleProps extends ToggleProps, FocusableDOMProps, AriaLabelingProps, AriaValidationProps, InputDOMProps, PressEvents {
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current
+     * element.
+     */
+    'aria-controls'?: string;
+}
+
+interface CheckboxProps$1 extends ToggleProps {
+    /**
+     * Indeterminism is presentational only.
+     * The indeterminate visual representation remains regardless of user interaction.
+     */
+    isIndeterminate?: boolean;
+}
+interface AriaCheckboxProps extends CheckboxProps$1, InputDOMProps, AriaToggleProps {
+}
+
 interface StyleProps {
     className?: string;
     style?: React$1.CSSProperties;
@@ -15156,6 +15277,16 @@ interface ListState<T> {
 
 declare const SelectContext: React$1.Context<ListState<any> | undefined>;
 
+interface SwitchProps$1 extends ToggleProps {
+}
+interface AriaSwitchProps extends SwitchProps$1, InputDOMProps, AriaToggleProps {
+    /**
+     * Identifies the element (or elements) whose contents or presence are controlled by the current
+     * element.
+     */
+    'aria-controls'?: string;
+}
+
 type SwitchRef = React$1.Ref<SwitchRefValue>;
 interface SwitchRefValue extends SwitchState {
     getRoot: () => HTMLElement | null;
@@ -15260,4 +15391,4 @@ interface TriggeredOverlayContextValue {
 }
 declare const TriggeredOverlayContext: React$1.Context<TriggeredOverlayContextValue | undefined>;
 
-export { $State, $StateSpec, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, InitFunc, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, ParamsRecord, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicPageProps, PlasmicRootProvider, PlasmicSlot, PlasmicTranslator, PlumeButtonProps, PlumeTextInputProps, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createStyleTokensProvider, createUseGlobalVariants, createUseScreenVariants, createUseStyleTokens, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, dlv as get, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, resetToInitialValue, set, setPlumeStrictMode, useButton, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, usePlasmicTranslator, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, withPlasmicPageGuard, wrapWithClassName };
+export { $State, $StateSpec, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, InitFunc, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, ParamsRecord, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicPageProps, PlasmicRootProvider, PlasmicSlot, PlasmicTranslator, PlumeButtonProps, PlumeTextInputProps, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createStyleTokensProvider, createUseGlobalVariants, createUseScreenVariants, createUseStyleTokens, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, dlv as get, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasUnstableStateInitializer, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, resetToInitialValue, set, setPlumeStrictMode, useButton, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, usePlasmicTranslator, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, withPlasmicPageGuard, wrapWithClassName };

package/dist/index.cjs.js

@@ -2276,7 +2276,6 @@ function ensureStateCell(target, property, path, node) {
     var stateCell = proxyObjToStateCell.get(target);
     if (!(property in stateCell)) {
         stateCell[property] = {
-            listeners: [],
             initialValue: UNINITIALIZED,
             path: path,
             node: node,
@@ -2334,7 +2333,6 @@ function subscribeToValtio($$state, statePath, node) {
 function initializeStateValue($$state, initialStateCell, proxyRoot) {
     var _a;
     var initialStateName = initialStateCell.node.getSpec().path;
-    var stateAccess = new Set();
     $$state.stateInitializationEnv.visited.add(initialStateName);
     $$state.stateInitializationEnv.stack.push(initialStateName);
     var $state = create$StateProxy($$state, function (internalStateCell) { return ({
@@ -2356,7 +2354,6 @@ function initializeStateValue($$state, initialStateCell, proxyRoot) {
                 throw new UnknownError("Internal error: cycle not found");
             }
             var stateCell = getStateCellFrom$StateRoot(proxyRoot, internalStateCell.path);
-            stateAccess.add({ stateCell: stateCell });
             if (spec.valueProp) {
                 return $$state.env.$props[spec.valueProp];
             }
@@ -2369,14 +2366,6 @@ function initializeStateValue($$state, initialStateCell, proxyRoot) {
             throw new InvalidOperation("Cannot update state values during initialization");
         },
     }); });
-    stateAccess.forEach(function (_a) {
-        var stateCell = _a.stateCell;
-        stateCell.listeners.push(function () {
-            var _a;
-            var newValue = invokeInitFunc(initialStateCell.node.getSpec().initFunc, __assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
-            set(proxyRoot, initialStateCell.path, newValue);
-        });
-    });
     var initialValue = invokeInitFunc(initialStateCell.initFunc, __assign({ $state: $state }, ((_a = initialStateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env)));
     var initialSpec = initialStateCell.node.getSpec();
     // Try to clone initialValue. It can fail if it's a PlasmicUndefinedDataProxy
@@ -2561,6 +2550,83 @@ function extractDollarStateParametersBackwardCompatible() {
 function invokeInitFunc(initFunc, env) {
     return initFunc(env);
 }
+function initFuncEnv($$state, stateCell, $state) {
+    var _a;
+    return __assign({ $state: $state }, ((_a = stateCell.overrideEnv) !== null && _a !== void 0 ? _a : $$state.env));
+}
+// Pure check with no effect on the reset budget; the layout scan decides.
+function initValueChanged($$state, stateCell, $state) {
+    try {
+        return !deepEqual(invokeInitFunc(stateCell.initFunc, initFuncEnv($$state, stateCell, $state)), stateCell.initialValue);
+    }
+    catch (_a) {
+        return false;
+    }
+}
+// Bound consecutive resets without a settled evaluation, even on slow renders.
+var MAX_UNSETTLED_RESETS = 5;
+function warnUnstableInitFunc(stateCell, reason) {
+    if (stateCell.warnedUnstableInitFunc) {
+        return;
+    }
+    stateCell.warnedUnstableInitFunc = true;
+    console.warn("Plasmic: the initial value of state \"".concat(stateCell.path.join("."), "\" ").concat(reason, ", so it is kept at its current value instead of being reset. To set a random or time-based value, run an interaction from a Side Effect component instead."));
+}
+/**
+ * Whether `stateCell` should be reset to what `initFunc` now returns. An
+ * initFunc that returns a new value every time it runs would reset on every
+ * render, and each reset renders again, so the loop never ends. We refuse to
+ * reset in two cases:
+ *
+ * - Two back-to-back calls disagree, indicating an unstable initializer.
+ * - Too many resets occur without a settled evaluation. This also catches
+ *   values that are stable within a render but drift between renders.
+ *
+ * This is a circuit breaker, not a proof of determinism: legitimate feedback
+ * chains can also exceed the budget, and unstable functions can return equal
+ * values by chance. Initializers must be pure and deterministic for fixed inputs.
+ *
+ * Rejected probes never change the installed initial value used by preview
+ * reset. A rejected value that repeats on a later render can reopen the budget.
+ */
+function shouldReInitialize(stateCell, initFunc, env) {
+    var _a;
+    var newInit;
+    var repeats;
+    try {
+        newInit = invokeInitFunc(initFunc, env);
+        if (deepEqual(newInit, stateCell.initialValue)) {
+            stateCell.unsettledResetCount = undefined;
+            stateCell.rejectedInitProbe = undefined;
+            return false;
+        }
+        repeats = deepEqual(invokeInitFunc(initFunc, env), newInit);
+    }
+    catch (_b) {
+        // initFunc can throw, e.g. if it tries to access loading $queries. Swallow here
+        // since we only care whether the init value changed, not error handling.
+        return false;
+    }
+    var reason;
+    if (!repeats) {
+        reason = "is not deterministic";
+    }
+    else {
+        var rejectedInitProbe = stateCell.rejectedInitProbe;
+        var reopened = rejectedInitProbe && deepEqual(newInit, rejectedInitProbe.value);
+        stateCell.unsettledResetCount = reopened
+            ? 1
+            : ((_a = stateCell.unsettledResetCount) !== null && _a !== void 0 ? _a : 0) + 1;
+        if (stateCell.unsettledResetCount > MAX_UNSETTLED_RESETS) {
+            reason = "keeps changing";
+        }
+    }
+    stateCell.rejectedInitProbe = reason ? { value: newInit } : undefined;
+    if (reason) {
+        warnUnstableInitFunc(stateCell, reason);
+    }
+    return !reason;
+}
 function useDollarState(specs) {
     var rest = [];
     for (var _i = 1; _i < arguments.length; _i++) {
@@ -2568,6 +2634,10 @@ function useDollarState(specs) {
     }
     var _a = extractDollarStateParametersBackwardCompatible.apply(void 0, __spreadArray([], __read(rest), false)), env = _a.env, opts = _a.opts;
     var _b = __read(React.useState(), 2), setState = _b[1];
+    // Set for the whole render pass and cleared by the layout effect, which applies
+    // registrations. One that arrives outside a render must schedule a render to be applied.
+    var rendering = React.useRef(false);
+    rendering.current = true;
     var mountedRef = React.useRef(false);
     var isMounted = React.useCallback(function () { return mountedRef.current; }, []);
     React.useEffect(function () {
@@ -2592,14 +2662,11 @@ function useDollarState(specs) {
             specTreeLeaves: getSpecTreeLeaves(rootSpecTree),
             stateValues: valtio.proxy({}),
             env: envFieldsAreNonNill(env),
-            specs: [],
-            registrationsQueue: [],
             stateInitializationEnv: { stack: [], visited: new Set() },
             initializedLeafPaths: new Set(),
         };
     })()).current;
     $$state.env = envFieldsAreNonNill(env);
-    $$state.specs = specs;
     var create$State = React.useCallback(function () {
         var $state = Object.assign(create$StateProxy($$state, function (stateCell) {
             var spec = stateCell.node.getSpec();
@@ -2625,24 +2692,21 @@ function useDollarState(specs) {
                 },
             };
         }), __assign({ registerInitFunc: function (pathStr, f, repetitionIndex, overrideEnv) {
-                var _a = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex), node = _a.node, realPath = _a.realPath;
+                var realPath = findStateCell($$state.rootSpecTree, pathStr, repetitionIndex).realPath;
                 var stateCell = getStateCellFrom$StateRoot($state, realPath);
-                var innerEnv = overrideEnv
+                // The first initializer always applies, even if unstable, like the
+                // lazy initialization of a spec initFunc.
+                stateCell.pendingInit || (stateCell.pendingInit = !stateCell.initFunc);
+                stateCell.initFunc = f;
+                stateCell.overrideEnv = overrideEnv
                     ? envFieldsAreNonNill(overrideEnv)
-                    : $$state.env;
-                if (!deepEqual(stateCell.initialValue, f(__assign({ $state: $state }, innerEnv)))) {
-                    $$state.registrationsQueue.push({
-                        node: node,
-                        path: realPath,
-                        f: f,
-                        overrideEnv: overrideEnv
-                            ? envFieldsAreNonNill(overrideEnv)
-                            : undefined,
-                    });
-                    if (!pendingUpdate.current) {
-                        pendingUpdate.current = true;
-                        forceUpdate();
-                    }
+                    : undefined;
+                if (!rendering.current &&
+                    !pendingUpdate.current &&
+                    (stateCell.pendingInit ||
+                        initValueChanged($$state, stateCell, $state))) {
+                    pendingUpdate.current = true;
+                    forceUpdate();
                 }
             } }, ((opts === null || opts === void 0 ? void 0 : opts.inCanvas)
             ? {
@@ -2663,6 +2727,9 @@ function useDollarState(specs) {
                         }
                         stateCell.initFunc = newSpec.initFunc;
                         stateCell.initFuncHash = (_b = newSpec.initFuncHash) !== null && _b !== void 0 ? _b : "";
+                        stateCell.unsettledResetCount = undefined;
+                        stateCell.warnedUnstableInitFunc = undefined;
+                        stateCell.rejectedInitProbe = undefined;
                         var init = spec.valueProp
                             ? $$state.env.$props[spec.valueProp]
                             : spec.initFunc
@@ -2698,47 +2765,24 @@ function useDollarState(specs) {
             });
         }
     }
-    var reInitializeState = function (stateCell) {
-        var _a, _b;
-        var newInit = initializeStateValue($$state, stateCell, $state);
-        var spec = stateCell.node.getSpec();
-        if (spec.onChangeProp) {
-            (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, newInit);
-        }
-    };
     useIsomorphicLayoutEffect(function () {
-        // For each spec with an initFunc, evaluate it and see if
-        // the init value has changed. If so, reset its state.
-        var resetSpecs = [];
-        getStateCells($state, $$state.rootSpecTree).forEach(function (stateCell) {
-            var _a;
-            if (stateCell.initFunc) {
-                try {
-                    var newInit = invokeInitFunc(stateCell.initFunc, __assign({ $state: $state }, ((_a = stateCell.overrideEnv) !== null && _a !== void 0 ? _a : envFieldsAreNonNill(env))));
-                    if (!deepEqual(newInit, stateCell.initialValue)) {
-                        resetSpecs.push({ stateCell: stateCell });
-                    }
-                }
-                catch (_b) {
-                    // Exception may be thrown from initFunc -- for example, if it tries to access $queries
-                    // that are still loading. We swallow those here, since we're only interested in
-                    // checking if the init value has changed, not in handling these errors.
-                }
-            }
+        rendering.current = false;
+        // Scan every cell before resetting any, so each initFunc sees the same
+        // pre-reset state.
+        var resetCells = getStateCells($state, $$state.rootSpecTree).filter(function (stateCell) {
+            return stateCell.pendingInit ||
+                (stateCell.initFunc &&
+                    shouldReInitialize(stateCell, stateCell.initFunc, initFuncEnv($$state, stateCell, $state)));
         });
-        resetSpecs.forEach(function (_a) {
-            var stateCell = _a.stateCell;
-            reInitializeState(stateCell);
+        resetCells.forEach(function (stateCell) {
+            var _a, _b;
+            stateCell.pendingInit = undefined;
+            var newInit = initializeStateValue($$state, stateCell, $state);
+            var spec = stateCell.node.getSpec();
+            if (spec.onChangeProp) {
+                (_b = (_a = $$state.env.$props)[spec.onChangeProp]) === null || _b === void 0 ? void 0 : _b.call(_a, newInit);
+            }
         });
-    }, [env.$props, $state, $$state, reInitializeState]);
-    useIsomorphicLayoutEffect(function () {
-        while ($$state.registrationsQueue.length) {
-            var _a = $$state.registrationsQueue.shift(), path = _a.path, f = _a.f, overrideEnv = _a.overrideEnv;
-            var stateCell = getStateCellFrom$StateRoot($state, path);
-            stateCell.initFunc = f;
-            stateCell.overrideEnv = overrideEnv;
-            reInitializeState(stateCell);
-        }
     });
     // immediately initialize exposed non-private states
     useIsomorphicLayoutEffect(function () {
@@ -2849,11 +2893,15 @@ function getStateCells($state, root) {
         try {
             for (var _c = __values(root.edges().entries()), _d = _c.next(); !_d.done; _d = _c.next()) {
                 var _e = __read(_d.value, 2), key = _e[0], child = _e[1];
-                if (typeof key === "string" && key in $state) {
+                if (typeof key !== "string") {
+                    continue;
+                }
+                // A leaf cell can exist without a local value, e.g. a valueProp state.
+                if (key in stateCell) {
+                    stateCells.push(stateCell[key]);
+                }
+                else if (key in $state) {
                     stateCells.push.apply(stateCells, __spreadArray([], __read(getStateCells($state[key], child)), false));
-                    if (key in stateCell) {
-                        stateCells.push(stateCell[key]);
-                    }
                 }
             }
         }
@@ -2902,6 +2950,16 @@ function getCurrentInitialValue(obj, path) {
     }
     return (_a = tryGetStateCellFrom$StateRoot(obj, path)) === null || _a === void 0 ? void 0 : _a.initialValue;
 }
+/** Whether the runtime guard has detected instability in this initializer.
+ * Canvas edits clear the diagnostic when the initializer hash changes.
+ */
+function hasUnstableStateInitializer(obj, path) {
+    var _a;
+    if (!isPlasmicStateProxy(obj)) {
+        return false;
+    }
+    return !!((_a = tryGetStateCellFrom$StateRoot(obj, path)) === null || _a === void 0 ? void 0 : _a.warnedUnstableInitFunc);
+}
 function resetToInitialValue(obj, path) {
     var stateCell = tryGetStateCellFrom$StateRoot(obj, path);
     if (stateCell) {
@@ -3243,10 +3301,10 @@ function useCheckbox(plasmicClass, props, config, ref) {
             props: mergeProps(getStyleProps(props), {
                 ref: rootRef,
             }),
-            wrapChildren: function (children) { return (React__namespace.createElement(React__namespace.Fragment, null,
+            wrapChildren: function (renderedChildren) { return (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement(visuallyHidden.VisuallyHidden, null,
                     React__namespace.createElement("input", __assign({}, inputProps, { ref: inputRef }))),
-                children)); },
+                renderedChildren)); },
         },
         _a);
     var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (config.labelSlot ? (_b = {}, _b[config.labelSlot] = children, _b) : {}));
@@ -3596,10 +3654,7 @@ function useMenu(plasmicClass, props, config, ref) {
     var state = tree.useTreeState(ariaProps);
     var menuListRef = React__namespace.useRef(null);
     var menuProps = menu.useMenu(__assign(__assign({}, ariaProps), { autoFocus: triggerContext === null || triggerContext === void 0 ? void 0 : triggerContext.autoFocus }), state, menuListRef).menuProps;
-    var contextValue = React__namespace.useMemo(function () { return ({ state: state, menuProps: props }); }, [
-        state,
-        props,
-    ]);
+    var contextValue = React__namespace.useMemo(function () { return ({ state: state, menuProps: props }); }, [state, props]);
     var variants = __assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalVariantProps), false)));
     var overrides = (_a = {},
         _a[config.root] = {
@@ -4150,10 +4205,10 @@ function useSwitch(plasmicClass, props, config, ref) {
             props: mergeProps(getStyleProps(props), {
                 ref: rootRef,
             }),
-            wrapChildren: function (children) { return (React__namespace.createElement(React__namespace.Fragment, null,
+            wrapChildren: function (renderedChildren) { return (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement(visuallyHidden.VisuallyHidden, null,
                     React__namespace.createElement("input", __assign({}, inputProps, { ref: inputRef }))),
-                children)); },
+                renderedChildren)); },
         },
         _a);
     var args = __assign(__assign({}, pick.apply(void 0, __spreadArray([props], __read(plasmicClass.internalArgProps), false))), (config.labelSlot ? (_b = {}, _b[config.labelSlot] = children, _b) : {}));
@@ -4370,6 +4425,7 @@ exports.getCurrentInitialValue = getCurrentInitialValue;
 exports.getDataProps = getDataProps;
 exports.getStateCellsInPlasmicProxy = getStateCellsInPlasmicProxy;
 exports.getStateSpecInPlasmicProxy = getStateSpecInPlasmicProxy;
+exports.hasUnstableStateInitializer = hasUnstableStateInitializer;
 exports.hasVariant = hasVariant;
 exports.initializeCodeComponentStates = initializeCodeComponentStates;
 exports.initializePlasmicStates = initializePlasmicStates;