xmlui 0.7.32 → 0.7.33

package/dist/scripts/bin/language-server.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+"use strict";
+require("ts-node").register({
+    transpileOnly: true,
+    esm: true,
+    compilerOptions: {
+        module: "commonjs",
+        esModuleInterop: true,
+    },
+});
+require("../src/language-server/server");

package/dist/scripts/src/components/Button/ButtonNative.js

@@ -52,6 +52,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Button_module_scss_1 = __importDefault(require("./Button.module.scss"));
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 exports.propDefaults = {
     type: "button",
     iconPosition: "start",
@@ -64,7 +65,7 @@ exports.propDefaults = {
 exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
     var { id, type = exports.propDefaults.type, icon, iconPosition = exports.propDefaults.iconPosition, contentPosition = exports.propDefaults.contentPosition, orientation = exports.propDefaults.orientation, variant = exports.propDefaults.variant, themeColor = exports.propDefaults.themeColor, size = exports.propDefaults.size, disabled, children, formId, onClick, onFocus, onBlur, style, gap, className, autoFocus } = _a, rest = __rest(_a, ["id", "type", "icon", "iconPosition", "contentPosition", "orientation", "variant", "themeColor", "size", "disabled", "children", "formId", "onClick", "onFocus", "onBlur", "style", "gap", "className", "autoFocus"]);
     const innerRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, () => innerRef.current);
+    const composedRef = ref ? (0, react_compose_refs_1.composeRefs)(ref, innerRef) : innerRef;
     (0, react_1.useEffect)(() => {
         if (autoFocus) {
             setTimeout(() => {
@@ -74,7 +75,7 @@ exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
         }
     }, [autoFocus]);
     const iconToLeft = iconPosition === "start";
-    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { id: id, type: type, ref: innerRef, className: (0, classnames_1.default)(className, Button_module_scss_1.default.button, {
+    return ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { id: id, type: type, ref: composedRef, className: (0, classnames_1.default)(className, Button_module_scss_1.default.button, {
             [Button_module_scss_1.default.buttonHorizontal]: orientation === "horizontal",
             [Button_module_scss_1.default.buttonVertical]: orientation === "vertical",
             [Button_module_scss_1.default.xs]: size === "xs",

package/dist/scripts/src/components/ComponentProvider.js

@@ -168,8 +168,12 @@ class ComponentRegistry {
         };
         // --- Registers a renderable component using its renderer function
         // --- and metadata
-        this.registerComponentRenderer = ({ type, renderer, metadata }, ...namespaces) => {
-            const component = { renderer, descriptor: metadata };
+        this.registerComponentRenderer = ({ type, renderer, metadata, isCompoundComponent, }, ...namespaces) => {
+            const component = {
+                renderer,
+                descriptor: metadata,
+                isCompoundComponent,
+            };
             namespaces.forEach((ns) => {
                 this.pool.set((ns ? ns + "." : "") + type, component);
             });

package/dist/scripts/src/components/DropdownMenu/DropdownMenuNative.js

@@ -45,8 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
-exports.MenuItem = MenuItem;
+exports.MenuItem = exports.defaultMenuItemProps = exports.DropdownMenu = exports.defaultDropdownMenuProps = void 0;
 exports.SubMenuItem = SubMenuItem;
 exports.MenuSeparator = MenuSeparator;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -88,15 +87,15 @@ exports.defaultMenuItemProps = {
     iconPosition: "start",
     active: false,
 };
-function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = exports.defaultMenuItemProps.iconPosition, active = exports.defaultMenuItemProps.active, }) {
+exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ children, onClick = constants_1.noop, label, style, icon, iconPosition = exports.defaultMenuItemProps.iconPosition, active = exports.defaultMenuItemProps.active, }, ref) {
     const iconToStart = iconPosition === "start";
     return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Item, { style: style, className: (0, classnames_1.default)(DropdownMenu_module_scss_1.default.DropdownMenuItem, {
             [DropdownMenu_module_scss_1.default.active]: active,
         }), onClick: (event) => {
             event.stopPropagation();
             onClick(event);
-        }, children: [iconToStart && icon, (0, jsx_runtime_1.jsx)("div", { className: DropdownMenu_module_scss_1.default.wrapper, children: label !== null && label !== void 0 ? label : children }), !iconToStart && icon] }));
-}
+        }, ref: ref, children: [iconToStart && icon, (0, jsx_runtime_1.jsx)("div", { className: DropdownMenu_module_scss_1.default.wrapper, children: label !== null && label !== void 0 ? label : children }), !iconToStart && icon] }));
+});
 function SubMenuItem({ children, label, triggerTemplate }) {
     const { root } = (0, ThemeContext_1.useTheme)();
     return ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Sub, { children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubTrigger, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubTrigger, asChild: true, children: triggerTemplate ? triggerTemplate : (0, jsx_runtime_1.jsx)("div", { children: label }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.SubContent, { className: DropdownMenu_module_scss_1.default.DropdownMenuSubContent, children: children }) })] }));

package/dist/scripts/src/components/Icon/Inspect.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const inspect_svg_react_1 = __importDefault(require("./svg/inspect.svg?react"));
+const InspectIcon = (props) => ((0, jsx_runtime_1.jsx)(inspect_svg_react_1.default, Object.assign({}, props)));
+exports.InspectIcon = InspectIcon;

package/dist/scripts/src/components/IconProvider.js

@@ -78,6 +78,7 @@ const SortAscendingIcon_1 = require("./Icon/SortAscendingIcon");
 const SortDescendingIcon_1 = require("./Icon/SortDescendingIcon");
 const NoSortIcon_1 = require("./Icon/NoSortIcon");
 const TrendingLevelIcon_1 = require("./Icon/TrendingLevelIcon");
+const Inspect_1 = require("./Icon/Inspect");
 const pool = new Map();
 function registerIconRenderer(name, renderer) {
     if (typeof name === "object") {
@@ -135,6 +136,7 @@ registerIconRenderer("exit", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxExit, Obje
 registerIconRenderer("adduser", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiUserPlus, Object.assign({}, props)));
 registerIconRenderer("userminus", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiUserMinus, Object.assign({}, props)));
 registerIconRenderer("plus", (props) => (0, jsx_runtime_1.jsx)(PlusIcon_1.PlusIcon, Object.assign({}, props)));
+registerIconRenderer("inspect", (props) => (0, jsx_runtime_1.jsx)(Inspect_1.InspectIcon, Object.assign({}, props)));
 registerIconRenderer("plus-circle", (props) => (0, jsx_runtime_1.jsx)(ai_1.AiOutlinePlusCircle, Object.assign({}, props)));
 registerIconRenderer("filledplus", (props) => (0, jsx_runtime_1.jsx)(FillPlusCricleIcon_1.FillPlusCircleIcon, Object.assign({}, props)));
 registerIconRenderer("chevronright", (props) => (0, jsx_runtime_1.jsx)(ChevronRight_1.ChevronRightIcon, Object.assign({}, props)));
@@ -192,7 +194,7 @@ registerIconRenderer("duplicate", (props) => (0, jsx_runtime_1.jsx)(hi_1.HiOutli
 registerIconRenderer("connect", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxLightningBolt, Object.assign({}, props)));
 registerIconRenderer("cog", (props) => (0, jsx_runtime_1.jsx)(hi_1.HiOutlineCog, Object.assign({}, props)));
 registerIconRenderer("sun", (props) => (0, jsx_runtime_1.jsx)(hi2_1.HiSun, Object.assign({}, props)));
-registerIconRenderer("moon", (props) => (0, jsx_runtime_1.jsx)(hi2_1.HiMoon, Object.assign({}, props)));
+registerIconRenderer("moon", (props) => (0, jsx_runtime_1.jsx)(fi_1.FiMoon, Object.assign({}, props)));
 registerIconRenderer("share", (props) => (0, jsx_runtime_1.jsx)(ShareIcon_1.ShareIcon, Object.assign({}, props)));
 registerIconRenderer("new-window", (props) => (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, Object.assign({}, props)));
 registerIconRenderer("paint", (props) => (0, jsx_runtime_1.jsx)(hi2_1.HiOutlinePaintBrush, Object.assign({}, props)));

package/dist/scripts/src/components/Table/Table.js

@@ -133,7 +133,7 @@ exports.TableMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
 });
-const TableWithColumns = ({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, layoutCss, registerComponentApi, }) => {
+const TableWithColumns = (0, react_1.forwardRef)(({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, layoutCss, registerComponentApi, }, ref) => {
     var _a, _b, _c, _d, _e, _f;
     const data = extractValue(node.props.items) || extractValue(node.props.data);
     const [columnIds, setColumnIds] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
@@ -181,7 +181,7 @@ const TableWithColumns = ({ extractValue, node, renderChild, lookupEventHandler,
     }, []);
     const columns = (0, react_1.useMemo)(() => columnIds.map((colId) => columnsByIds[colId]), [columnIds, columnsByIds]);
     const selectionContext = (0, SelectionStoreNative_1.useSelectionContext)();
-    const tableContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: renderChild(node.children) }, tableKey), (0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: columnRefresherContextValue, children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(TableNative_1.Table, { data: data, columns: columns, pageSizes: extractValue(node.props.pageSizes), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), registerComponentApi: registerComponentApi, noDataRenderer: node.props.noDataTemplate &&
+    const tableContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: tableContextValue, children: renderChild(node.children) }, tableKey), (0, jsx_runtime_1.jsx)(TableContext_1.TableContext.Provider, { value: columnRefresherContextValue, children: renderChild(node.children) }), (0, jsx_runtime_1.jsx)(TableNative_1.Table, { ref: ref, data: data, columns: columns, pageSizes: extractValue(node.props.pageSizes), rowsSelectable: extractValue.asOptionalBoolean(node.props.rowsSelectable), registerComponentApi: registerComponentApi, noDataRenderer: node.props.noDataTemplate &&
                     (() => {
                         return renderChild(node.props.noDataTemplate);
                     }), hideNoDataView: node.props.noDataTemplate === null || node.props.noDataTemplate === "", loading: extractValue.asOptionalBoolean(node.props.loading), isPaginated: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.isPaginated), headerHeight: extractValue.asSize(node.props.headerHeight), rowDisabledPredicate: lookupSyncCallback(node.props.rowDisabledPredicate), sortBy: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.sortBy), sortingDirection: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.sortDirection), iconSortAsc: extractValue.asOptionalString((_d = node.props) === null || _d === void 0 ? void 0 : _d.iconSortAsc), iconSortDesc: extractValue.asOptionalString((_e = node.props) === null || _e === void 0 ? void 0 : _e.iconSortDesc), iconNoSort: extractValue.asOptionalString((_f = node.props) === null || _f === void 0 ? void 0 : _f.iconNoSort), sortingDidChange: lookupEventHandler("sortingDidChange"), onSelectionDidChange: lookupEventHandler("selectionDidChange"), willSort: lookupEventHandler("willSort"), style: layoutCss, uid: node.uid, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), hideHeader: extractValue.asOptionalBoolean(node.props.hideHeader), enableMultiRowSelection: extractValue.asOptionalBoolean(node.props.enableMultiRowSelection), alwaysShowSelectionHeader: extractValue.asOptionalBoolean(node.props.alwaysShowSelectionHeader) })] }));
@@ -189,7 +189,7 @@ const TableWithColumns = ({ extractValue, node, renderChild, lookupEventHandler,
         return (0, jsx_runtime_1.jsx)(SelectionStoreNative_1.StandaloneSelectionStore, { children: tableContent });
     }
     return tableContent;
-};
+});
 exports.tableComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TableMd, ({ extractValue, node, renderChild, lookupEventHandler, lookupSyncCallback, layoutCss, registerComponentApi, }) => {
     return ((0, jsx_runtime_1.jsx)(TableWithColumns, { node: node, extractValue: extractValue, lookupEventHandler: lookupEventHandler, lookupSyncCallback: lookupSyncCallback, layoutCss: layoutCss, renderChild: renderChild, registerComponentApi: registerComponentApi }));
 });

package/dist/scripts/src/components-core/ComponentDecorator.js

@@ -20,35 +20,39 @@ const ComponentDecorator = (0, react_1.forwardRef)((props, forwardedRef) => {
     const prevSiblingRef = (0, react_1.useRef)(null);
     const nextSiblingRef = (0, react_1.useRef)(null);
     const { onTargetMounted } = props;
-    const [handlesItemRef, sethandlesItemRef] = (0, react_1.useState)(false);
-    const [foundNode, setFoundNode] = (0, react_1.useState)(null);
+    const foundNode = (0, react_1.useRef)(null);
     const itemRef = (0, react_1.useRef)(null);
+    const [handlesItemRefs, setHandlesItemRefs] = (0, react_1.useState)(false);
     const itemRefCallback = (0, react_1.useCallback)((node) => {
         itemRef.current = node;
         if (node !== null) {
             onTargetMounted === null || onTargetMounted === void 0 ? void 0 : onTargetMounted();
         }
-        sethandlesItemRef(true);
+        setHandlesItemRefs(true);
     }, [onTargetMounted]);
+    const [_, setForceRender] = (0, react_1.useState)(0);
     const shallowAttrs = (0, hooks_1.useShallowCompareMemoize)(props.attr);
-    const shouldRenderHelperSpan = !props.allowOnlyRefdChild && !handlesItemRef;
+    const shouldRenderHelperSpan = !props.allowOnlyRefdChild && !handlesItemRefs;
     // --- When the component mounts, we add the attributes to the component's DOM node
     (0, react_1.useLayoutEffect)(() => {
         let node;
-        if (shouldRenderHelperSpan) {
-            if (foundNode) {
-                node = foundNode;
-            }
-            else {
-                node =
-                    (prevSiblingRef.current.nextElementSibling === nextSiblingRef.current
-                        ? null
-                        : prevSiblingRef.current.nextElementSibling) || null;
-                setFoundNode(node);
-            }
+        if (handlesItemRefs) {
+            node = itemRef.current;
         }
         else {
-            node = itemRef.current;
+            if (shouldRenderHelperSpan) {
+                if (foundNode.current) {
+                    node = foundNode.current;
+                }
+                else {
+                    node =
+                        (prevSiblingRef.current.nextElementSibling === nextSiblingRef.current
+                            ? null
+                            : prevSiblingRef.current.nextElementSibling) || null;
+                    foundNode.current = node;
+                    setForceRender((prev) => prev++);
+                }
+            }
         }
         if (node) {
             Object.entries(shallowAttrs).forEach(([key, value]) => {
@@ -60,9 +64,9 @@ const ComponentDecorator = (0, react_1.forwardRef)((props, forwardedRef) => {
                 }
             });
         }
-    }, [shouldRenderHelperSpan, shallowAttrs, foundNode]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!foundNode && shouldRenderHelperSpan && (0, jsx_runtime_1.jsx)("span", { style: HIDDEN_STYLE, ref: prevSiblingRef }), (0, react_1.cloneElement)(props.children, {
+    }, [shouldRenderHelperSpan, shallowAttrs, handlesItemRefs]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!foundNode.current && shouldRenderHelperSpan && ((0, jsx_runtime_1.jsx)("span", { style: HIDDEN_STYLE, ref: prevSiblingRef })), (0, react_1.cloneElement)(props.children, {
                 ref: forwardedRef ? (0, react_compose_refs_1.composeRefs)(itemRefCallback, forwardedRef) : itemRefCallback,
-            }), !foundNode && shouldRenderHelperSpan && (0, jsx_runtime_1.jsx)("span", { style: HIDDEN_STYLE, ref: nextSiblingRef })] }));
+            }), !foundNode.current && shouldRenderHelperSpan && ((0, jsx_runtime_1.jsx)("span", { style: HIDDEN_STYLE, ref: nextSiblingRef }))] }));
 });
 exports.default = ComponentDecorator;

package/dist/scripts/src/components-core/InspectorContext.js

@@ -147,7 +147,7 @@ function InspectButton({ inspectId, node }) {
     }, [inspectId]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [visible &&
                 !!root &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, Object.assign({ icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "code" }), variant: "ghost", size: "xs", className: (0, classnames_1.default)(InspectorButton_module_scss_1.default.wrapper, "_debug-inspect-button"), ref: (el) => setPopperElement(el), style: Object.assign({}, popperStyles.popper) }, attributes.popper, { onMouseEnter: () => {
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, Object.assign({ variant: "ghost", className: (0, classnames_1.default)(InspectorButton_module_scss_1.default.wrapper, "_debug-inspect-button"), ref: (el) => setPopperElement(el), style: Object.assign(Object.assign({}, popperStyles.popper), { padding: 0 }) }, attributes.popper, { onMouseEnter: () => {
                         hoverRef.current = true;
                         if (timeoutRef.current) {
                             clearTimeout(timeoutRef.current);
@@ -158,7 +158,7 @@ function InspectButton({ inspectId, node }) {
                         setVisible(false);
                     }, onClick: () => {
                         setShowCode(true);
-                    } })), root), showCode && (0, jsx_runtime_1.jsx)(InspectModal, { onClose: () => setShowCode(false), node: node })] }));
+                    }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "inspect", size: "md" }) })), root), showCode && (0, jsx_runtime_1.jsx)(InspectModal, { onClose: () => setShowCode(false), node: node })] }));
 }
 function useInspector(node, uid) {
     var _a;

package/dist/scripts/src/components-core/abstractions/standalone.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/scripts/src/components-core/interception/abstractions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/scripts/src/components-core/rendering/ComponentAdapter.js

@@ -171,7 +171,7 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
         //   ...layoutContextRef?.current,
         //   mediaSize: appContext.mediaSize,
         // });
-    }, [appContext.mediaSize, layoutContextRef, safeNode.props, themeVars, valueExtractor]);
+    }, [appContext.mediaSize, layoutContextRef, safeNode.props, valueExtractor]);
     // --- As compileLayout generates new cssProps and nonCssProps objects every time, we need to
     // --- memoize them using shallow comparison to avoid unnecessary re-renders.
     const stableLayoutCss = (0, hooks_1.useShallowCompareMemoize)(cssProps);
@@ -247,7 +247,7 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
     if ((ref || !(0, lodash_es_1.isEmpty)(mouseEventHandlers)) && renderedNode && react_1.default.isValidElement(renderedNode)) {
         // --- For radix UI/accessibility, read more here:
         // --- https://www.radix-ui.com/primitives/docs/guides/composition
-        return (0, react_1.cloneElement)(renderedNode, Object.assign({ ref: ref ? (0, react_compose_refs_1.composeRefs)(ref, renderedNode.ref) : undefined }, (0, mergeProps_1.mergeProps)(Object.assign(Object.assign({}, renderedNode.props), mouseEventHandlers), rest)));
+        return (0, react_1.cloneElement)(renderedNode, Object.assign({ ref: ref ? (0, react_compose_refs_1.composeRefs)(ref, renderedNode.ref) : renderedNode.ref }, (0, mergeProps_1.mergeProps)(Object.assign(Object.assign({}, renderedNode.props), mouseEventHandlers), rest)));
     }
     // --- If the rendering resulted in multiple React nodes, wrap them in a fragment.
     return react_1.default.isValidElement(renderedNode) ? renderedNode : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderedNode });

package/dist/scripts/src/components-core/rendering/Container.js

@@ -392,7 +392,7 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
         delete fnsRef.current[uid];
     });
     // --- The container wraps the `renderChild` function to provide that to the child components
-    const stableRenderChild = (0, react_1.useCallback)((childNode, lc, pRenderContext, uidInfoRef) => {
+    const stableRenderChild = (0, react_1.useCallback)((childNode, lc, pRenderContext, uidInfoRef, ref) => {
         // TODO: Check if this is a valid use case
         if (typeof childNode === "string") {
             throw Error("should be resolved for now");
@@ -412,7 +412,7 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
                 return undefined;
             }
             // --- Invoke the jolly-joker `renderChild` function to render the child. Note that
-            // --- in ithe context, we pass the `stableRenderChild` function, so the child can
+            // --- in the context, we pass the `stableRenderChild` function, so the child can
             // --- render its children recursively.
             const renderedChild = (0, renderChild_1.renderChild)({
                 node: child,
@@ -474,7 +474,6 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
         statePartChanged,
         memoedVarsRef,
         cleanup,
-        ref,
     ]);
     // --- Log the component state if you need it for debugging
     if ((_a = node.props) === null || _a === void 0 ? void 0 : _a.debug) {
@@ -492,37 +491,25 @@ exports.Container = (0, react_1.memo)((0, react_1.forwardRef)(function Container
     const debugContext = (0, DebugViewProvider_1.useDebugView)();
     const stateViewProps = debugContext === null || debugContext === void 0 ? void 0 : debugContext.stateViewOptions;
     const showContainer = stateViewProps && debugContext.displayStateView;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [showContainer && ((0, jsx_runtime_1.jsxs)(StateViewerNative_1.StateViewer, { state: componentState, showBoundary: stateViewProps === null || stateViewProps === void 0 ? void 0 : stateViewProps.showBoundary, blink: stateViewProps === null || stateViewProps === void 0 ? void 0 : stateViewProps.blink, children: [renderLoaders({
-                        uidInfo,
-                        uidInfoRef,
-                        loaders: node.loaders,
-                        componentState,
-                        memoedVarsRef,
-                        //if it's an api bound container, we always use this container, otherwise use the parent if it's an implicit one
-                        dispatch: apiBoundContainer ? containerDispatch : dispatch,
-                        registerComponentApi: apiBoundContainer
-                            ? containerRegisterComponentApi
-                            : registerComponentApi,
-                        appContext,
-                        lookupAction,
-                        lookupSyncCallback,
-                        cleanup,
-                    }), stableRenderChild(node.children, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, parentRenderContext, uidInfoRef)] })), !showContainer && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderLoaders({
-                        uidInfo,
-                        uidInfoRef,
-                        loaders: node.loaders,
-                        componentState,
-                        memoedVarsRef,
-                        //if it's an api bound container, we always use this container, otherwise use the parent if it's an implicit one
-                        dispatch: apiBoundContainer ? containerDispatch : dispatch,
-                        registerComponentApi: apiBoundContainer
-                            ? containerRegisterComponentApi
-                            : registerComponentApi,
-                        appContext,
-                        lookupAction,
-                        lookupSyncCallback,
-                        cleanup,
-                    }), stableRenderChild(node.children, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, parentRenderContext, uidInfoRef)] }))] }, node.uid
+    const renderedChildren = stableRenderChild(node.children, layoutContextRef === null || layoutContextRef === void 0 ? void 0 : layoutContextRef.current, parentRenderContext, uidInfoRef, ref);
+    const renderedLoaders = renderLoaders({
+        uidInfo,
+        uidInfoRef,
+        loaders: node.loaders,
+        componentState,
+        memoedVarsRef,
+        //if it's an api bound container, we always use this container, otherwise use the parent if it's an implicit one
+        dispatch: apiBoundContainer ? containerDispatch : dispatch,
+        registerComponentApi: apiBoundContainer
+            ? containerRegisterComponentApi
+            : registerComponentApi,
+        appContext,
+        lookupAction,
+        lookupSyncCallback,
+        cleanup,
+    });
+    const containerContent = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderedLoaders, renderedChildren] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [showContainer && ((0, jsx_runtime_1.jsx)(StateViewerNative_1.StateViewer, { state: componentState, showBoundary: stateViewProps === null || stateViewProps === void 0 ? void 0 : stateViewProps.showBoundary, blink: stateViewProps === null || stateViewProps === void 0 ? void 0 : stateViewProps.blink, children: containerContent })), !showContainer && containerContent] }, node.uid
         ? `${resolvedKey}>${(0, extractParam_1.extractParam)(componentState, node.uid, appContext, true)}`
         : undefined));
 }));