@univerjs/ui 0.22.1 → 0.23.0-insiders.20260522-e8f2a3b

package/lib/index.js

@@ -2274,6 +2274,7 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 				key,
 				order: value.order,
 				title: value.title,
+				contextual: value.contextual,
 				quickLayout: value.quickLayout
 			};
 			if (value.menuItemFactory) {
@@ -2905,6 +2906,7 @@ function RectPopup(props) {
 			window.removeEventListener("contextmenu", handleContextMenu);
 		};
 	}, [contextMenuFn]);
+	const dir = useObservable(useDependency(LocaleService).direction$);
 	const ele = /* @__PURE__ */ jsxs(Fragment$1, { children: [mask && /* @__PURE__ */ jsx("div", {
 		"data-u-comp": "rect-popup-mask",
 		className: "univer-fixed univer-inset-0 univer-z-[100]",
@@ -2913,6 +2915,7 @@ function RectPopup(props) {
 	}), /* @__PURE__ */ jsx("section", {
 		"data-u-comp": "rect-popup",
 		ref: nodeRef,
+		dir,
 		className: clsx("univer-pointer-events-auto univer-fixed univer-left-[-9999px] univer-top-[-9999px] univer-z-[1020]", {
 			"univer-hidden": hidden,
 			"univer-animate-in univer-fade-in-70": !hidden
@@ -3033,11 +3036,29 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		_defineProperty(this, "collapsedIds$", this._collapsedIds$.asObservable());
 		_defineProperty(this, "_fakeToolbarVisible$", new BehaviorSubject(false));
 		_defineProperty(this, "fakeToolbarVisible$", this._fakeToolbarVisible$.asObservable());
+		_defineProperty(this, "_visibleContextualTabs", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_contextualTabs", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_lastNonContextualActivatedTab", "ribbon.start");
 		this._initRibbonSubscription();
 	}
 	setActivatedTab(tab) {
+		if (!this._isContextualTab(tab)) this._lastNonContextualActivatedTab = tab;
 		this._activatedTab$.next(tab);
 	}
+	showContextualTab(tab, options) {
+		this._visibleContextualTabs.add(tab);
+		this._updateRibbon();
+		if (options === null || options === void 0 ? void 0 : options.activate) this.setActivatedTab(tab);
+	}
+	hideContextualTab(tab) {
+		if (!this._visibleContextualTabs.delete(tab)) return;
+		this._updateRibbon();
+	}
+	hideAllContextualTabs() {
+		if (this._visibleContextualTabs.size === 0) return;
+		this._visibleContextualTabs.clear();
+		this._updateRibbon();
+	}
 	setCollapsedIds(ids) {
 		this._collapsedIds$.next(ids);
 	}
@@ -3050,7 +3071,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		}));
 	}
 	_updateRibbon() {
-		const ribbon = this._menuManagerService.getMenuByPositionKey("ribbon");
+		const ribbon = this._filterContextualTabs(this._menuManagerService.getMenuByPositionKey("ribbon"));
 		const hiddenObservableMap = [];
 		const hiddenKeyMap = [];
 		for (const group of ribbon) if (group.children) {
@@ -3063,7 +3084,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 			}
 		}
 		if (hiddenObservableMap.length === 0) {
-			this._ribbon$.next(ribbon);
+			this._setRibbon(ribbon);
 			return;
 		}
 		combineLatest(hiddenObservableMap).pipe(startWith$1(new Array(hiddenObservableMap.length).fill(false))).subscribe((hiddenMap) => {
@@ -3106,9 +3127,29 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 					return (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length;
 				})) newRibbon.push(newGroup);
 			}
-			this._ribbon$.next(newRibbon);
+			this._setRibbon(newRibbon);
 		}).unsubscribe();
 	}
+	_filterContextualTabs(ribbon) {
+		this._contextualTabs.clear();
+		ribbon.forEach((group) => {
+			if (group.contextual) this._contextualTabs.add(group.key);
+		});
+		return ribbon.filter((group) => !group.contextual || this._visibleContextualTabs.has(group.key));
+	}
+	_setRibbon(ribbon) {
+		const activatedTab = this._activatedTab$.getValue();
+		const activeGroup = ribbon.find((group) => group.key === activatedTab);
+		if (!activeGroup && this._contextualTabs.has(activatedTab)) {
+			var _ref, _ribbon$find;
+			const fallbackTab = (_ref = (_ribbon$find = ribbon.find((group) => group.key === this._lastNonContextualActivatedTab && !group.contextual)) !== null && _ribbon$find !== void 0 ? _ribbon$find : ribbon.find((group) => group.key === "ribbon.start")) !== null && _ref !== void 0 ? _ref : ribbon[0];
+			if (fallbackTab) this._activatedTab$.next(fallbackTab.key);
+		} else if (activeGroup && !activeGroup.contextual) this._lastNonContextualActivatedTab = activeGroup.key;
+		this._ribbon$.next(ribbon);
+	}
+	_isContextualTab(tab) {
+		return this._contextualTabs.has(tab) || this._ribbon$.getValue().some((group) => group.key === tab && group.contextual);
+	}
 };
 DesktopRibbonService = __decorate([__decorateParam(0, IMenuManagerService), __decorateParam(1, IUniverInstanceService)], DesktopRibbonService);
 
@@ -3199,7 +3240,8 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 		overlay: /* @__PURE__ */ jsx("div", {
 			className: "univer-grid univer-gap-1 univer-px-2 univer-py-1",
 			children: ribbon.map((group) => {
-				const Icon = iconMap[group.key];
+				var _iconMap;
+				const Icon = (_iconMap = iconMap[group.key]) !== null && _iconMap !== void 0 ? _iconMap : MoreFunctionIcon;
 				return /* @__PURE__ */ jsxs("a", {
 					"data-u-comp": "ribbon-group-btn",
 					className: "univer-box-border univer-flex univer-cursor-pointer univer-items-center univer-gap-2.5 univer-rounded-lg univer-px-2 univer-py-1.5 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
@@ -3423,9 +3465,20 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
 	const menuManagerService = useDependency(IMenuManagerService);
 	const [hiddenStates, setHiddenStates] = useState({});
+	const [menuVersion, setMenuVersion] = useState(0);
+	useEffect(() => {
+		const subscription = menuManagerService.menuChanged$.subscribe(() => {
+			setMenuVersion((version) => version + 1);
+		});
+		return () => subscription.unsubscribe();
+	}, [menuManagerService]);
 	const menuItems = useMemo(() => {
 		return menuId ? menuManagerService.getMenuByPositionKey(menuId) : [];
-	}, [menuId]);
+	}, [
+		menuId,
+		menuManagerService,
+		menuVersion
+	]);
 	const filteredMenuItems = useMemo(() => {
 		return menuItems.filter((item) => {
 			var _item$key;
@@ -4189,6 +4242,7 @@ function ContextMenuPanel(props) {
 		onWheel: (event) => event.stopPropagation(),
 		children: /* @__PURE__ */ jsx(ContextMenuMenu, {
 			menuSchemas: menuItems,
+			menuSessionVersion,
 			submenuPortalContainer,
 			onOptionSelect,
 			maxMenuHeight
@@ -4196,7 +4250,7 @@ function ContextMenuPanel(props) {
 	});
 }
 function ContextMenuMenu(props) {
-	const { menuSchemas, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const { menuSchemas, menuSessionVersion, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
 	const localeService = useDependency(LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates$1(menuSchemas);
 	const visibleSchemas = useMemo(() => {
@@ -4211,6 +4265,7 @@ function ContextMenuMenu(props) {
 		if (menuSchema.item) return /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 			menuKey: menuSchema.key,
 			menuItem: menuSchema.item,
+			menuSessionVersion,
 			submenuPortalContainer,
 			onOptionSelect,
 			maxMenuHeight
@@ -4234,6 +4289,7 @@ function ContextMenuMenu(props) {
 			}), menuSchema.children.map((childSchema) => childSchema.item && /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 				menuKey: childSchema.key,
 				menuItem: childSchema.item,
+				menuSessionVersion,
 				submenuPortalContainer,
 				onOptionSelect,
 				maxMenuHeight
@@ -4242,7 +4298,8 @@ function ContextMenuMenu(props) {
 	}) });
 }
 function ContextMenuMenuItem(props) {
-	const { menuKey, menuItem, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const { menuKey, menuItem, menuSessionVersion, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const direction = useObservable(useDependency(LocaleService).direction$);
 	const menuManagerService = useDependency(IMenuManagerService);
 	const disabled = useObservable(menuItem.disabled$, false);
 	const activated = useObservable(menuItem.activated$, false);
@@ -4275,7 +4332,8 @@ function ContextMenuMenuItem(props) {
 	}, [
 		menuItem.id,
 		menuItem.type,
-		menuManagerService
+		menuManagerService,
+		menuSessionVersion
 	]);
 	const hasSelectionSubmenu = selections.length > 0;
 	const hasSubItemSubmenu = subMenuItems.length > 0;
@@ -4394,6 +4452,7 @@ function ContextMenuMenuItem(props) {
 			children: [contentNode, hasSubmenu && /* @__PURE__ */ jsx(MoreIcon, { className: "univer-size-3.5 univer-text-gray-400 dark:!univer-text-gray-200" })]
 		}), hasSubmenu && submenuVisible && (submenuPortalContainer ? createPortal(/* @__PURE__ */ jsx("div", {
 			ref: submenuElementRef,
+			dir: direction,
 			["data-u-context-menu-submenu"]: "true",
 			className: "univer-z-[1080] univer-w-max univer-max-w-[calc(100vw-16px)]",
 			style: {
@@ -4470,6 +4529,7 @@ function ContextMenuMenuItem(props) {
 					})
 				}), hasSubItemSubmenu && /* @__PURE__ */ jsx(ContextMenuMenu, {
 					menuSchemas: subMenuItems,
+					menuSessionVersion,
 					submenuPortalContainer,
 					onOptionSelect: onSubmenuOptionSelect,
 					maxMenuHeight
@@ -4659,54 +4719,6 @@ function DesktopContextMenu() {
 	});
 }
 
-//#endregion
-//#region src/services/global-zone/global-zone.service.ts
-const IGlobalZoneService = createIdentifier("univer.global-zone-service");
-
-//#endregion
-//#region src/views/components/global-zone/GlobalZone.tsx
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-function GlobalZone() {
-	const globalZoneService = useDependency(IGlobalZoneService);
-	const [visible, setVisible] = useState(false);
-	const componentKey = useObservable(globalZoneService.componentKey$, globalZoneService.componentKey);
-	const componentManager = useDependency(ComponentManager);
-	const Component = useMemo(() => {
-		const Component = componentManager.get(componentKey !== null && componentKey !== void 0 ? componentKey : "");
-		if (Component) return Component;
-	}, [componentKey, componentManager]);
-	useEffect(() => {
-		const subscription = globalZoneService.visible$.subscribe((val) => {
-			setVisible(val);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [globalZoneService.visible$]);
-	if (!visible) return null;
-	return /* @__PURE__ */ jsx("section", {
-		className: clsx("univer-absolute univer-bg-gray-100", {
-			"univer-hidden": !visible,
-			"univer-inset-0 univer-z-[100] univer-block univer-size-full": visible
-		}),
-		children: Component && /* @__PURE__ */ jsx(Component, {})
-	});
-}
-
 //#endregion
 //#region src/views/components/sidebar/Sidebar.tsx
 function Sidebar() {
@@ -4890,11 +4902,14 @@ function DesktopWorkbenchContent(props) {
 		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
 	}, [onRendered]);
 	const [locale, setLocale] = useState(localeService.getLocales());
+	const [direction, setDirection] = useState(localeService.getDirection());
 	const portalContainer = useMemo(() => document.createElement("div"), []);
 	useEffect(() => {
 		document.body.appendChild(portalContainer);
 		const subscriptions = [localeService.localeChanged$.subscribe(() => {
 			setLocale(localeService.getLocales());
+		}), localeService.direction$.subscribe(() => {
+			setDirection(localeService.getDirection());
 		})];
 		return () => {
 			subscriptions.forEach((subscription) => subscription.unsubscribe());
@@ -4905,76 +4920,82 @@ function DesktopWorkbenchContent(props) {
 		mountContainer,
 		portalContainer
 	]);
+	useEffect(() => {
+		portalContainer.dir = direction;
+	}, [direction, portalContainer]);
 	return /* @__PURE__ */ jsxs(ConfigProvider, {
 		locale: locale === null || locale === void 0 ? void 0 : locale.design,
+		direction,
 		mountContainer: portalContainer,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				"data-u-comp": "workbench-layout",
-				className: clsx("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-				tabIndex: -1,
-				onBlur: (e) => e.stopPropagation(),
-				onContextMenu: (e) => e.preventDefault(),
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
-						children: /* @__PURE__ */ jsx(ComponentContainer, { components: customHeaderComponents }, "custom-header")
-					}),
-					header && toolbar && /* @__PURE__ */ jsx("header", {
-						"data-u-comp": "headerbar",
-						className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-						children: /* @__PURE__ */ jsx(ComponentContainer, {
-							components: toolbarComponents,
-							sharedProps: {
-								ribbonType,
-								headerMenuComponents,
-								headerMenu
-							}
-						}, "toolbar")
-					}),
-					/* @__PURE__ */ jsxs("section", {
-						className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-						children: [
-							/* @__PURE__ */ jsxs("div", {
-								className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-								children: [
-									/* @__PURE__ */ jsx("aside", {
-										"data-u-comp": "left-sidebar",
-										className: "univer-h-full",
-										children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-									}),
-									/* @__PURE__ */ jsxs("section", {
-										className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
-										children: [/* @__PURE__ */ jsx("header", { children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ jsx("section", {
-											className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
-											ref: contentRef,
-											"data-range-selector": true,
-											onContextMenu: (e) => e.preventDefault(),
-											children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
-										})]
-									}),
-									/* @__PURE__ */ jsx("aside", {
-										"data-u-comp": "right-sidebar",
-										className: "univer-z-[100] univer-h-full",
-										children: /* @__PURE__ */ jsx(Sidebar, {})
-									})
-								]
-							}),
-							footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, {
-								components: footerComponents,
-								sharedProps: { contextMenu }
-							}, "footer") }),
-							/* @__PURE__ */ jsx(ZenZone, {})
-						]
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(ComponentContainer, { components: globalComponents }, "global"),
-			/* @__PURE__ */ jsx(GlobalZone, {}),
-			contextMenu && /* @__PURE__ */ jsx(DesktopContextMenu, {}),
-			/* @__PURE__ */ jsx(FloatingContainer, {}),
-			/* @__PURE__ */ jsx("div", { id: popupRootId })
-		]
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-u-comp": "workbench-layout",
+			className: clsx("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+			tabIndex: -1,
+			onBlur: (e) => e.stopPropagation(),
+			onContextMenu: (e) => e.preventDefault(),
+			dir: direction,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
+					children: /* @__PURE__ */ jsx(ComponentContainer, { components: customHeaderComponents }, "custom-header")
+				}),
+				header && toolbar && /* @__PURE__ */ jsx("header", {
+					"data-u-comp": "headerbar",
+					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+					children: /* @__PURE__ */ jsx(ComponentContainer, {
+						components: toolbarComponents,
+						sharedProps: {
+							ribbonType,
+							headerMenuComponents,
+							headerMenu
+						}
+					}, "toolbar")
+				}),
+				/* @__PURE__ */ jsxs("section", {
+					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+							children: [
+								/* @__PURE__ */ jsx("aside", {
+									"data-u-comp": "left-sidebar",
+									className: "univer-h-full",
+									children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+								}),
+								/* @__PURE__ */ jsxs("section", {
+									className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
+									children: [/* @__PURE__ */ jsx("header", { children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ jsx("section", {
+										className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
+										ref: contentRef,
+										"data-range-selector": true,
+										onContextMenu: (e) => e.preventDefault(),
+										children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
+									})]
+								}),
+								/* @__PURE__ */ jsx("aside", {
+									"data-u-comp": "right-sidebar",
+									className: "univer-z-[100] univer-h-full",
+									children: /* @__PURE__ */ jsx(Sidebar, {})
+								})
+							]
+						}),
+						footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, {
+							components: footerComponents,
+							sharedProps: { contextMenu }
+						}, "footer") }),
+						/* @__PURE__ */ jsx(ZenZone, {})
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			dir: direction,
+			children: [
+				/* @__PURE__ */ jsx(ComponentContainer, { components: globalComponents }, "global"),
+				contextMenu && /* @__PURE__ */ jsx(DesktopContextMenu, {}),
+				/* @__PURE__ */ jsx(FloatingContainer, {}),
+				/* @__PURE__ */ jsx("div", { id: popupRootId })
+			]
+		})]
 	});
 }
 function FloatingContainer() {
@@ -5140,7 +5161,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "0.22.1";
+var version = "0.23.0-insiders.20260522-e8f2a3b";
 
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
@@ -5637,6 +5658,7 @@ function MobileContextMenu() {
 	const commandService = useDependency(ICommandService);
 	const layoutService = useDependency(ILayoutService);
 	const localeService = useDependency(LocaleService);
+	const direction = useObservable(localeService.direction$);
 	const { mountContainer } = useContext(ConfigContext);
 	visibleRef.current = visible;
 	useEffect(() => {
@@ -5676,6 +5698,7 @@ function MobileContextMenu() {
 	}, [localeService, menuType]);
 	if (!mountContainer || !visible) return null;
 	return createPortal(/* @__PURE__ */ jsxs("div", {
+		dir: direction,
 		className: "univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-items-end",
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
@@ -5752,6 +5775,7 @@ function MobileWorkbench(props) {
 		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
 	}, [onRendered]);
 	const [locale, setLocale] = useState(localeService.getLocales());
+	const [direction, setDirection] = useState(localeService.getDirection());
 	const portalContainer = useMemo(() => document.createElement("div"), []);
 	useLayoutEffect(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
@@ -5765,6 +5789,8 @@ function MobileWorkbench(props) {
 		document.body.appendChild(portalContainer);
 		const subscriptions = [localeService.localeChanged$.subscribe(() => {
 			setLocale(localeService.getLocales());
+		}), localeService.direction$.subscribe(() => {
+			setDirection(localeService.getDirection());
 		})];
 		return () => {
 			subscriptions.forEach((subscription) => subscription.unsubscribe());
@@ -5775,65 +5801,68 @@ function MobileWorkbench(props) {
 		mountContainer,
 		portalContainer
 	]);
+	useEffect(() => {
+		portalContainer.dir = direction;
+	}, [direction, portalContainer]);
 	return /* @__PURE__ */ jsxs(ConfigProvider, {
 		locale: locale === null || locale === void 0 ? void 0 : locale.design,
+		direction,
 		mountContainer: portalContainer,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				"data-u-comp": "app-layout",
-				className: clsx("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-				tabIndex: -1,
-				onBlur: (e) => e.stopPropagation(),
-				onContextMenu: (e) => e.preventDefault(),
-				children: [header && toolbar && /* @__PURE__ */ jsx("header", {
-					"data-u-comp": "headerbar",
-					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-					children: /* @__PURE__ */ jsx(ComponentContainer, {
-						components: toolbarComponents,
-						sharedProps: {
-							ribbonType,
-							headerMenuComponents,
-							headerMenu
-						}
-					}, "toolbar")
-				}), /* @__PURE__ */ jsxs("section", {
-					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-							children: [
-								/* @__PURE__ */ jsx("aside", {
-									className: "univer-h-full",
-									children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-								}),
-								/* @__PURE__ */ jsxs("section", {
-									className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
-									children: [/* @__PURE__ */ jsx("header", {
-										className: "univer-w-screen",
-										children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header")
-									}), /* @__PURE__ */ jsx("section", {
-										ref: contentRef,
-										className: "univer-relative univer-overflow-hidden",
-										"data-range-selector": true,
-										onContextMenu: (e) => e.preventDefault(),
-										children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
-									})]
-								}),
-								/* @__PURE__ */ jsx("aside", {
-									className: "univer-h-full",
-									children: /* @__PURE__ */ jsx(Sidebar, {})
-								})
-							]
-						}),
-						footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, { components: footerComponents }, "footer") }),
-						/* @__PURE__ */ jsx(GlobalZone, {}),
-						/* @__PURE__ */ jsx(ZenZone, {})
-					]
-				})]
-			}),
-			/* @__PURE__ */ jsx(ComponentContainer, { components: globalComponents }, "global"),
-			contextMenu && /* @__PURE__ */ jsx(MobileContextMenu, {})
-		]
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-u-comp": "app-layout",
+			className: clsx("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+			tabIndex: -1,
+			onBlur: (e) => e.stopPropagation(),
+			onContextMenu: (e) => e.preventDefault(),
+			dir: direction,
+			children: [header && toolbar && /* @__PURE__ */ jsx("header", {
+				"data-u-comp": "headerbar",
+				className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+				children: /* @__PURE__ */ jsx(ComponentContainer, {
+					components: toolbarComponents,
+					sharedProps: {
+						ribbonType,
+						headerMenuComponents,
+						headerMenu
+					}
+				}, "toolbar")
+			}), /* @__PURE__ */ jsxs("section", {
+				className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+						children: [
+							/* @__PURE__ */ jsx("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+							}),
+							/* @__PURE__ */ jsxs("section", {
+								className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
+								children: [/* @__PURE__ */ jsx("header", {
+									className: "univer-w-screen",
+									children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header")
+								}), /* @__PURE__ */ jsx("section", {
+									ref: contentRef,
+									className: "univer-relative univer-overflow-hidden",
+									"data-range-selector": true,
+									onContextMenu: (e) => e.preventDefault(),
+									children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
+								})]
+							}),
+							/* @__PURE__ */ jsx("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ jsx(Sidebar, {})
+							})
+						]
+					}),
+					footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, { components: footerComponents }, "footer") }),
+					/* @__PURE__ */ jsx(ZenZone, {})
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			dir: direction,
+			children: [/* @__PURE__ */ jsx(ComponentContainer, { components: globalComponents }, "global"), contextMenu && /* @__PURE__ */ jsx(MobileContextMenu, {})]
+		})]
 	});
 }
 
@@ -6602,37 +6631,6 @@ let DesktopGalleryService = class DesktopGalleryService extends Disposable {
 };
 DesktopGalleryService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IUIPartsService)], DesktopGalleryService);
 
-//#endregion
-//#region src/services/global-zone/desktop-global-zone.service.ts
-let DesktopGlobalZoneService = class DesktopGlobalZoneService {
-	constructor(_componentManager) {
-		this._componentManager = _componentManager;
-		_defineProperty(this, "visible$", new Subject());
-		_defineProperty(this, "componentKey$", new Subject());
-		_defineProperty(this, "_componentKey", "");
-	}
-	get componentKey() {
-		return this._componentKey;
-	}
-	set(key, component) {
-		this._componentManager.register(key, component);
-		this.componentKey$.next(key);
-		this._componentKey = key;
-		return toDisposable(() => {
-			this._componentManager.delete(key);
-			this.visible$.complete();
-			this.componentKey$.complete();
-		});
-	}
-	open() {
-		this.visible$.next(true);
-	}
-	close() {
-		this.visible$.next(false);
-	}
-};
-DesktopGlobalZoneService = __decorate([__decorateParam(0, Inject(ComponentManager))], DesktopGlobalZoneService);
-
 //#endregion
 //#region src/services/local-file/desktop-local-file.service.ts
 var DesktopLocalFileService = class extends Disposable {
@@ -6724,7 +6722,13 @@ var DesktopLocalStorageService = class {
 * limitations under the License.
 */
 function MessageContainer() {
-	return /* @__PURE__ */ jsx(Messager, { theme: useObservable(useDependency(ThemeService).darkMode$) ? "dark" : "light" });
+	const localeService = useDependency(LocaleService);
+	const darkMode = useObservable(useDependency(ThemeService).darkMode$);
+	const direction = useObservable(localeService.direction$);
+	return /* @__PURE__ */ jsx(Messager, {
+		theme: darkMode ? "dark" : "light",
+		dir: direction
+	});
 }
 
 //#endregion
@@ -6763,7 +6767,13 @@ DesktopMessageService = __decorate([__decorateParam(0, Inject(Injector)), __deco
 //#endregion
 //#region src/components/notification/Notification.tsx
 function Notification() {
-	return /* @__PURE__ */ jsx(Toaster, { theme: useObservable(useDependency(ThemeService).darkMode$) ? "dark" : "light" });
+	const localeService = useDependency(LocaleService);
+	const darkMode = useObservable(useDependency(ThemeService).darkMode$);
+	const direction = useObservable(localeService.direction$);
+	return /* @__PURE__ */ jsx(Toaster, {
+		theme: darkMode ? "dark" : "light",
+		dir: direction
+	});
 }
 const notification = { show: (options) => {
 	const { type = "message", title, content, duration, closable = true, position = "top-right" } = options;
@@ -6963,10 +6973,6 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 				useClass: DesktopZenZoneService,
 				lazy: true
 			}],
-			[IGlobalZoneService, {
-				useClass: DesktopGlobalZoneService,
-				lazy: true
-			}],
 			[IMessageService, {
 				useClass: DesktopMessageService,
 				lazy: true
@@ -7064,10 +7070,6 @@ let UniverUIPlugin = class UniverUIPlugin extends Plugin {
 				useClass: DesktopZenZoneService,
 				lazy: true
 			}],
-			[IGlobalZoneService, {
-				useClass: DesktopGlobalZoneService,
-				lazy: true
-			}],
 			[IMessageService, {
 				useClass: DesktopMessageService,
 				lazy: true
@@ -7744,7 +7746,7 @@ function extractFontFamily(styleStr) {
 }
 
 //#endregion
-//#region src/views/components/dom/print.tsx
+//#region src/views/components/dom/Print.tsx
 const PrintFloatDomSingle = memo((props) => {
 	var _position$startY, _position$startX;
 	const { layer, id, position } = props;
@@ -7812,4 +7814,4 @@ const PrintFloatDomSingle = memo((props) => {
 });
 
 //#endregion
-export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopGlobalZoneService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, DesktopZenZoneService, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyItem, FontSize, GlobalZone, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, IGlobalZoneService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IZenZoneService, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, ZenZone, connectDependencies, connectInjector, getHeaderFooterMenuHiddenObservable, getMenuHiddenObservable, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, sanitizeParsedHtml, splitSpanText, supportClipboardAPI, t, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };
+export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, DesktopZenZoneService, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyItem, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IZenZoneService, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, ZenZone, connectDependencies, connectInjector, getHeaderFooterMenuHiddenObservable, getMenuHiddenObservable, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, sanitizeParsedHtml, splitSpanText, supportClipboardAPI, t, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };