@onerjs/shared-ui-components 8.48.4 → 8.48.5

package/modularTool/services/shellService.js

@@ -0,0 +1,729 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Divider, Toolbar as FluentToolbar, makeStyles, Menu, MenuGroup, MenuGroupHeader, MenuItem, MenuList, MenuPopover, MenuTrigger, mergeClasses, SplitButton, Subtitle2Stronger, tokens, ToolbarRadioButton, } from "@fluentui/react-components";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { LayoutColumnTwoFocusLeftFilled, LayoutColumnTwoFocusRightFilled, LayoutColumnTwoSplitLeftFocusBottomLeftFilled, LayoutColumnTwoSplitLeftFocusTopLeftFilled, LayoutColumnTwoSplitRightFocusBottomRightFilled, LayoutColumnTwoSplitRightFocusTopRightFilled, MoreHorizontalRegular, PanelLeftContractRegular, PanelLeftExpandRegular, PanelRightContractRegular, PanelRightExpandRegular, PictureInPictureEnterRegular, } from "@fluentui/react-icons";
+import { Fade as FluentFade } from "@fluentui/react-motion-components-preview";
+import { Observable } from "@onerjs/core/Misc/observable.js";
+import { ChildWindow } from "../../fluent/hoc/childWindow.js";
+import { Collapse } from "../../fluent/primitives/collapse.js";
+import { Tooltip } from "../../fluent/primitives/tooltip.js";
+import { ErrorBoundary } from "../components/errorBoundary.js";
+import { TeachingMoment } from "../components/teachingMoment.js";
+import { Theme } from "../components/theme.js";
+import { useOrderedObservableCollection } from "../hooks/observableHooks.js";
+import { useSetting } from "../hooks/settingsHooks.js";
+import { MakePopoverTeachingMoment } from "../hooks/teachingMomentHooks.js";
+import { useResizeHandle } from "../hooks/useResizeHandle.js";
+import { ObservableCollection } from "../misc/observableCollection.js";
+/**
+ * Setting descriptor for persisting side pane dock location overrides.
+ */
+export const SidePaneDockOverridesSettingDescriptor = {
+    key: "SidePaneDockOverrides",
+    defaultValue: {},
+};
+/**
+ * Setting descriptor for persisting the left side pane width adjustment.
+ */
+export const LeftSidePaneWidthAdjustSettingDescriptor = {
+    key: "Shell/LeftPane/WidthAdjust",
+    defaultValue: 0,
+};
+/**
+ * Setting descriptor for persisting the left side pane height adjustment.
+ */
+export const LeftSidePaneHeightAdjustSettingDescriptor = {
+    key: "Shell/LeftPane/HeightAdjust",
+    defaultValue: 0,
+};
+/**
+ * Setting descriptor for persisting the right side pane width adjustment.
+ */
+export const RightSidePaneWidthAdjustSettingDescriptor = {
+    key: "Shell/RightPane/WidthAdjust",
+    defaultValue: 0,
+};
+/**
+ * Setting descriptor for persisting the right side pane height adjustment.
+ */
+export const RightSidePaneHeightAdjustSettingDescriptor = {
+    key: "Shell/RightPane/HeightAdjust",
+    defaultValue: 0,
+};
+/**
+ * The unique identity symbol for the root component service.
+ */
+export const RootComponentServiceIdentity = Symbol("RootComponent");
+/**
+ * The unique identity symbol for the shell service.
+ */
+export const ShellServiceIdentity = Symbol("ShellService");
+const useStyles = makeStyles({
+    mainView: {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        backgroundColor: tokens.colorTransparentBackground,
+    },
+    verticallyCentralContent: {
+        flexGrow: 1,
+        display: "flex",
+        overflow: "hidden",
+        backgroundColor: tokens.colorTransparentBackground,
+    },
+    barDiv: {
+        display: "flex",
+        flexDirection: "row",
+        flex: "0 0 auto",
+        height: "36px",
+        backgroundColor: tokens.colorNeutralBackground2,
+        pointerEvents: "auto",
+    },
+    bar: {
+        display: "flex",
+        flex: "1",
+        overflow: "hidden",
+        padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalXXS}`,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+        backgroundColor: tokens.colorNeutralBackground2,
+    },
+    barTop: {
+        borderTopWidth: 0,
+    },
+    barBottom: {
+        borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+    },
+    barLeft: {
+        marginRight: "auto",
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "row",
+        columnGap: tokens.spacingHorizontalSNudge,
+    },
+    barRight: {
+        marginLeft: "auto",
+        display: "flex",
+        alignItems: "center",
+        flexDirection: "row-reverse",
+        columnGap: tokens.spacingHorizontalSNudge,
+    },
+    barItem: {
+        display: "flex",
+    },
+    paneTabListDiv: {
+        backgroundColor: tokens.colorNeutralBackground1,
+        flex: "0 0 auto",
+        display: "flex",
+    },
+    paneTabListDivLeft: {
+        flexDirection: "row-reverse",
+    },
+    paneTabListDivRight: {
+        flexDirection: "row",
+    },
+    paneCollapseButton: {
+        padding: `0 0 0 ${tokens.spacingHorizontalXS}`,
+        borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    },
+    paneCollapseButtonWithBorder: {
+        borderLeft: `1px solid ${tokens.colorNeutralStroke2}`,
+    },
+    collapseMenuPopover: {
+        minWidth: 0,
+    },
+    pane: {
+        backgroundColor: tokens.colorNeutralBackground2,
+        display: "flex",
+        flex: 1,
+        alignItems: "stretch",
+        overflow: "hidden",
+    },
+    paneLeft: {
+        flexDirection: "row",
+    },
+    paneRight: {
+        flexDirection: "row-reverse",
+    },
+    paneContainer: {
+        display: "flex",
+        flexDirection: "column",
+        overflowX: "hidden",
+        overflowY: "hidden",
+        zIndex: 1,
+        pointerEvents: "auto",
+    },
+    paneContent: {
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "column",
+        overflow: "hidden",
+    },
+    unselectedPane: {
+        display: "none",
+    },
+    paneHeaderDiv: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        height: "36px",
+        backgroundColor: tokens.colorNeutralBackground1,
+        color: tokens.colorNeutralForeground1,
+    },
+    paneHeaderText: {
+        flex: 1,
+    },
+    paneHeaderTextNoIcon: {
+        marginLeft: tokens.spacingHorizontalM,
+    },
+    paneHeaderIcon: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        aspectRatio: "1",
+        fontSize: "20px",
+    },
+    paneHeaderButton: {
+        color: "inherit",
+    },
+    paneDivider: {
+        flex: "0 0 auto",
+        marginTop: tokens.spacingVerticalM,
+        margin: "0",
+        minHeight: tokens.spacingVerticalM,
+        cursor: "ns-resize",
+        alignItems: "end",
+    },
+    tabToolbar: {
+        padding: 0,
+        borderLeft: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
+    },
+    tab: {
+        display: "flex",
+        height: "100%",
+        boxSizing: "border-box",
+        justifyContent: "center",
+        border: `1px solid ${tokens.colorNeutralStroke2}`,
+        borderTop: "none",
+    },
+    firstTab: {
+        borderLeftColor: "transparent",
+    },
+    lastTab: {
+        borderRightColor: "transparent",
+    },
+    selectedTab: {
+        borderBottom: "none",
+    },
+    unselectedTab: {
+        borderLeftColor: "transparent",
+        borderRightColor: "transparent",
+    },
+    tabRadioButton: {
+        backgroundColor: "transparent",
+        borderRadius: 0,
+    },
+    resizer: {
+        width: "8px",
+        cursor: "ew-resize",
+        zIndex: 1000,
+    },
+    resizerLeft: {
+        marginRight: "-8px",
+        transform: "translateX(-8px)",
+    },
+    resizerRight: {
+        marginLeft: "-8px",
+        transform: "translateX(8px)",
+    },
+    centralContent: {
+        position: "relative",
+        flexGrow: 1,
+        display: "flex",
+        overflow: "hidden",
+        backgroundColor: tokens.colorTransparentBackground,
+        "> *": {
+            pointerEvents: "auto",
+        },
+    },
+    expandButtonContainer: {
+        position: "absolute",
+    },
+    expandButtonContainerLeft: {
+        left: 0,
+    },
+    expandButtonContainerRight: {
+        right: 0,
+    },
+    expandButton: {},
+});
+const DockMenu = (props) => {
+    const { openOnContext, sidePaneId, dockOptions, children } = props;
+    const dockLeft = dockOptions.get("full-left");
+    const dockTopLeft = dockOptions.get("top-left");
+    const dockBottomLeft = dockOptions.get("bottom-left");
+    const dockRight = dockOptions.get("full-right");
+    const dockTopRight = dockOptions.get("top-right");
+    const dockBottomRight = dockOptions.get("bottom-right");
+    return (_jsxs(Menu, { openOnContext: openOnContext, children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: children }), _jsx(Theme, { children: _jsx(MenuPopover, { children: _jsx(MenuList, { children: _jsxs(MenuGroup, { children: [_jsx(MenuGroupHeader, { children: "Dock" }), dockLeft && (_jsx(MenuItem, { icon: _jsx(LayoutColumnTwoFocusLeftFilled, {}), onClick: () => dockLeft(sidePaneId), children: "Left" })), dockTopLeft && (_jsx(MenuItem, { icon: _jsx(LayoutColumnTwoSplitLeftFocusTopLeftFilled, {}), onClick: () => dockTopLeft(sidePaneId), children: "Top Left" })), dockBottomLeft && (_jsx(MenuItem, { icon: _jsx(LayoutColumnTwoSplitLeftFocusBottomLeftFilled, {}), onClick: () => dockBottomLeft(sidePaneId), children: "Bottom Left" })), dockRight && (_jsx(MenuItem, { icon: _jsx(LayoutColumnTwoFocusRightFilled, {}), onClick: () => dockRight(sidePaneId), children: "Right" })), dockTopRight && (_jsx(MenuItem, { icon: _jsx(LayoutColumnTwoSplitRightFocusTopRightFilled, {}), onClick: () => dockTopRight(sidePaneId), children: "Top Right" })), dockBottomRight && (_jsx(MenuItem, { icon: _jsx(LayoutColumnTwoSplitRightFocusBottomRightFilled, {}), onClick: () => dockBottomRight(sidePaneId), children: "Bottom Right" }))] }) }) }) })] }));
+};
+const PaneHeader = (props) => {
+    const { id, title, dockOptions } = props;
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.paneHeaderDiv, children: [props.icon && (_jsx("div", { className: classes.paneHeaderIcon, children: _jsx(props.icon, {}) })), _jsx(Subtitle2Stronger, { className: mergeClasses(classes.paneHeaderText, !props.icon && classes.paneHeaderTextNoIcon), children: title }), _jsx(DockMenu, { sidePaneId: id, dockOptions: dockOptions, children: _jsx(Button, { className: classes.paneHeaderButton, appearance: "transparent", icon: _jsx(MoreHorizontalRegular, {}) }) })] }));
+};
+// This is a wrapper for an item in a toolbar that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
+const ToolbarItem = (props) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { verticalLocation, horizontalLocation, id, component: Component, displayName } = props;
+    const classes = useStyles();
+    const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Bar/${verticalLocation}/${horizontalLocation}/${displayName ?? id}`), [displayName, id]);
+    const teachingMoment = useTeachingMoment(props.teachingMoment === false);
+    const title = typeof props.teachingMoment === "object" ? props.teachingMoment.title : (displayName ?? id);
+    const description = typeof props.teachingMoment === "object" ? props.teachingMoment.description : `The "${displayName ?? id}" extension can be accessed here.`;
+    return (_jsxs(_Fragment, { children: [_jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay, title: title, description: description }), _jsx("div", { className: classes.barItem, ref: teachingMoment.targetRef, children: _jsx(Component, {}) })] }));
+};
+// TODO: Handle overflow, possibly via https://react.fluentui.dev/?path=/docs/components-overflow--docs with priority.
+// This component just renders a toolbar with left aligned toolbar items on the left and right aligned toolbar items on the right.
+const Toolbar = ({ location, components }) => {
+    const classes = useStyles();
+    const leftComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "left"), [components]);
+    const rightComponents = useMemo(() => components.filter((entry) => entry.horizontalLocation === "right"), [components]);
+    return (_jsx(_Fragment, { children: components.length > 0 && (_jsxs("div", { className: `${classes.bar} ${location === "top" ? classes.barTop : classes.barBottom}`, children: [_jsx("div", { className: classes.barLeft, children: leftComponents.map((entry) => (_jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) }), _jsx("div", { className: classes.barRight, children: rightComponents.map((entry) => (_jsx(ToolbarItem, { verticalLocation: location, horizontalLocation: entry.horizontalLocation, id: entry.key, component: entry.component, displayName: entry.displayName, teachingMoment: entry.teachingMoment }, entry.key))) })] })) }));
+};
+// This is a wrapper for a tab in a side pane that simply adds a teaching moment, which is useful for dynamically added items, possibly from extensions.
+const SidePaneTab = (props) => {
+    const { location, id, isSelected, isFirst, isLast, dockOptions, 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    icon: Icon, title, } = props;
+    const classes = useStyles();
+    const useTeachingMoment = useMemo(() => MakePopoverTeachingMoment(`Pane/${location}/${title ?? id}`), [title, id]);
+    const teachingMoment = useTeachingMoment(props.teachingMoment === false);
+    const tabClass = mergeClasses(classes.tab, isSelected ? classes.selectedTab : classes.unselectedTab, isFirst ? classes.firstTab : undefined, isLast ? classes.lastTab : undefined);
+    return (_jsxs(_Fragment, { children: [_jsx(TeachingMoment, { ...teachingMoment, shouldDisplay: teachingMoment.shouldDisplay, title: typeof props.teachingMoment === "object" ? props.teachingMoment.title : (title ?? "Extension"), description: typeof props.teachingMoment === "object" ? props.teachingMoment.description : `The "${title ?? id}" extension can be accessed here.` }), _jsx("div", { className: tabClass, children: _jsx(DockMenu, { openOnContext: true, sidePaneId: id, dockOptions: dockOptions, children: _jsx(Tooltip, { content: title ?? id, children: _jsx(ToolbarRadioButton, { ref: teachingMoment.targetRef, appearance: "transparent", className: classes.tabRadioButton, name: "selectedTab", value: id, icon: {
+                                children: _jsx(Icon, {}),
+                            } }) }) }) })] }));
+};
+// This hook provides a side pane container and the tab list.
+// In "compact" mode, the tab list is integrated into the pane itself.
+// In "full" mode, the returned tab list is later injected into the toolbar.
+function usePane(location, defaultWidth, minWidth, sidePanes, onSelectSidePane, dockOperations, toolbarMode, topBarItems, bottomBarItems, initialCollapsed) {
+    const classes = useStyles();
+    const [topSelectedTab, setTopSelectedTab] = useState();
+    const [bottomSelectedTab, setBottomSelectedTab] = useState();
+    const [collapsed, setCollapsed] = useState(initialCollapsed);
+    const childWindow = useRef(null);
+    const [isChildWindowOpen, setIsChildWindowOpen] = useState(false);
+    const paneContainerRef = useRef(null);
+    const onExpandCollapseClick = useCallback(() => {
+        setCollapsed((collapsed) => !collapsed);
+    }, []);
+    const [paneWidthSetting, setPaneWidthSetting] = useSetting(location === "left" ? LeftSidePaneWidthAdjustSettingDescriptor : RightSidePaneWidthAdjustSettingDescriptor);
+    const [paneHeightSetting, setPaneHeightSetting] = useSetting(location === "left" ? LeftSidePaneHeightAdjustSettingDescriptor : RightSidePaneHeightAdjustSettingDescriptor);
+    const currentSidePanes = useMemo(() => sidePanes.filter((entry) => entry.horizontalLocation === location), [sidePanes, location]);
+    const topPanes = useMemo(() => currentSidePanes.filter((entry) => entry.verticalLocation === "top"), [currentSidePanes]);
+    const bottomPanes = useMemo(() => currentSidePanes.filter((entry) => entry.verticalLocation === "bottom"), [currentSidePanes]);
+    const getValidDockOperations = useCallback((verticalLocation) => {
+        const validDockOperations = new Map(dockOperations);
+        // Can't re-dock to the current location.
+        validDockOperations.delete(`${verticalLocation}-${location}`);
+        // Full would mean there are no bottom panes, so this is also re-docking to the current location.
+        validDockOperations.delete(`full-${location}`);
+        // If there is only one pane left, it can't be docked to the bottom (as this would leave no top panes).
+        if (currentSidePanes.length === 1) {
+            validDockOperations.delete(`bottom-${location}`);
+        }
+        return validDockOperations;
+    }, [location, dockOperations, currentSidePanes]);
+    const validTopDockOptions = useMemo(() => getValidDockOperations("top"), [getValidDockOperations]);
+    const validBottomDockOptions = useMemo(() => getValidDockOperations("bottom"), [getValidDockOperations]);
+    // Selects a default top tab (during initialization or if the selected tab is removed).
+    useEffect(() => {
+        if ((topSelectedTab && !topPanes.includes(topSelectedTab)) || (!topSelectedTab && topPanes.length > 0)) {
+            setTopSelectedTab(topPanes[0]);
+        }
+        else if (topSelectedTab && topPanes.length === 0) {
+            setTopSelectedTab(undefined);
+        }
+    }, [topSelectedTab, topPanes]);
+    // Selects a default bottom tab (during initialization or if the selected tab is removed).
+    useEffect(() => {
+        if ((bottomSelectedTab && !bottomPanes.includes(bottomSelectedTab)) || (!bottomSelectedTab && bottomPanes.length > 0)) {
+            setBottomSelectedTab(bottomPanes[0]);
+        }
+        else if (bottomSelectedTab && bottomPanes.length === 0) {
+            setBottomSelectedTab(undefined);
+        }
+    }, [bottomSelectedTab, bottomPanes]);
+    // Selects a tab when explicitly requested.
+    useEffect(() => {
+        const observer = onSelectSidePane.add((key) => {
+            const topPane = topPanes.find((entry) => entry.key === key);
+            if (topPane) {
+                setTopSelectedTab(topPane);
+                setCollapsed(false);
+            }
+            const bottomPane = bottomPanes.find((entry) => entry.key === key);
+            if (bottomPane) {
+                setBottomSelectedTab(bottomPane);
+                setCollapsed(false);
+            }
+        });
+        return () => observer.remove();
+    }, [topPanes, bottomPanes, onSelectSidePane]);
+    const setUndocked = useCallback((undocked) => {
+        if (!undocked) {
+            childWindow.current?.close();
+        }
+        else {
+            const paneContainer = paneContainerRef.current;
+            if (!paneContainer) {
+                // It shouldn't be possible to get here and have this ref be null, but just in case,
+                // bail out of the undock operation.
+                childWindow.current?.close();
+            }
+            else {
+                // This is the extra buffer needed on top of minWidth to account for window chrome to avoid a horizontal scrollbar.
+                const widthBuffer = 4;
+                // This offsets the window's top position to account for window chrome/title bar.
+                const topOffset = 100;
+                // Create the child window with approximately the same location and size as the side pane.
+                const bounds = paneContainer.getBoundingClientRect();
+                childWindow.current?.open({
+                    defaultWidth: Math.max(bounds.width, minWidth + widthBuffer),
+                    defaultHeight: bounds.height - topOffset,
+                    defaultTop: bounds.top + window.screenY + topOffset,
+                    defaultLeft: bounds.left + window.screenX,
+                    title: location === "left" ? "Left" : "Right",
+                });
+            }
+        }
+    }, [childWindow, location]);
+    const expandCollapseButton = useMemo(() => {
+        const expandCollapseIcon = location === "left" ? collapsed ? _jsx(PanelLeftExpandRegular, {}) : _jsx(PanelLeftContractRegular, {}) : collapsed ? _jsx(PanelRightExpandRegular, {}) : _jsx(PanelRightContractRegular, {});
+        return (_jsxs(Menu, { positioning: "below-end", children: [_jsx(MenuTrigger, { disableButtonEnhancement: true, children: (triggerProps) => (_jsx(Tooltip, { content: collapsed ? "Show Side Pane" : "Hide Side Pane", children: _jsx(SplitButton, { className: mergeClasses(classes.paneCollapseButton, location === "right" && toolbarMode === "compact" ? classes.paneCollapseButtonWithBorder : undefined), menuButton: triggerProps, primaryActionButton: { onClick: onExpandCollapseClick }, size: "small", appearance: "transparent", icon: expandCollapseIcon }) })) }), _jsx(MenuPopover, { className: classes.collapseMenuPopover, children: _jsx(MenuList, { children: _jsx(MenuItem, { icon: _jsx(PictureInPictureEnterRegular, {}), onClick: () => setUndocked(true), children: "Undock" }) }) })] }));
+    }, [collapsed, onExpandCollapseClick, location]);
+    const createPaneTabList = useCallback((paneComponents, toolbarMode, selectedTab, setSelectedTab, dockOptions) => {
+        return (_jsx(_Fragment, { children: paneComponents.length > 0 && (_jsxs("div", { className: `${classes.paneTabListDiv} ${location === "left" || toolbarMode === "compact" ? classes.paneTabListDivLeft : classes.paneTabListDivRight}`, children: [paneComponents.length > 1 && (_jsx(_Fragment, { children: _jsx(FluentToolbar, { className: classes.tabToolbar, checkedValues: { selectedTab: [selectedTab?.key ?? ""] }, onCheckedValueChange: (event, data) => {
+                                const tab = paneComponents.find((entry) => entry.key === data.checkedItems[0]);
+                                setSelectedTab(tab);
+                                setCollapsed(false);
+                            }, children: paneComponents.map((entry, index) => {
+                                const isSelected = selectedTab?.key === entry.key;
+                                return (_jsx(SidePaneTab, { location: location, id: entry.key, title: entry.title, icon: entry.icon, teachingMoment: entry.teachingMoment, isSelected: isSelected && !collapsed, isFirst: index === 0, isLast: index === paneComponents.length - 1, dockOptions: dockOptions }, entry.key));
+                            }) }) })), toolbarMode === "full" && (_jsx(Collapse, { visible: !isChildWindowOpen, orientation: "horizontal", children: expandCollapseButton }))] })) }));
+    }, [location, collapsed, isChildWindowOpen, expandCollapseButton]);
+    // This memos the TabList to make it easy for the JSX to be inserted at the top of the pane (in "compact" mode) or returned to the caller to be used in the toolbar (in "full" mode).
+    const topPaneTabList = useMemo(() => createPaneTabList(topPanes, toolbarMode, topSelectedTab, setTopSelectedTab, validTopDockOptions), [createPaneTabList, topPanes, toolbarMode, topSelectedTab]);
+    const bottomPaneTabList = useMemo(() => createPaneTabList(bottomPanes, "compact", bottomSelectedTab, setBottomSelectedTab, validBottomDockOptions), [createPaneTabList, bottomPanes, bottomSelectedTab]);
+    // This manages the CSS variable that controls the width of the side pane.
+    const paneWidthAdjustCSSVar = "--pane-width-adjust";
+    const { elementRef: paneHorizontalResizeElementRef, handleRef: paneHorizontalResizeHandleRef, setValue: setPaneWidthAdjust, } = useResizeHandle({
+        growDirection: location === "left" ? "end" : "start",
+        variableName: paneWidthAdjustCSSVar,
+        minValue: minWidth - defaultWidth,
+        onChange: (value) => {
+            // Whenever the width is adjusted, store the value.
+            setPaneWidthSetting(value);
+        },
+    });
+    // This manages the CSS variable that controls the height of the bottom pane.
+    const paneHeightAdjustCSSVar = "--pane-height-adjust";
+    const { elementRef: paneVerticalResizeElementRef, handleRef: paneVerticalResizeHandleRef, setValue: setPaneHeightAdjust, } = useResizeHandle({
+        growDirection: "up",
+        variableName: paneHeightAdjustCSSVar,
+        onChange: (value) => {
+            // Whenever the height is adjusted, store the value.
+            setPaneHeightSetting(value);
+        },
+    });
+    // This ensures that when the component is first rendered, the CSS variable is set from storage.
+    useLayoutEffect(() => {
+        setPaneWidthAdjust(paneWidthSetting);
+        setPaneHeightAdjust(paneHeightSetting);
+    }, [paneWidthSetting, paneHeightSetting]);
+    // This effect closes the window if all panes have been removed.
+    useEffect(() => {
+        if (isChildWindowOpen && topPanes.length === 0 && bottomPanes.length === 0) {
+            childWindow.current?.close();
+        }
+    }, [childWindow, isChildWindowOpen, topPanes, bottomPanes]);
+    // This memoizes the pane itself, which may or may not include the tab list, depending on the toolbar mode.
+    const corePane = useMemo(() => {
+        return (_jsxs(_Fragment, { children: [toolbarMode === "compact" && (topPanes.length > 1 || topBarItems.length > 0) && (_jsx(_Fragment, { children: _jsxs("div", { className: classes.barDiv, children: [!isChildWindowOpen && location === "left" && expandCollapseButton, topPaneTabList, _jsx(Toolbar, { location: "top", components: topBarItems }), !isChildWindowOpen && location === "right" && expandCollapseButton] }) })), topPanes.length > 0 && (_jsx("div", { className: classes.paneContent, children: topSelectedTab && (_jsxs(_Fragment, { children: [_jsx(PaneHeader, { id: topSelectedTab.key, title: topSelectedTab.title, icon: topPanes.length > 1 ? undefined : topSelectedTab.icon, dockOptions: validTopDockOptions }), topPanes
+                                .filter((pane) => pane.key === topSelectedTab.key || pane.keepMounted)
+                                .map((pane) => (_jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== topSelectedTab.key ? classes.unselectedPane : undefined), children: _jsx(ErrorBoundary, { name: pane.title, children: _jsx(pane.content, {}) }) }, pane.key)))] })) })), topPanes.length > 0 && bottomPanes.length > 0 && _jsx(Divider, { ref: paneVerticalResizeHandleRef, className: classes.paneDivider }), bottomPanes.length > 1 && (_jsx(_Fragment, { children: _jsx("div", { className: classes.barDiv, children: bottomPaneTabList }) })), bottomPanes.length > 0 && (_jsx("div", { ref: paneVerticalResizeElementRef, className: classes.paneContent, style: { height: `clamp(200px, calc(45% + var(${paneHeightAdjustCSSVar}, 0px)), 100% - 300px)`, flex: "0 0 auto" }, children: bottomSelectedTab && (_jsxs(_Fragment, { children: [_jsx(PaneHeader, { id: bottomSelectedTab.key, title: bottomSelectedTab.title, icon: bottomPanes.length > 1 ? undefined : bottomSelectedTab.icon, dockOptions: validBottomDockOptions }), bottomPanes
+                                .filter((pane) => pane.key === bottomSelectedTab.key || pane.keepMounted)
+                                .map((pane) => (_jsx("div", { className: mergeClasses(classes.paneContent, pane.key !== bottomSelectedTab.key ? classes.unselectedPane : undefined), children: _jsx(ErrorBoundary, { name: pane.title, children: _jsx(pane.content, {}) }) }, pane.key)))] })) })), toolbarMode === "compact" && bottomBarItems.length > 0 && (_jsx(_Fragment, { children: _jsx("div", { className: classes.barDiv, children: _jsx(Toolbar, { location: "bottom", components: bottomBarItems }) }) }))] }));
+    }, [
+        topPanes,
+        topSelectedTab,
+        validTopDockOptions,
+        bottomPanes,
+        bottomSelectedTab,
+        validBottomDockOptions,
+        topBarItems,
+        bottomBarItems,
+        topPaneTabList,
+        bottomPaneTabList,
+        isChildWindowOpen,
+    ]);
+    // This deals with docked vs undocked state, where undocked is rendered into a separate window via a portal.
+    const pane = useMemo(() => {
+        return (_jsxs(_Fragment, { children: [!isChildWindowOpen && (_jsx("div", { ref: paneContainerRef, className: classes.paneContainer, children: (topPanes.length > 0 || bottomPanes.length > 0) && (_jsxs("div", { className: `${classes.pane} ${location === "left" ? classes.paneLeft : classes.paneRight}`, children: [_jsx(Collapse, { orientation: "horizontal", visible: !collapsed, children: _jsx("div", { ref: paneHorizontalResizeElementRef, className: classes.paneContainer, style: { width: `clamp(${minWidth}px, calc(${defaultWidth}px + var(${paneWidthAdjustCSSVar}, 0px)), 1000px)` }, children: corePane }) }), _jsx("div", { ref: paneHorizontalResizeHandleRef, className: `${classes.resizer} ${location === "left" ? classes.resizerLeft : classes.resizerRight}`, style: { pointerEvents: `${collapsed ? "none" : "auto"}` } })] })) })), _jsx(ChildWindow, { imperativeRef: childWindow, onOpenChange: (isOpen) => setIsChildWindowOpen(isOpen), children: corePane })] }));
+    }, [collapsed, corePane]);
+    const hasPanes = topPanes.length > 0 || bottomPanes.length > 0;
+    return [topPaneTabList, pane, collapsed, setCollapsed, isChildWindowOpen, setUndocked, hasPanes];
+}
+export function MakeShellServiceDefinition({ leftPaneDefaultWidth = 350, leftPaneMinWidth = 350, rightPaneDefaultWidth = 350, rightPaneMinWidth = 350, leftPaneDefaultCollapsed = false, rightPaneDefaultCollapsed = false, toolbarMode = "full", sidePaneRemapper = undefined, } = {}) {
+    return {
+        friendlyName: "Shell Service",
+        produces: [ShellServiceIdentity, RootComponentServiceIdentity],
+        factory: () => {
+            const toolbarItemCollection = new ObservableCollection();
+            const sidePaneCollection = new ObservableCollection();
+            const centralContentCollection = new ObservableCollection();
+            const onSelectSidePane = new Observable(undefined, true);
+            const onDockChanged = new Observable(undefined, true);
+            const onCollapseChanged = new Observable();
+            const leftSidePaneContainerState = {
+                isPresent: false,
+                isDocked: true,
+                dock: () => onDockChanged.notifyObservers({ location: "left", dock: true }),
+                undock: () => onDockChanged.notifyObservers({ location: "left", dock: false }),
+                isCollapsed: leftPaneDefaultCollapsed,
+                collapse: () => onCollapseChanged.notifyObservers({ location: "left", collapsed: true }),
+                expand: () => onCollapseChanged.notifyObservers({ location: "left", collapsed: false }),
+            };
+            const rightSidePaneContainerState = {
+                isPresent: false,
+                isDocked: true,
+                dock: () => onDockChanged.notifyObservers({ location: "right", dock: true }),
+                undock: () => onDockChanged.notifyObservers({ location: "right", dock: false }),
+                isCollapsed: rightPaneDefaultCollapsed,
+                collapse: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: true }),
+                expand: () => onCollapseChanged.notifyObservers({ location: "right", collapsed: false }),
+            };
+            const rootComponent = () => {
+                const classes = useStyles();
+                const [sidePaneDockOverrides, setSidePaneDockOverrides] = useSetting(SidePaneDockOverridesSettingDescriptor);
+                // This function returns a promise that resolves after the dock change takes effect so that
+                // we can then select the re-docked pane.
+                const pendingPaneReselects = useRef([]);
+                const updateSidePaneDockOverride = useCallback((key, horizontalLocation, verticalLocation) => {
+                    setSidePaneDockOverrides((current) => ({
+                        ...current,
+                        [key]: { horizontalLocation, verticalLocation },
+                    }));
+                    pendingPaneReselects.current.push(key);
+                }, [setSidePaneDockOverrides]);
+                const toolbarItems = useOrderedObservableCollection(toolbarItemCollection);
+                const sidePanes = useOrderedObservableCollection(sidePaneCollection);
+                const coercedSidePaneCache = useRef(new Map());
+                const coercedSidePanes = useMemo(() => {
+                    // First pass - apply overrides and respect the side pane mode.
+                    const coercedSidePanes = sidePanes
+                        .map((sidePaneDefinition) => {
+                        let coercedSidePane = coercedSidePaneCache.current.get(sidePaneDefinition.key);
+                        if (!coercedSidePane) {
+                            coercedSidePane = { ...sidePaneDefinition };
+                            coercedSidePaneCache.current.set(sidePaneDefinition.key, coercedSidePane);
+                        }
+                        const override = sidePaneDockOverrides[sidePaneDefinition.key];
+                        if (override) {
+                            // Override (user manually re-docked) has the highest priority.
+                            coercedSidePane.horizontalLocation = override.horizontalLocation;
+                            coercedSidePane.verticalLocation = override.verticalLocation;
+                        }
+                        else if (sidePaneRemapper) {
+                            // A side pane remapper has the next highest priority.
+                            const remapping = sidePaneRemapper(sidePaneDefinition);
+                            if (!remapping) {
+                                coercedSidePane = undefined;
+                            }
+                            else {
+                                coercedSidePane.horizontalLocation = remapping.horizontalLocation;
+                                coercedSidePane.verticalLocation = remapping.verticalLocation;
+                            }
+                        }
+                        else {
+                            // Otherwise use the default defined location.
+                            coercedSidePane.horizontalLocation = sidePaneDefinition.horizontalLocation;
+                            coercedSidePane.verticalLocation = sidePaneDefinition.verticalLocation;
+                        }
+                        return coercedSidePane;
+                    })
+                        .filter((sidePane) => !!sidePane);
+                    // Second pass - correct any invalid state, specifically if there are only bottom panes, force them to be top panes.
+                    for (const side of ["left", "right"]) {
+                        const topPanes = coercedSidePanes.filter((entry) => entry.horizontalLocation === side && entry.verticalLocation === "top");
+                        const bottomPanes = coercedSidePanes.filter((entry) => entry.horizontalLocation === side && entry.verticalLocation === "bottom");
+                        if (bottomPanes.length > 0 && topPanes.length === 0) {
+                            for (const pane of bottomPanes) {
+                                pane.verticalLocation = "top";
+                                updateSidePaneDockOverride(pane.key, side, "top");
+                            }
+                        }
+                    }
+                    // Cleanup any cached panes that are no longer present.
+                    for (const key of coercedSidePaneCache.current.keys()) {
+                        if (!coercedSidePanes.some((entry) => entry.key === key)) {
+                            coercedSidePaneCache.current.delete(key);
+                        }
+                    }
+                    return coercedSidePanes;
+                }, [sidePanes, sidePaneDockOverrides, updateSidePaneDockOverride, sidePaneRemapper]);
+                useEffect(() => {
+                    for (const paneKey of pendingPaneReselects.current.splice(0)) {
+                        onSelectSidePane.notifyObservers(paneKey);
+                    }
+                }, [coercedSidePanes]);
+                const sidePaneDockOperations = useMemo(() => {
+                    const sidePaneDockOperations = new Map();
+                    for (const side of ["left", "right"]) {
+                        const currentSidePanes = coercedSidePanes.filter((entry) => entry.horizontalLocation === side);
+                        const dockTop = (sidePaneKey) => {
+                            updateSidePaneDockOverride(sidePaneKey, side, "top");
+                        };
+                        const dockBottom = (sidePaneKey) => {
+                            updateSidePaneDockOverride(sidePaneKey, side, "bottom");
+                        };
+                        if (currentSidePanes.some((entry) => entry.verticalLocation === "bottom")) {
+                            // If there are bottom panes, there must also be top panes, and so top and bottom are valid locations.
+                            sidePaneDockOperations.set(`top-${side}`, dockTop);
+                            sidePaneDockOperations.set(`bottom-${side}`, dockBottom);
+                        }
+                        else if (currentSidePanes.length > 0) {
+                            // If there are only top panes, then full and bottom are valid locations.
+                            sidePaneDockOperations.set(`full-${side}`, dockTop);
+                            sidePaneDockOperations.set(`bottom-${side}`, dockBottom);
+                        }
+                        else {
+                            // If there are no panes, then only full is a valid location.
+                            sidePaneDockOperations.set(`full-${side}`, dockTop);
+                        }
+                    }
+                    return sidePaneDockOperations;
+                }, [coercedSidePanes]);
+                const hasLeftPanes = coercedSidePanes.some((entry) => entry.horizontalLocation === "left");
+                const hasRightPanes = coercedSidePanes.some((entry) => entry.horizontalLocation === "right");
+                useEffect(() => {
+                    leftSidePaneContainerState.isPresent = hasLeftPanes;
+                    rightSidePaneContainerState.isPresent = hasRightPanes;
+                    return () => {
+                        leftSidePaneContainerState.isPresent = false;
+                        rightSidePaneContainerState.isPresent = false;
+                    };
+                }, [hasLeftPanes, hasRightPanes]);
+                // If we are in compact toolbar mode, we may need to move toolbar items from the left to the right or vice versa,
+                // depending on whether there are any side panes on that side.
+                const coerceToolBarItemHorizontalLocation = useMemo(() => (item) => {
+                    let horizontalLocation = item.horizontalLocation;
+                    // Coercion is only needed in compact toolbar mode since there might not be a left or right pane.
+                    if (toolbarMode === "compact") {
+                        if (horizontalLocation === "left" && !hasLeftPanes) {
+                            horizontalLocation = "right";
+                        }
+                        if (horizontalLocation === "right" && !hasRightPanes) {
+                            horizontalLocation = "left";
+                        }
+                    }
+                    return horizontalLocation;
+                }, [toolbarMode, hasLeftPanes, hasRightPanes]);
+                const topToolBarItems = useMemo(() => toolbarItems.filter((entry) => entry.verticalLocation === "top"), [toolbarItems]);
+                const bottomToolBarItems = useMemo(() => toolbarItems.filter((entry) => entry.verticalLocation === "bottom"), [toolbarItems]);
+                const topBarLeftItems = useMemo(() => topToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [topToolBarItems, coerceToolBarItemHorizontalLocation]);
+                const topBarRightItems = useMemo(() => topToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [topToolBarItems, coerceToolBarItemHorizontalLocation]);
+                const bottomBarLeftItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "left"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
+                const bottomBarRightItems = useMemo(() => bottomToolBarItems.filter((entry) => coerceToolBarItemHorizontalLocation(entry) === "right"), [bottomToolBarItems, coerceToolBarItemHorizontalLocation]);
+                const centralContents = useOrderedObservableCollection(centralContentCollection);
+                const [leftPaneTabList, leftPane, leftPaneCollapsed, setLeftPaneCollapsed, leftPaneUndocked, setLeftPaneUndocked, leftPaneHasPanes] = usePane("left", leftPaneDefaultWidth, leftPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarLeftItems, bottomBarLeftItems, leftPaneDefaultCollapsed);
+                useEffect(() => {
+                    // Propagate shorter lived React component state out to longer lived service state.
+                    leftSidePaneContainerState.isDocked = !leftPaneUndocked;
+                }, [leftPaneUndocked]);
+                useEffect(() => {
+                    // Propagate shorter lived React component state out to longer lived service state.
+                    leftSidePaneContainerState.isCollapsed = leftPaneCollapsed;
+                }, [leftPaneCollapsed]);
+                const [rightPaneTabList, rightPane, rightPaneCollapsed, setRightPaneCollapsed, rightPaneUndocked, setRightPaneUndocked, rightPaneHasPanes] = usePane("right", rightPaneDefaultWidth, rightPaneMinWidth, coercedSidePanes, onSelectSidePane, sidePaneDockOperations, toolbarMode, topBarRightItems, bottomBarRightItems, rightPaneDefaultCollapsed);
+                useEffect(() => {
+                    // Propagate shorter lived React component state out to longer lived service state.
+                    rightSidePaneContainerState.isDocked = !rightPaneUndocked;
+                }, [rightPaneUndocked]);
+                useEffect(() => {
+                    // Propagate shorter lived React component state out to longer lived service state.
+                    rightSidePaneContainerState.isCollapsed = rightPaneCollapsed;
+                }, [rightPaneCollapsed]);
+                useEffect(() => {
+                    // If at the service level dock state change is requested, propagate to the React component state.
+                    const observer = onDockChanged.add(({ location, dock }) => {
+                        if (location === "left") {
+                            setLeftPaneUndocked(!dock);
+                        }
+                        else {
+                            setRightPaneUndocked(!dock);
+                        }
+                    });
+                    return () => {
+                        observer.remove();
+                        leftSidePaneContainerState.isDocked = true;
+                        rightSidePaneContainerState.isDocked = true;
+                    };
+                }, [setLeftPaneUndocked, setRightPaneUndocked]);
+                useEffect(() => {
+                    // If at the service level collapse state change is requested, propagate to the React component state.
+                    const observer = onCollapseChanged.add(({ location, collapsed }) => {
+                        if (location === "left") {
+                            setLeftPaneCollapsed(collapsed);
+                        }
+                        else {
+                            setRightPaneCollapsed(collapsed);
+                        }
+                    });
+                    return () => {
+                        observer.remove();
+                        leftSidePaneContainerState.isCollapsed = false;
+                        rightSidePaneContainerState.isCollapsed = false;
+                    };
+                }, [setLeftPaneCollapsed, setRightPaneCollapsed]);
+                return (_jsxs("div", { className: classes.mainView, children: [toolbarMode === "full" && (_jsx(_Fragment, { children: _jsxs("div", { className: classes.barDiv, children: [leftPaneTabList, _jsx(Toolbar, { location: "top", components: topToolBarItems }), rightPaneTabList] }) })), _jsxs("div", { className: classes.verticallyCentralContent, children: [leftPane, _jsxs("div", { className: classes.centralContent, children: [centralContents.map((entry) => (_jsx(ErrorBoundary, { name: entry.key, children: _jsx(entry.component, {}) }, entry.key))), toolbarMode === "compact" && (_jsxs(_Fragment, { children: [_jsx(FluentFade, { visible: leftPaneCollapsed && leftPaneHasPanes, delay: 50, duration: 100, unmountOnExit: true, children: _jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerLeft), children: _jsx(Tooltip, { content: "Show Side Pane", children: _jsx(Button, { className: classes.expandButton, icon: _jsx(PanelLeftExpandRegular, {}), onClick: () => setLeftPaneCollapsed(false) }) }) }) }), _jsx(FluentFade, { visible: rightPaneCollapsed && rightPaneHasPanes, delay: 50, duration: 100, unmountOnExit: true, children: _jsx("div", { className: mergeClasses(classes.expandButtonContainer, classes.expandButtonContainerRight), children: _jsx(Tooltip, { content: "Show Side Pane", children: _jsx(Button, { className: classes.expandButton, icon: _jsx(PanelRightExpandRegular, {}), onClick: () => setRightPaneCollapsed(false) }) }) }) })] }))] }), rightPane] }), toolbarMode === "full" && (_jsx(_Fragment, { children: _jsx("div", { className: classes.barDiv, children: _jsx(Toolbar, { location: "bottom", components: bottomToolBarItems }) }) }))] }));
+            };
+            rootComponent.displayName = "Shell Service Root";
+            return {
+                addToolbarItem: (entry) => {
+                    if (!entry.component.displayName) {
+                        entry.component.displayName = `${entry.key} | ${entry.verticalLocation} ${entry.horizontalLocation} bar item`;
+                    }
+                    return toolbarItemCollection.add(entry);
+                },
+                addSidePane: (entry) => {
+                    if (!entry.content.displayName) {
+                        entry.content.displayName = `${entry.key} | ${entry.horizontalLocation} pane`;
+                    }
+                    return sidePaneCollection.add(entry);
+                },
+                addCentralContent: (entry) => centralContentCollection.add(entry),
+                get leftSidePaneContainer() {
+                    return leftSidePaneContainerState.isPresent ? leftSidePaneContainerState : null;
+                },
+                get rightSidePaneContainer() {
+                    return rightSidePaneContainerState.isPresent ? rightSidePaneContainerState : null;
+                },
+                onDockChanged,
+                get sidePanes() {
+                    return [...sidePaneCollection.items].map((sidePaneDefinition) => {
+                        return {
+                            key: sidePaneDefinition.key,
+                            select: () => onSelectSidePane.notifyObservers(sidePaneDefinition.key),
+                        };
+                    });
+                },
+                rootComponent,
+            };
+        },
+    };
+}
+//# sourceMappingURL=shellService.js.map