@byeolnaerim/flex-layout 0.0.6 → 0.0.7

package/dist/components.js

@@ -1,3029 +0,0 @@
-import React2, { createContext, memo, useRef, useState, useEffect, Children, isValidElement, Fragment, useCallback, useContext, useLayoutEffect, cloneElement } from 'react';
-import equal from 'fast-deep-equal';
-import { BehaviorSubject, Subject, fromEvent, distinctUntilChanged as distinctUntilChanged$1, take as take$1, combineLatest, map as map$1 } from 'rxjs';
-import { throttleTime, take, filter, map, distinctUntilChanged } from 'rxjs/operators';
-
-// src/flex-layout/components/FlexLayout.tsx
-function updateScrollStore(subject, newValue) {
-  const currentValue = subject.getValue();
-  if (!equal(currentValue, newValue)) {
-    subject.next(newValue);
-  }
-}
-function updateRefStore(store, newState) {
-  const prevState = store.getValue();
-  if (!equal(prevState, newState)) {
-    store.next(newState);
-  }
-}
-function updateSplitScreenStore(newValue) {
-  const prevValue = layoutSplitScreenStore.getValue();
-  if (!equal(prevValue, newValue)) {
-    layoutSplitScreenStore.next(newValue);
-  }
-}
-var scrollPositions = {};
-var scrollPositionsSubject = new BehaviorSubject(scrollPositions);
-var setScrollPosition = (layoutName, position) => {
-  const current = scrollPositionsSubject.getValue();
-  const prevPos = current[layoutName];
-  if (prevPos && prevPos.x === position.x && prevPos.y === position.y) {
-    return;
-  }
-  const newPositions = {
-    ...current,
-    [layoutName]: position
-  };
-  updateScrollStore(scrollPositionsSubject, newPositions);
-};
-var getScrollPosition = (layoutName) => {
-  return scrollPositionsSubject.pipe(
-    // 해당 layoutName이 정의되지 않았을 때는 제외
-    filter((e) => e[layoutName] !== void 0),
-    map((positions) => positions[layoutName]),
-    distinctUntilChanged(
-      (prev, curr) => prev?.x === curr?.x && prev?.y === curr?.y
-    )
-  );
-};
-var removeScrollPosition = (layoutName) => {
-  const current = scrollPositionsSubject.getValue();
-  delete current[layoutName];
-  const newPositions = { ...current };
-  updateScrollStore(scrollPositionsSubject, newPositions);
-};
-var layoutSplitScreenStore = new BehaviorSubject({});
-var setSplitScreen = (rootName, layoutName, newComponents) => {
-  const current = layoutSplitScreenStore.getValue();
-  const updatedLayout = { ...current[rootName] || {} };
-  updatedLayout[layoutName] = newComponents;
-  const newStoreValue = {
-    ...current,
-    [rootName]: updatedLayout
-  };
-  updateSplitScreenStore(newStoreValue);
-};
-var resetRootSplitScreen = (rootName) => {
-  const current = layoutSplitScreenStore.getValue();
-  const newStoreValue = {
-    ...current,
-    [rootName]: {}
-  };
-  updateSplitScreenStore(newStoreValue);
-};
-var removeSplitScreenChild = (rootName, layoutName) => {
-  const current = layoutSplitScreenStore.getValue();
-  if (!current[rootName]) return;
-  const updatedLayout = { ...current[rootName] };
-  delete updatedLayout[layoutName];
-  const newStoreValue = {
-    ...current,
-    [rootName]: updatedLayout
-  };
-  updateSplitScreenStore(newStoreValue);
-};
-var getCurrentSplitScreenComponents = (rootName, layoutName) => {
-  const current = layoutSplitScreenStore.getValue();
-  if (!current[rootName]) return;
-  return current[rootName][layoutName];
-};
-var getSplitScreen = (rootName, layoutName) => {
-  return layoutSplitScreenStore.pipe(
-    map((splitScreen) => splitScreen[rootName][layoutName]),
-    distinctUntilChanged((prev, curr) => {
-      const filterChildren2 = (obj) => {
-        const { children, component, targetComponent, x, y, ...rest } = obj || {};
-        return rest;
-      };
-      return equal(filterChildren2(prev), filterChildren2(curr));
-    })
-  );
-};
-var flexContainerStore = new BehaviorSubject({});
-var flexResizePanelStore = new BehaviorSubject({});
-var setContainerRef = (layoutName, containerName, ref) => {
-  const currentRefs = flexContainerStore.getValue();
-  const updatedLayoutRefs = { ...currentRefs[layoutName] || {} };
-  if (ref === null) {
-    delete updatedLayoutRefs[containerName];
-  } else {
-    updatedLayoutRefs[containerName] = ref;
-  }
-  const newRefs = {
-    ...currentRefs,
-    [layoutName]: updatedLayoutRefs
-  };
-  updateRefStore(flexContainerStore, newRefs);
-};
-var setResizePanelRef = (layoutName, containerName, ref) => {
-  const currentRefs = flexResizePanelStore.getValue();
-  const updatedLayoutRefs = { ...currentRefs[layoutName] || {} };
-  if (ref === null) {
-    delete updatedLayoutRefs[containerName];
-  } else {
-    updatedLayoutRefs[containerName] = ref;
-  }
-  const newRefs = {
-    ...currentRefs,
-    [layoutName]: updatedLayoutRefs
-  };
-  updateRefStore(flexResizePanelStore, newRefs);
-};
-var getLayoutInfos = (layoutName) => {
-  return combineLatest([flexContainerStore, flexResizePanelStore]).pipe(
-    map(([containerRefs, resizePanelRefs]) => {
-      const containerData = containerRefs[layoutName] || {};
-      const resizePanelData = resizePanelRefs[layoutName] || {};
-      return {
-        container: containerData,
-        resizePanel: resizePanelData
-      };
-    }),
-    filter((result) => result.container !== null)
-    // 빈 객체 제외
-  );
-};
-
-// src/flex-layout/utils/FlexLayoutUtils.ts
-function isDocumentOut({ x, y }) {
-  if (typeof window == "undefined") return;
-  const { innerWidth, innerHeight, scrollX, scrollY } = window;
-  return x < 0 || y < 0 || x > innerWidth + scrollX || y > innerHeight + scrollY;
-}
-var lastTouchEvent;
-function getClientXy(event) {
-  let clientX;
-  let clientY;
-  if (window.MouseEvent && event instanceof window.MouseEvent) {
-    clientX = event.clientX;
-    clientY = event.clientY;
-  } else if (window.TouchEvent && event instanceof window.TouchEvent) {
-    const _event = event.touches.length == 0 ? lastTouchEvent : event;
-    clientX = _event.touches[0].clientX;
-    clientY = _event.touches[0].clientY;
-    lastTouchEvent = event;
-  } else {
-    return;
-  }
-  return { clientX, clientY };
-}
-function isOverMove(elementSize, elementMinSize) {
-  return Math.floor(elementSize) <= 0 || (isNaN(elementMinSize) ? false : elementMinSize >= Math.floor(elementSize));
-}
-function findNotCloseFlexContent(target, direction) {
-  if (!target) return target;
-  let _target = target;
-  const isCloseCheck = () => {
-    let grow = parseFloat(window.getComputedStyle(_target).flex.split(" ")[0]) || 0;
-    if (grow == 0) {
-      return true;
-    } else {
-      return false;
-    }
-  };
-  while (isCloseCheck()) {
-    let nextTarget = _target[direction]?.[direction];
-    _target = nextTarget;
-    if (!_target) {
-      break;
-    }
-  }
-  return _target;
-}
-function resize(list, totalGrow) {
-  return new Promise((resolve) => {
-    let resizeWeight = totalGrow / list.length;
-    list.forEach((e) => {
-      e.dataset.grow = resizeWeight.toString();
-      e.style.flex = `${resizeWeight} 1 0%`;
-    });
-    resolve(resizeWeight);
-  });
-}
-function mathWeight(totalCount, totalGrow) {
-  return 1 + (totalGrow - totalCount) / totalCount;
-}
-function mathGrow(childSize, parentSize, containerCount) {
-  return containerCount * (childSize / parentSize);
-}
-function getGrow(growTarget) {
-  const target = growTarget instanceof Element ? growTarget : growTarget;
-  return parseFloat(target.style.flex.split(" ")[0]) || parseFloat(target.dataset.grow || "");
-}
-function closeFlex(resizeTarget, containers, {
-  isResize = false,
-  isDsiabledResizePanel = false,
-  sizeName
-}) {
-  return new Promise((resolve) => {
-    if (!resizeTarget.hasAttribute("data-is_resize_panel")) ; else if (isDsiabledResizePanel) {
-      resizeTarget.dataset.is_resize_panel = "false";
-    }
-    resizeTarget.dataset.prev_grow = getGrow(resizeTarget).toString();
-    let notCloseList = containers.filter(
-      (e) => e.style.flex != "0 1 0%" && e != resizeTarget
-    );
-    let notCloseAndOpenTargetList = [...notCloseList, resizeTarget];
-    notCloseAndOpenTargetList.forEach((e) => {
-      e.style.transition = "flex 0.5s";
-      e.ontransitionend = (event) => {
-        if (event.propertyName != "flex-grow") {
-          return;
-        }
-        notCloseAndOpenTargetList.forEach(
-          (e2) => e2.style.transition = ""
-        );
-        e.ontransitionend = () => {
-        };
-      };
-      if (e == resizeTarget) {
-        e.dataset.grow = "0";
-        e.style.flex = `0 1 0%`;
-        return;
-      }
-      if (isResize) {
-        return;
-      }
-      let percent = getGrow(e) / containers.length;
-      if (notCloseList.length == 1) {
-        e.dataset.grow = containers.length.toString();
-        e.style.flex = `${containers.length} 1 0%`;
-        return;
-      }
-      e.dataset.grow = (containers.length * percent).toString();
-      e.style.flex = `${containers.length * percent} 1 0%`;
-    });
-    if (isResize) {
-      resize(notCloseList, containers.length);
-    }
-    resolve(resizeTarget);
-  });
-}
-function openFlex(resizeTarget, containers, {
-  isPrevSizeOpen = false,
-  isResize = false,
-  openGrowImportant = 0,
-  sizeName
-}) {
-  return new Promise((resolve) => {
-    if (!resizeTarget.hasAttribute("data-is_resize_panel")) ; else if (resizeTarget.hasAttribute("data-is_resize_panel") && resizeTarget.dataset.is_resize_panel == "false") {
-      resizeTarget.dataset.is_resize_panel = "true";
-    }
-    let notCloseList = containers.filter(
-      (e) => e.style.flex != "0 1 0%" && e != resizeTarget
-    );
-    let notCloseAndOpenTargetList = [...notCloseList, resizeTarget];
-    let openTargetGrow = 1;
-    const sizeStyleName = "client" + sizeName.charAt(0).toUpperCase() + sizeName.substring(1);
-    const parentSize = sizeName && resizeTarget.parentElement && resizeTarget.parentElement[sizeStyleName] || 0;
-    if (isPrevSizeOpen && resizeTarget.hasAttribute("data-prev_grow")) {
-      openTargetGrow = parseFloat(resizeTarget.dataset.prev_grow || "1") || 1;
-    } else if (parentSize && parentSize !== 0) {
-      openTargetGrow = parentSize / notCloseList.length / (parentSize - 1) * containers.length;
-    } else {
-      openTargetGrow = 1;
-    }
-    if (openGrowImportant) {
-      openTargetGrow = openGrowImportant;
-    }
-    openTargetGrow = openTargetGrow === Infinity ? 1 : openTargetGrow;
-    notCloseAndOpenTargetList.forEach((e) => {
-      e.style.transition = "flex 0.5s";
-      e.ontransitionend = (event) => {
-        if (event.propertyName != "flex-grow") {
-          return;
-        }
-        notCloseAndOpenTargetList.forEach(
-          (e2) => e2.style.transition = ""
-        );
-        e.ontransitionend = () => {
-        };
-      };
-      if (e == resizeTarget) {
-        resizeTarget.dataset.grow = openTargetGrow.toString();
-        resizeTarget.style.flex = `${openTargetGrow} 1 0%`;
-        return;
-      }
-      if (isResize) {
-        return;
-      }
-      let grow = parentSize / notCloseList.length / (parentSize - 1) * (containers.length - openTargetGrow);
-      grow = grow === Infinity ? 1 : grow;
-      e.dataset.grow = grow.toString();
-      e.style.flex = `${grow} 1 0%`;
-    });
-    if (isResize) {
-      resize(notCloseAndOpenTargetList, containers.length);
-    }
-    resolve(openTargetGrow);
-  });
-}
-var g = globalThis;
-g.__FLEX_SUBJECTS__ ?? (g.__FLEX_SUBJECTS__ = { openClose: {}, spread: {} });
-var containerOpenCloseSubjectMap = g.__FLEX_SUBJECTS__.openClose;
-var containerSpreadSubjectMap = g.__FLEX_SUBJECTS__.spread;
-var ContainerOpenCloseProvider = ({
-  layoutName,
-  containerName,
-  sizeName
-}) => {
-  if (!containerOpenCloseSubjectMap[containerName]) {
-    containerOpenCloseSubjectMap[containerName] = new Subject();
-  }
-  if (!containerSpreadSubjectMap[containerName]) {
-    containerSpreadSubjectMap[containerName] = new Subject();
-  }
-  const [containers, setContainers] = useState([]);
-  const [container, setContainer] = useState();
-  useEffect(() => {
-    const subscription = getLayoutInfos(layoutName).subscribe(
-      (layout) => {
-        if (!layout || !layout.container[containerName] || !layout.container[containerName].current)
-          return;
-        setContainers(
-          Object.values(layout.container).filter(
-            (e) => e.current !== null
-          ).map((e) => e.current)
-        );
-        setContainer(layout.container[containerName].current);
-      }
-    );
-    return () => subscription.unsubscribe();
-  }, [containerName, layoutName]);
-  useEffect(() => {
-    const styleName = `${sizeName.charAt(0).toUpperCase() + sizeName.substring(1)}`;
-    const clientSize = "client" + styleName;
-    const outerSize = "outer" + styleName;
-    const maxSize = "max" + styleName;
-    const subscribe = containerOpenCloseSubjectMap[containerName].subscribe(
-      ({
-        mode,
-        initOpenState: isOpenState,
-        onClose,
-        onOpen,
-        openOption = {},
-        closeOption = {}
-      }) => {
-        if (!container || containers.length === 0) return;
-        const currentGrow = getGrow(container);
-        const styleMap = window.getComputedStyle(container);
-        const maxSizeGrow = mathGrow(
-          parseInt(styleMap[maxSize]),
-          container.parentElement && container.parentElement[clientSize] || window[outerSize],
-          containers.length
-        );
-        const open = () => openFlex(container, containers, {
-          sizeName,
-          ...isNaN(maxSizeGrow) ? {} : {
-            openGrowImportant: maxSizeGrow
-          },
-          ...openOption
-        }).then((openTargetGrow) => {
-          if (onOpen) onOpen();
-          containerSpreadSubjectMap[containerName].next({
-            isOpen: true,
-            grow: openTargetGrow,
-            targetContainer: container
-          });
-        });
-        const close = () => closeFlex(container, containers, {
-          sizeName,
-          ...closeOption
-        }).then(() => {
-          if (onClose) onClose();
-          containerSpreadSubjectMap[containerName].next({
-            isOpen: false,
-            grow: 0,
-            targetContainer: container
-          });
-        });
-        if (mode === "toggle") {
-          if (currentGrow === 0) {
-            open();
-          } else {
-            close();
-          }
-        } else if (mode === "open") {
-          if (currentGrow === 0) {
-            open();
-          }
-        } else if (mode === "close") {
-          if (currentGrow !== 0) {
-            close();
-          }
-        }
-      }
-    );
-    return () => {
-      subscribe.unsubscribe();
-    };
-  }, [containerName, container, containers, sizeName]);
-  return null;
-};
-
-// src/flex-layout/styles/FlexLayout.module.css
-var FlexLayout_default = {};
-var FlexLayoutContext = createContext(null);
-function useFlexLayoutContext() {
-  const context = useContext(FlexLayoutContext);
-  if (!context) {
-    throw new Error(
-      "useFlexLayoutContext must be used within FlexLayoutContext.Provider"
-    );
-  }
-  return context;
-}
-function FlexLayoutProvider({
-  value,
-  children
-}) {
-  return /* @__PURE__ */ React.createElement(FlexLayoutContext.Provider, { value }, children);
-}
-
-// src/flex-layout/components/FlexLayout.tsx
-function FlexLayout({
-  layoutName,
-  direction,
-  children,
-  ref,
-  className,
-  panelClassName,
-  panelMovementMode = "divorce",
-  ...props
-}) {
-  const containerCount = Children.count(children);
-  const fitContent = direction === "row" ? "width" : "height";
-  const isFragmentElement = (node) => isValidElement(node) && node.type === Fragment;
-  const nodes = Children.toArray(children).flatMap(
-    (node) => isFragmentElement(node) ? Children.toArray(node.props.children) : [node]
-  );
-  const flattenedChildren = nodes.filter(
-    isValidElement
-  );
-  if (flattenedChildren.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    FlexLayoutProvider,
-    {
-      value: {
-        layoutName,
-        direction,
-        panelMovementMode,
-        panelClassName,
-        containerCount,
-        fitContent
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `${FlexLayout_default["flex-layout"]} ${className && className !== "" ? className : ""}`,
-        ...ref ? { ref } : {},
-        ...props,
-        "data-layout_name": layoutName,
-        "data-direction": direction
-      },
-      flattenedChildren.map((child, index) => {
-        if (!child || !isValidElement(child)) return null;
-        return /* @__PURE__ */ React.createElement(Fragment, { key: index }, child, /* @__PURE__ */ React.createElement(
-          ContainerOpenCloseProvider,
-          {
-            layoutName,
-            containerName: child.props.containerName,
-            sizeName: fitContent
-          }
-        ));
-      })
-    )
-  ));
-}
-var useSize = (sizeName) => {
-  const ref = useRef(null);
-  const [size, setSize] = useState(void 0);
-  useLayoutEffect(() => {
-    if (!ref.current) return;
-    const handleResize = () => {
-      if (ref.current) {
-        const newSize = ref.current.getBoundingClientRect()[sizeName];
-        setSize(newSize);
-      }
-    };
-    handleResize();
-    const resizeObserver = new ResizeObserver(() => {
-      handleResize();
-    });
-    resizeObserver.observe(ref.current);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [sizeName]);
-  return { ref, size };
-};
-var flexDirectionModel = {
-  row: {
-    xy: "x",
-    targetDirection: "left",
-    nextDirection: "right",
-    sizeName: "width",
-    resizeCursor: "ew-resize"
-  },
-  column: {
-    xy: "y",
-    targetDirection: "top",
-    nextDirection: "bottom",
-    sizeName: "height",
-    resizeCursor: "ns-resize"
-  }
-};
-function FlexLayoutResizePanel({
-  direction,
-  containerCount,
-  panelMode = "default",
-  containerName,
-  layoutName,
-  panelClassName,
-  panelMovementMode
-}) {
-  let isResizePanelClickRef = useRef(false);
-  let prevTouchEvent = null;
-  let parentSizeRef = useRef(0);
-  let totalMovementRef = useRef(0);
-  const containerCountRef = useRef(containerCount);
-  useEffect(() => {
-    return () => {
-      document.body.style.cursor = "";
-    };
-  }, []);
-  useEffect(() => {
-    containerCountRef.current = containerCount;
-  }, [containerCount]);
-  const panelRef = useRef(null);
-  const panelMouseDownEvent = (event) => {
-    if (!panelRef.current || !panelRef.current.parentElement) return;
-    isResizePanelClickRef.current = true;
-    containerCountRef.current = [
-      ...panelRef.current.parentElement.children
-    ].filter((e) => e.hasAttribute("data-container_name")).length;
-    const sizeName = flexDirectionModel[direction].sizeName;
-    parentSizeRef.current = panelRef.current.parentElement.getBoundingClientRect()[sizeName];
-    prevTouchEvent = null;
-    totalMovementRef.current = 0;
-    if (!parentSizeRef.current) return;
-    document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
-  };
-  const panelMouseUpEvent = () => {
-    isResizePanelClickRef.current = false;
-    parentSizeRef.current = 0;
-    prevTouchEvent = null;
-    totalMovementRef.current = 0;
-    document.body.style.cursor = "";
-  };
-  function moveMouseFlex(originTarget, resizePanel, moveEvent) {
-    const model = flexDirectionModel[direction];
-    const movement = moveEvent["movement" + model.xy.toUpperCase()];
-    totalMovementRef.current += movement;
-    const minSizeName = "min-" + model.sizeName;
-    const maxSizeName = "max-" + model.sizeName;
-    let targetElement = findNotCloseFlexContent(
-      originTarget,
-      "previousElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current > 0 || panelMovementMode === "bulldozer" && movement > 0 || !targetElement)
-      targetElement = originTarget;
-    let nextElement = findNotCloseFlexContent(
-      resizePanel.nextElementSibling,
-      "nextElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current < 0 || panelMovementMode === "bulldozer" && movement < 0 || !nextElement)
-      nextElement = resizePanel.nextElementSibling;
-    if (!targetElement || !nextElement) return;
-    const targetRect = targetElement.getBoundingClientRect();
-    const targetStyle = window.getComputedStyle(targetElement);
-    const targetMinSize = parseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;
-    const targetMaxSize = parseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;
-    const nextRect = nextElement.getBoundingClientRect();
-    const nextStyle = window.getComputedStyle(nextElement);
-    const nextMinSize = parseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;
-    const nextMaxSize = parseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;
-    let targetSize = targetRect[model.sizeName] + movement;
-    let nextElementSize = nextRect[model.sizeName] - movement;
-    if (targetMaxSize > 0 && targetSize > targetMaxSize) {
-      return;
-    }
-    if (nextMaxSize > 0 && nextElementSize > nextMaxSize) {
-      return;
-    }
-    if (isOverMove(targetSize, targetMinSize)) {
-      targetSize = 0;
-      nextElementSize = nextRect[model.sizeName];
-    } else if (isOverMove(nextElementSize, nextMinSize)) {
-      nextElementSize = 0;
-      targetSize = targetRect[model.sizeName];
-    }
-    const targetFlexGrow = targetSize / (parentSizeRef.current - 1) * containerCountRef.current;
-    const nextElementFlexGrow = nextElementSize / (parentSizeRef.current - 1) * containerCountRef.current;
-    if (!(targetElement instanceof HTMLElement)) return;
-    if (!(nextElement instanceof HTMLElement)) return;
-    targetElement.style.flex = `${targetFlexGrow} 1 0%`;
-    nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
-  }
-  useEffect(() => {
-    const addGlobalMoveEvent = (event) => {
-      if (!isResizePanelClickRef.current || !panelRef.current) {
-        return;
-      }
-      event.preventDefault();
-      const targetElement = panelRef.current.previousElementSibling;
-      const targetPanel = panelRef.current;
-      if (!targetElement || !targetPanel) return;
-      let move = { movementX: 0, movementY: 0 };
-      if (window.TouchEvent && event instanceof window.TouchEvent) {
-        if (!prevTouchEvent) {
-          prevTouchEvent = event;
-          return;
-        }
-        move.movementX = (prevTouchEvent.touches[0].pageX - event.touches[0].pageX) * -2;
-        move.movementY = (prevTouchEvent.touches[0].pageY - event.touches[0].pageY) * -2;
-        prevTouchEvent = event;
-      } else {
-        move.movementX = event.movementX;
-        move.movementY = event.movementY;
-      }
-      moveMouseFlex(targetElement, targetPanel, move);
-    };
-    ["mousemove", "touchmove"].forEach((eventName) => {
-      window.addEventListener(eventName, addGlobalMoveEvent, {
-        passive: false
-      });
-    });
-    ["mouseup", "touchend"].forEach((eventName) => {
-      window.addEventListener(eventName, panelMouseUpEvent);
-    });
-    return () => {
-      ["mousemove", "touchmove"].forEach((eventName) => {
-        window.removeEventListener(eventName, addGlobalMoveEvent);
-      });
-      ["mouseup", "touchend"].forEach((eventName) => {
-        window.removeEventListener(eventName, panelMouseUpEvent);
-      });
-    };
-  }, []);
-  useEffect(() => {
-    if (!panelRef.current) return;
-    setResizePanelRef(layoutName, containerName, panelRef);
-  }, [containerName, layoutName]);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      id: containerName + "_resize_panel",
-      className: `${FlexLayout_default["flex-resize-panel"]} ${FlexLayout_default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
-      ref: panelRef,
-      onMouseDown: panelMouseDownEvent,
-      onTouchStart: panelMouseDownEvent
-    },
-    /* @__PURE__ */ React.createElement("div", { className: FlexLayout_default.hover })
-  );
-}
-
-// src/flex-layout/components/FlexLayoutContainer.tsx
-function FlexLayoutContainer({
-  isFitContent,
-  isFitResize,
-  // fitContent,
-  // containerCount,
-  // layoutName,
-  containerName,
-  grow: initialGrow,
-  prevGrow: initialPrevGrow,
-  isInitialResizable,
-  isResizePanel,
-  children,
-  className,
-  panelMode
-}) {
-  const {
-    direction,
-    panelMovementMode,
-    panelClassName,
-    layoutName,
-    fitContent,
-    containerCount
-  } = useFlexLayoutContext();
-  const { ref, size } = (
-    // isFitContent && fitContent
-    //?
-    useSize(fitContent)
-  );
-  const flexContainerNodeRef = useRef(null);
-  const flexContainerRef = useCallback(
-    (node) => {
-      flexContainerNodeRef.current = node;
-      if (node !== null) {
-        setContainerRef(layoutName, containerName, { current: node });
-      }
-    },
-    [layoutName, containerName]
-  );
-  const [growState, setGrowState] = useState(initialGrow);
-  useEffect(() => {
-    setGrowState(initialGrow);
-  }, [initialGrow]);
-  const [prevGrowState, setPrevGrowState] = useState(
-    initialPrevGrow
-  );
-  const [isFirstLoad, setIsFirstLoad] = useState(true);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    setContainerRef(layoutName, containerName, flexContainerNodeRef);
-    return () => {
-      setContainerRef(layoutName, containerName, {
-        current: null
-      });
-    };
-  }, [containerName, layoutName]);
-  useEffect(() => {
-    if (typeof window == "undefined" || flexContainerNodeRef.current === null)
-      return;
-    const storedGrow = sessionStorage.getItem(containerName);
-    if (storedGrow !== null) {
-      const parsed = parseFloat(storedGrow);
-      if (!isNaN(parsed)) {
-        flexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;
-        setGrowState(parsed);
-      }
-    }
-  }, [containerName]);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    const targetNode = flexContainerNodeRef.current;
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.type === "attributes" && mutation.attributeName === "style" && targetNode.style.flex) {
-          const flexValue = targetNode.style.flex;
-          const parsedGrow = parseFloat(flexValue.split(" ")[0]);
-          if (!isNaN(parsedGrow)) {
-            setGrowState(parsedGrow);
-          }
-        }
-      }
-    });
-    observer.observe(targetNode, {
-      attributes: true,
-      attributeFilter: ["style"],
-      attributeOldValue: true
-    });
-    return () => {
-      observer.disconnect();
-    };
-  }, [containerName]);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent)
-      return;
-    requestAnimationFrame(() => {
-      if (!flexContainerNodeRef.current) return;
-      const sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;
-      const parentSize = flexContainerNodeRef.current.parentElement && flexContainerNodeRef.current.parentElement["client" + sizeName] || 0;
-      if (isFitContent) {
-        flexContainerNodeRef.current.style["max" + sizeName] = size + "px";
-      }
-      if (!isFitResize && isFirstLoad) {
-        setIsFirstLoad(false);
-        return;
-      }
-      if (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {
-        const newGrow = mathGrow(size, parentSize, containerCount);
-        setPrevGrowState(growState);
-        setGrowState(newGrow);
-      }
-    });
-  }, [size, containerCount, isFitResize, children]);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    let notGrowList = [];
-    let containerList = [
-      ...flexContainerNodeRef.current.parentElement?.children || []
-    ].filter((e) => e.hasAttribute("data-container_name"));
-    let remainingGrow = containerList.reduce((t, e, i) => {
-      let item = e;
-      if (item.classList.contains(FlexLayout_default["flex-resize-panel"])) return t;
-      if (e.hasAttribute("data-grow") == false || e.getAttribute("data-is_resize") === "true") {
-        notGrowList.push(item);
-        return t;
-      }
-      let grow = parseFloat(item.dataset.grow || "");
-      item.style.flex = `${grow} 1 0%`;
-      t -= grow;
-      return t;
-    }, containerList.length);
-    if (notGrowList.length != 0) {
-      let resizeWeight = mathWeight(notGrowList.length, remainingGrow);
-      notGrowList.forEach((e) => {
-        e.dataset.grow = resizeWeight.toString();
-        e.style.flex = `${resizeWeight} 1 0%`;
-      });
-    }
-  }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      id: containerName,
-      "data-container_name": containerName,
-      ref: flexContainerRef,
-      className: `${FlexLayout_default["flex-container"]} ${className && className !== "" ? className : ""}`,
-      ...growState !== void 0 ? { ["data-grow"]: growState } : {},
-      ...prevGrowState != void 0 ? { ["data-prev_grow"]: prevGrowState } : {},
-      "data-is_resize": isInitialResizable,
-      "data-is_resize_panel": isResizePanel,
-      style: growState !== void 0 && {
-        flex: `${growState} 1 0%`
-      } || {}
-    },
-    isFitContent && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `${FlexLayout_default["flex-content-fit-wrapper"]}`,
-        ref
-      },
-      children
-    ) || children
-  ), isResizePanel && /* @__PURE__ */ React.createElement(
-    FlexLayoutResizePanel,
-    {
-      containerName,
-      layoutName,
-      direction,
-      containerCount,
-      panelMode,
-      panelClassName,
-      panelMovementMode
-    }
-  ));
-}
-var dragState = new Subject();
-var filterChildren = (obj) => {
-  const { children, ...rest } = obj || {};
-  return rest;
-};
-var useDragCapture = (targetRef) => {
-  const stateRef = useRef(null);
-  const forceUpdate = useRef(0);
-  useEffect(() => {
-    const subscription = dragState.pipe(
-      map$1((value) => {
-        if (!targetRef || !targetRef.current) return null;
-        const { x, y } = value;
-        const rect = targetRef.current.getBoundingClientRect();
-        const {
-          width,
-          height,
-          x: rectX,
-          y: rectY,
-          right,
-          bottom
-        } = rect;
-        let isOver = false;
-        if (x < rectX || x > right || y < rectY || y > bottom) {
-          isOver = true;
-        }
-        const leftBoundary = rectX + width * 0.2;
-        const rightBoundary = right - width * 0.2;
-        const topBoundary = rectY + height * 0.2;
-        const bottomBoundary = bottom - height * 0.2;
-        let position = "centerBoundary";
-        if (x < leftBoundary) {
-          position = "leftBoundary";
-        } else if (x > rightBoundary) {
-          position = "rightBoundary";
-        } else if (y < topBoundary) {
-          position = "topBoundary";
-        } else if (y > bottomBoundary) {
-          position = "bottomBoundary";
-        }
-        return {
-          positionName: position,
-          isOver,
-          ...value
-        };
-      }),
-      distinctUntilChanged$1(
-        (prev, curr) => equal(filterChildren(prev), filterChildren(curr))
-      )
-    ).subscribe({
-      next: (value) => {
-        if (value && !equal(
-          filterChildren(stateRef.current),
-          filterChildren(value)
-        )) {
-          stateRef.current = value;
-          forceUpdate.current++;
-        }
-      },
-      error: (err) => console.error(err)
-    });
-    return () => subscription.unsubscribe();
-  }, [targetRef]);
-  const [, rerender] = useState({});
-  useEffect(() => {
-    const interval = setInterval(() => {
-      rerender({});
-    }, 50);
-    return () => clearInterval(interval);
-  }, []);
-  return stateRef.current;
-};
-var dropMovementEventSubject = new Subject();
-var allSplitScreenCount = new BehaviorSubject(0);
-var useDragEvents = ({
-  isBlockingActiveInput = false
-}) => {
-  const dragResumeTimer = useRef(null);
-  const scrollThreshold = 10;
-  const isScrolling = useRef(false);
-  const isPending = useRef(false);
-  const isMouseDown = useRef(false);
-  const isDragging = useRef(false);
-  const touchStartX = useRef(0);
-  const touchStartY = useRef(0);
-  const handleStart = useCallback(
-    ({
-      event: _event,
-      dragStartCallback
-    }) => {
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      if (dragResumeTimer.current) {
-        clearTimeout(dragResumeTimer.current);
-        dragResumeTimer.current = null;
-      }
-      if (event.target.contentEditable === "true" || isBlockingActiveInput && document.activeElement === event.target) {
-        return;
-      }
-      if (event.cancelable) {
-        event.preventDefault();
-      }
-      isPending.current = true;
-      isMouseDown.current = true;
-      if (event instanceof globalThis.TouchEvent) {
-        const touch = event.touches[0];
-        touchStartX.current = touch.clientX;
-        touchStartY.current = touch.clientY;
-      } else if (event instanceof globalThis.MouseEvent) {
-        touchStartX.current = event.clientX;
-        touchStartY.current = event.clientY;
-      }
-      setTimeout(() => {
-        if (!isPending.current || isScrolling.current) return;
-        isPending.current = false;
-        isDragging.current = true;
-        const xy = getClientXy(event);
-        if (!xy) return;
-        const { clientX, clientY } = xy;
-        dragStartCallback({ x: clientX, y: clientY });
-      }, 300);
-    },
-    [isBlockingActiveInput]
-  );
-  const handleMove = useCallback(
-    ({
-      event: _event,
-      notDragCallback,
-      dragStartCallback,
-      moveingCallback
-    }) => {
-      if (!isMouseDown.current) return;
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      const xy = getClientXy(event);
-      if (!xy) return;
-      const { clientX, clientY } = xy;
-      const deltaX = Math.abs(clientX - touchStartX.current);
-      const deltaY = Math.abs(clientY - touchStartY.current);
-      if (isPending.current && (deltaX > scrollThreshold || deltaY > scrollThreshold)) {
-        isScrolling.current = true;
-        isPending.current = false;
-        isDragging.current = false;
-        if (notDragCallback)
-          notDragCallback({ x: clientX, y: clientY });
-        if (dragResumeTimer.current) {
-          clearTimeout(dragResumeTimer.current);
-          dragResumeTimer.current = null;
-        }
-        dragResumeTimer.current = setTimeout(() => {
-          if (!isMouseDown.current) return;
-          if (dragStartCallback)
-            dragStartCallback({ x: clientX, y: clientY });
-          isPending.current = true;
-          isScrolling.current = false;
-          handleStart({ event: _event, dragStartCallback });
-        }, 400);
-        return;
-      }
-      if (!isDragging.current || isPending.current) return;
-      moveingCallback({ x: clientX, y: clientY });
-    },
-    [isBlockingActiveInput]
-  );
-  const handleEnd = useCallback(
-    ({
-      event: _event,
-      dragEndCallback
-    }) => {
-      isScrolling.current = false;
-      isMouseDown.current = false;
-      if (isPending.current) {
-        isPending.current = false;
-        return;
-      }
-      const event = _event instanceof Event ? _event : _event.nativeEvent;
-      if (!isDragging.current) return;
-      isDragging.current = false;
-      const xy = getClientXy(event);
-      if (!xy) return;
-      const { clientX, clientY } = xy;
-      dragEndCallback({ x: clientX, y: clientY });
-    },
-    [isBlockingActiveInput]
-  );
-  return {
-    handleStart,
-    handleMove,
-    handleEnd
-  };
-};
-new Subject();
-function useFlexLayoutSplitScreen({
-  isSplitInitial = false,
-  parentDirection,
-  directionInitial = "row",
-  selfContainerName,
-  parentLayoutName,
-  layoutName
-}) {
-  const [direction, setDirection] = useState(
-    directionInitial
-  );
-  const [isSplit, setIsSplit] = useState(isSplitInitial);
-  const [boundaryContainerSize, setBoundaryContainerSize] = useState(null);
-  const [centerDropTargetComponent, setCenterDropTargetComponent] = useState([]);
-  const [afterDropTargetComponent, setAfterDropTargetComponent] = useState([]);
-  const [beforeDropTargetComponent, setBeforeDropTargetComponent] = useState([]);
-  const layoutRef = useRef(null);
-  const dragState2 = useDragCapture(layoutRef);
-  useEffect(() => {
-    if (!dragState2) {
-      setBoundaryContainerSize(null);
-      return;
-    }
-    const {
-      isDrop,
-      isDragging,
-      positionName,
-      containerName,
-      children: dropComponent,
-      isOver,
-      navigationTitle,
-      dropEndCallback,
-      x,
-      y,
-      screenKey
-    } = dragState2;
-    const orderName = positionName === "leftBoundary" || positionName === "topBoundary" ? "before" : positionName === "rightBoundary" || positionName === "bottomBoundary" ? "after" : "center";
-    if ((isOver || isDrop) && boundaryContainerSize) {
-      setBoundaryContainerSize(null);
-    }
-    if (selfContainerName.startsWith(containerName)) {
-      return;
-    }
-    if (isDrop && screenKey) {
-      const dropDirection = positionName === "leftBoundary" || positionName === "rightBoundary" ? "row" : "column";
-      if (!isSplit && !isOver) {
-        if (positionName !== "centerBoundary" && dropDirection !== parentDirection) {
-          setIsSplit(true);
-          setDirection(dropDirection);
-        }
-        dropMovementEventSubject.next({
-          state: "append",
-          targetContainerName: containerName,
-          targetParentLayoutName: parentLayoutName,
-          targetLayoutName: layoutName,
-          targetComponent: dropComponent,
-          orderName,
-          x,
-          y,
-          dropEndCallback,
-          dropTargetComponentEvent: {
-            navigationTitle,
-            dropDocumentOutsideOption: dragState2?.dropDocumentOutsideOption,
-            direction: dropDirection,
-            screenKey
-          }
-        });
-      }
-    }
-    if (isDragging && !isSplit && !isOver) {
-      const newSize = {
-        left: positionName === "rightBoundary" ? "50%" : "0",
-        top: positionName === "bottomBoundary" ? "50%" : "0",
-        width: positionName === "leftBoundary" || positionName === "rightBoundary" ? "50%" : "100%",
-        height: positionName === "topBoundary" || positionName === "bottomBoundary" ? "50%" : "100%"
-      };
-      if (JSON.stringify(boundaryContainerSize) !== JSON.stringify(newSize)) {
-        setBoundaryContainerSize(newSize);
-      }
-    }
-  }, [
-    dragState2,
-    isSplit,
-    boundaryContainerSize,
-    parentLayoutName,
-    layoutName,
-    selfContainerName,
-    direction
-  ]);
-  return {
-    direction,
-    setDirection,
-    isSplit,
-    setIsSplit,
-    boundaryContainerSize,
-    //setBoundaryContainerSize,
-    centerDropTargetComponent,
-    afterDropTargetComponent,
-    beforeDropTargetComponent,
-    setAfterDropTargetComponent,
-    setBeforeDropTargetComponent,
-    setCenterDropTargetComponent,
-    //dropTargetComponent,
-    //setDropTargetComponent,
-    //setDropPosition,
-    isOver: dragState2?.isOver,
-    layoutRef
-  };
-}
-var MAX_STEP = 18;
-function edgeVelocity(x, y) {
-  const w = window.innerWidth, h = window.innerHeight;
-  const mx = w * 0.15, my = h * 0.15;
-  let vx = 0;
-  if (x < mx)
-    vx = -((mx - x) / mx) * MAX_STEP;
-  else if (x > w - mx)
-    vx = (x - (w - mx)) / mx * MAX_STEP;
-  let vy = 0;
-  if (y < my)
-    vy = -((my - y) / my) * MAX_STEP;
-  else if (y > h - my)
-    vy = (y - (h - my)) / my * MAX_STEP;
-  return { vx, vy };
-}
-function FlexLayoutSplitScreenDragBox({
-  onMouseDown,
-  onTouchStart,
-  dropEndCallback,
-  style,
-  navigationTitle,
-  targetComponent,
-  containerName,
-  children,
-  className,
-  dropDocumentOutsideOption,
-  screenKey = Array.from(
-    window.crypto.getRandomValues(new Uint32Array(16)),
-    (e) => e.toString(32).padStart(2, "0")
-  ).join(""),
-  isBlockingActiveInput = false,
-  customData = {},
-  scrollTargetRef,
-  ...props
-}) {
-  const scrollRAF = useRef(null);
-  const velocity = useRef({ vx: 0, vy: 0 });
-  const ref = useRef(null);
-  const clonedNodeRef = useRef(null);
-  const clonedWidth = useRef(null);
-  const clonedHeight = useRef(null);
-  const hrefUrlRef = useRef("");
-  const { handleStart, handleMove, handleEnd } = useDragEvents({
-    isBlockingActiveInput
-  });
-  const handleMoveWrapper = (event) => {
-    let x = 0;
-    let y = 0;
-    if (event.type === "touchmove") {
-      const t = event.touches[0];
-      x = t.clientX;
-      y = t.clientY;
-    } else {
-      const m = event;
-      x = m.clientX;
-      y = m.clientY;
-    }
-    const { vx, vy } = edgeVelocity(x, y);
-    const inEdge = vx !== 0 || vy !== 0;
-    if (clonedNodeRef.current?.isConnected && !inEdge) {
-      event.preventDefault();
-      if (scrollRAF.current) {
-        cancelAnimationFrame(scrollRAF.current);
-        scrollRAF.current = null;
-      }
-    }
-    if (clonedNodeRef.current?.isConnected && inEdge) {
-      event.preventDefault();
-      velocity.current = { vx, vy };
-      if (!scrollRAF.current) {
-        const step = () => {
-          const target = scrollTargetRef?.current ?? document.scrollingElement;
-          if (target?.scrollBy) {
-            target.scrollBy(
-              velocity.current.vx,
-              velocity.current.vy
-            );
-          } else {
-            window.scrollBy(
-              velocity.current.vx,
-              velocity.current.vy
-            );
-          }
-          if (velocity.current.vx === 0 && velocity.current.vy === 0) {
-            scrollRAF.current = null;
-            return;
-          }
-          scrollRAF.current = requestAnimationFrame(step);
-        };
-        scrollRAF.current = requestAnimationFrame(step);
-      }
-    }
-    if (event.type !== "touchmove") {
-      event.preventDefault();
-    }
-    handleMove({
-      event,
-      notDragCallback: ({ x: x2, y: y2 }) => {
-        if (clonedNodeRef.current) clonedNodeRef.current.remove();
-      },
-      dragStartCallback: ({ x: x2, y: y2 }) => {
-        if (!clonedNodeRef.current) return;
-        navigator.vibrate(100);
-        clonedNodeRef.current.style.left = `${x2 - (clonedWidth.current || 0) / 2}px`;
-        clonedNodeRef.current.style.top = `${y2 - (clonedHeight.current || 0) / 2}px`;
-      },
-      moveingCallback: ({ x: x2, y: y2 }) => {
-        if (clonedNodeRef.current?.isConnected) {
-          clonedNodeRef.current.style.left = `${x2 - (clonedWidth.current || 0) / 2}px`;
-          clonedNodeRef.current.style.top = `${y2 - (clonedHeight.current || 0) / 2}px`;
-        }
-        dragState.next({
-          isDragging: true,
-          isDrop: false,
-          navigationTitle,
-          children: targetComponent,
-          x: x2,
-          y: y2,
-          containerName,
-          dropDocumentOutsideOption,
-          customData
-        });
-      }
-    });
-  };
-  const handleEndWrapper = (event) => {
-    if (scrollRAF.current !== null) {
-      cancelAnimationFrame(scrollRAF.current);
-      scrollRAF.current = null;
-    }
-    velocity.current = { vx: 0, vy: 0 };
-    handleEnd({
-      event,
-      dragEndCallback: ({ x, y }) => {
-        const href = hrefUrlRef.current;
-        if (clonedNodeRef.current) clonedNodeRef.current.remove();
-        if (dropDocumentOutsideOption && isDocumentOut({ x, y })) {
-          if (dropDocumentOutsideOption.isNewTap || !dropDocumentOutsideOption.widthRatio && !dropDocumentOutsideOption.heightRatio) {
-            window.open(href, "_blank");
-          } else {
-            const width = window.innerWidth * (dropDocumentOutsideOption.widthRatio || 1);
-            const height = window.innerHeight * (dropDocumentOutsideOption.heightRatio || 1);
-            window.open(
-              href,
-              "_blank",
-              `width=${width},height=${height},left=${window.screenLeft - x * -1 - width},top=${window.screenTop + y}`
-            );
-          }
-        }
-        dragState.next({
-          isDragging: false,
-          isDrop: true,
-          navigationTitle,
-          children: targetComponent,
-          x,
-          y,
-          containerName,
-          dropDocumentOutsideOption,
-          dropEndCallback,
-          screenKey,
-          customData
-        });
-      }
-    });
-  };
-  useEffect(() => {
-    if (ref.current) {
-      const clone = ref.current.cloneNode(true);
-      const originRect = ref.current.getBoundingClientRect();
-      clone.style.width = originRect.width + "px";
-      clone.style.height = originRect.height + "px";
-      clone.style.opacity = "0.3";
-      clone.style.backdropFilter = "blur(6px)";
-      clonedWidth.current = originRect.width;
-      clonedHeight.current = originRect.height;
-      if (dropDocumentOutsideOption?.openUrl) {
-        hrefUrlRef.current = dropDocumentOutsideOption.openUrl;
-        const href = document.createElement("span");
-        href.textContent = hrefUrlRef.current;
-        clone.prepend(href);
-      }
-      if (navigationTitle) {
-        const title = document.createElement("span");
-        title.textContent = navigationTitle;
-        clone.prepend(title);
-      }
-      clone.style.position = "fixed";
-      clonedNodeRef.current = clone;
-      clonedNodeRef.current.classList.add(
-        FlexLayout_default["flex-split-screen-drag-box-clone"]
-      );
-    }
-  }, []);
-  useEffect(() => {
-    const moveEvents = [
-      "mousemove",
-      "touchmove"
-    ];
-    const endEvents = ["mouseup", "touchend"];
-    moveEvents.forEach((eventName) => {
-      window.addEventListener(eventName, handleMoveWrapper, {
-        passive: false
-      });
-    });
-    endEvents.forEach((eventName) => {
-      window.addEventListener(eventName, handleEndWrapper);
-    });
-    return () => {
-      moveEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, handleMoveWrapper);
-      });
-      endEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, handleEndWrapper);
-      });
-    };
-  }, [
-    customData,
-    targetComponent,
-    dropDocumentOutsideOption,
-    screenKey,
-    isBlockingActiveInput,
-    containerName,
-    navigationTitle,
-    dropEndCallback
-  ]);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const onCtx = (e) => e.preventDefault();
-    el.addEventListener("contextmenu", onCtx);
-    return () => {
-      el.removeEventListener("contextmenu", onCtx);
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `${className || ""} ${FlexLayout_default["flex-split-screen-drag-box"]}`,
-      ref,
-      onContextMenu: (e) => e.preventDefault(),
-      onMouseDown: (ev) => {
-        if (onMouseDown) {
-          Promise.resolve().then(() => onMouseDown(ev));
-        }
-        handleStart({
-          event: ev,
-          dragStartCallback: ({ x, y }) => {
-            if (clonedNodeRef.current) {
-              document.body.appendChild(
-                clonedNodeRef.current
-              );
-              if (ref.current) {
-                const originRect = ref.current.getBoundingClientRect();
-                clonedNodeRef.current.style.width = originRect.width + "px";
-                clonedNodeRef.current.style.height = originRect.height + "px";
-                clonedWidth.current = originRect.width;
-                clonedHeight.current = originRect.height;
-              }
-            }
-            if (clonedNodeRef.current?.isConnected) {
-              navigator.vibrate(100);
-              clonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;
-              clonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;
-            }
-            dragState.next({
-              isDragging: true,
-              isDrop: false,
-              navigationTitle,
-              children: targetComponent,
-              x,
-              y,
-              containerName,
-              dropDocumentOutsideOption,
-              customData
-            });
-          }
-        });
-      },
-      onTouchStart: (ev) => {
-        if (onTouchStart) {
-          Promise.resolve().then(() => onTouchStart(ev));
-        }
-        handleStart({
-          event: ev,
-          dragStartCallback: ({ x, y }) => {
-            if (clonedNodeRef.current) {
-              document.body.appendChild(
-                clonedNodeRef.current
-              );
-              if (ref.current) {
-                const originRect = ref.current.getBoundingClientRect();
-                clonedNodeRef.current.style.width = originRect.width + "px";
-                clonedNodeRef.current.style.height = originRect.height + "px";
-                clonedWidth.current = originRect.width;
-                clonedHeight.current = originRect.height;
-              }
-            }
-            if (clonedNodeRef.current?.isConnected) {
-              navigator.vibrate(100);
-              clonedNodeRef.current.style.left = `${x - (clonedWidth.current || 0) / 2}px`;
-              clonedNodeRef.current.style.top = `${y - (clonedHeight.current || 0) / 2}px`;
-            }
-            dragState.next({
-              isDragging: true,
-              isDrop: false,
-              navigationTitle,
-              children: targetComponent,
-              x,
-              y,
-              containerName,
-              dropDocumentOutsideOption,
-              customData
-            });
-          }
-        });
-      },
-      style: { ...style },
-      ...props
-    },
-    children
-  ));
-}
-
-// src/flex-layout/styles/listScroll.module.css
-var listScroll_default = {};
-
-// src/flex-layout/components/FlexLayoutSplitScreenScrollBox.tsx
-var FlexLayoutSplitScreenScrollBox = ({
-  className,
-  children,
-  keyName,
-  direction,
-  isDefaultScrollStyle = false,
-  ...props
-}) => {
-  const scrollRef = useRef(null);
-  const [isMouseDown, setIsMouseDown] = useState(false);
-  const scrollEventSubject = useRef(new Subject());
-  useEffect(() => {
-    const mouseUpSubscribe = fromEvent(
-      window,
-      "mouseup"
-    ).subscribe(() => {
-      setIsMouseDown(false);
-    });
-    const scrollEventSubscribe = scrollEventSubject.current.pipe(throttleTime(70)).subscribe((position) => {
-      setScrollPosition(keyName, position);
-    });
-    const scrollSubscribe = getScrollPosition(keyName).pipe(take(1)).subscribe((position) => {
-      if (scrollRef.current && position) {
-        scrollRef.current.scrollLeft = position.x;
-        scrollRef.current.scrollTop = position.y;
-      }
-    });
-    return () => {
-      removeScrollPosition(keyName);
-      mouseUpSubscribe.unsubscribe();
-      scrollSubscribe.unsubscribe();
-      scrollEventSubscribe.unsubscribe();
-    };
-  }, [keyName]);
-  useEffect(() => {
-    if (!scrollRef.current) return;
-    let animationFrameId = null;
-    const handleWheel = (event) => {
-      if (!scrollRef.current || direction !== "x") return;
-      if (scrollRef.current.matches(":hover")) {
-        event.preventDefault();
-        const { deltaY } = event;
-        const newScrollLeft = scrollRef.current.scrollLeft + deltaY;
-        if (animationFrameId) {
-          cancelAnimationFrame(animationFrameId);
-        }
-        animationFrameId = requestAnimationFrame(() => {
-          scrollRef.current.scrollLeft = newScrollLeft;
-          scrollEventSubject.current.next({
-            x: newScrollLeft,
-            y: scrollRef.current.scrollTop
-          });
-          animationFrameId = null;
-        });
-      }
-    };
-    scrollRef.current.addEventListener("wheel", handleWheel, {
-      passive: false
-    });
-    return () => {
-      scrollRef.current?.removeEventListener("wheel", handleWheel);
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref: scrollRef,
-      onMouseUp: () => setIsMouseDown(false),
-      onMouseDown: () => setIsMouseDown(true),
-      onMouseMove: (event) => {
-        if (!scrollRef.current || !isMouseDown || direction !== "x")
-          return;
-        scrollRef.current.scrollLeft += event.movementX * -1;
-        scrollEventSubject.current.next({
-          x: scrollRef.current.scrollLeft,
-          y: scrollRef.current.scrollTop
-        });
-      },
-      onScroll: () => {
-        if (!scrollRef.current) return;
-        scrollEventSubject.current.next({
-          x: scrollRef.current.scrollLeft,
-          y: scrollRef.current.scrollTop
-        });
-      },
-      className: `${className || ""} ${isDefaultScrollStyle ? listScroll_default["default-scroll"] : listScroll_default["list-scroll"]} ${direction ? listScroll_default[direction] : ""}`,
-      ...props
-    },
-    children
-  );
-};
-var FlexLayoutSplitScreenScrollBox_default = memo(FlexLayoutSplitScreenScrollBox);
-
-// src/flex-layout/components/FlexLayoutSplitScreenDragBoxContainer.tsx
-function FlexLayoutSplitScreenDragBoxContainer({
-  className,
-  children,
-  layoutName,
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    FlexLayoutSplitScreenScrollBox_default,
-    {
-      keyName: layoutName,
-      className: `${FlexLayout_default["flex-split-screen-drag-box-title-container"]} ${className && className !== "" && className || ""}`,
-      direction: "x",
-      ...props
-    },
-    children
-  );
-}
-function FlexLayoutSplitScreenDragBoxItem({
-  children,
-  onClose,
-  isActive,
-  ...props
-}) {
-  useEffect(() => {
-    allSplitScreenCount.next(allSplitScreenCount.value + 1);
-    return () => {
-      if (allSplitScreenCount.value <= 1) return;
-      allSplitScreenCount.next(allSplitScreenCount.value - 1);
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `${FlexLayout_default["flex-split-screen-drag-box-title-item"]} ${isActive ? FlexLayout_default["active"] : ""}`,
-      ...props
-    },
-    children,
-    /* @__PURE__ */ React.createElement("button", { type: "button", onClick: (ev) => onClose(ev) }, "X")
-  );
-}
-
-// src/flex-layout/components/FlexLayoutSplitScreenDragBoxTitleMore.tsx
-function FlexLayoutSplitScreenDragBoxTitleMore({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ React.createElement(
-    "button",
-    {
-      ...props,
-      className: `${FlexLayout_default["flex-split-screen-drag-box-title-more"]} ${className || ""}`
-    },
-    /* @__PURE__ */ React.createElement("span", null, "."),
-    /* @__PURE__ */ React.createElement("span", null, "."),
-    /* @__PURE__ */ React.createElement("span", null, ".")
-  );
-}
-
-// src/flex-layout/components/FlexLayoutSplitScreen.tsx
-function isOverDrop({
-  x,
-  y,
-  element
-}) {
-  const {
-    x: elementX,
-    y: elementY,
-    right: elementRight,
-    bottom: elementBottom
-  } = element.getBoundingClientRect();
-  const isElementOver = x < elementX || x > elementRight || y < elementY || y > elementBottom;
-  return isElementOver;
-}
-function isInnerDrop({
-  x,
-  y,
-  element
-}) {
-  const {
-    x: elementX,
-    y: elementY,
-    right: elementRight,
-    bottom: elementBottom
-  } = element.getBoundingClientRect();
-  const isElementInner = x >= elementX && x <= elementRight && y >= elementY && y <= elementBottom;
-  return isElementInner;
-}
-var handleUpdateDropTargetComponents = ({
-  orderName,
-  parentOrderName,
-  containerName,
-  parentLayoutName,
-  layoutName,
-  dropComponent,
-  navigationTitle,
-  nextContainerName,
-  isUsePrefix = true,
-  beforeDropTargetComponent,
-  afterDropTargetComponent,
-  centerDropTargetComponent,
-  dropDocumentOutsideOption,
-  screenKey = Array.from(
-    window.crypto.getRandomValues(new Uint32Array(16)),
-    (e) => e.toString(32).padStart(2, "0")
-  ).join("")
-}) => {
-  const nextContainerNameOrderName = parentOrderName ? parentOrderName : orderName;
-  let listMap;
-  let list;
-  let key;
-  if (nextContainerNameOrderName === orderName || nextContainerNameOrderName === "center") {
-    listMap = orderName === "before" ? { beforeDropTargetComponent } : orderName === "after" ? { afterDropTargetComponent } : {
-      centerDropTargetComponent: centerDropTargetComponent.filter(
-        (e) => !e.containerName.split("_").at(0).startsWith(
-          containerName.split("_").at(0)
-        )
-      )
-    };
-  } else {
-    listMap = nextContainerNameOrderName === "before" ? { beforeDropTargetComponent } : { afterDropTargetComponent };
-  }
-  const entries = Object.entries(listMap)[0];
-  key = entries[0];
-  list = entries[1];
-  const newComponent = {
-    containerName: `${containerName + "_" + layoutName}${isUsePrefix ? "_" + orderName + "-" + list.length : ""}`,
-    component: cloneElement(
-      dropComponent,
-      { key: screenKey, screenKey }
-    ),
-    navigationTitle,
-    dropDocumentOutsideOption,
-    screenKey: screenKey || Array.from(
-      window.crypto.getRandomValues(new Uint32Array(16)),
-      (e) => e.toString(32).padStart(2, "0")
-    ).join("")
-  };
-  let allComponents;
-  if (nextContainerName) {
-    const index = list.findIndex(
-      (item) => item.containerName === nextContainerName
-    );
-    if (index !== -1) {
-      if (nextContainerNameOrderName === orderName) {
-        if (orderName === "before") {
-          allComponents = [
-            ...list.slice(0, index),
-            newComponent,
-            ...list.slice(index)
-          ];
-        } else {
-          allComponents = [
-            ...list.slice(0, index + 1),
-            newComponent,
-            ...list.slice(index + 1)
-          ];
-        }
-      } else {
-        if (nextContainerNameOrderName === "after" && orderName === "before") {
-          allComponents = [
-            ...list.slice(0, index),
-            newComponent,
-            ...list.slice(index)
-          ];
-        } else if (nextContainerNameOrderName === "before" && orderName === "after") {
-          allComponents = [
-            ...list.slice(0, index + 1),
-            newComponent,
-            ...list.slice(index + 1)
-          ];
-        } else {
-          if (orderName === "before") {
-            allComponents = [
-              ...list.slice(0, index),
-              newComponent,
-              ...list.slice(index)
-            ];
-          } else {
-            allComponents = [
-              ...list.slice(0, index + 1),
-              newComponent,
-              ...list.slice(index + 1)
-            ];
-          }
-        }
-      }
-    } else {
-      if (nextContainerNameOrderName === "center" && orderName === "after") {
-        allComponents = [newComponent, ...list];
-      } else if (nextContainerNameOrderName === "center" && orderName === "before") {
-        allComponents = [...list, newComponent];
-      } else {
-        allComponents = orderName === "before" ? [newComponent, ...list] : [...list, newComponent];
-      }
-    }
-  } else {
-    allComponents = orderName === "before" ? [newComponent, ...list] : [...list, newComponent];
-  }
-  const seen = /* @__PURE__ */ new Set();
-  const result = allComponents.filter((item) => {
-    if (seen.has(item.containerName)) {
-      return false;
-    }
-    seen.add(item.containerName);
-    return true;
-  });
-  dropMovementEventSubject.next({
-    state: "append",
-    targetParentLayoutName: parentLayoutName,
-    targetLayoutName: layoutName,
-    targetContainerName: containerName,
-    orderName
-  });
-  return { [key]: result };
-};
-var handleRemove = (list, targetContainerName, orderNameSetter) => {
-  const result = list.filter((e) => e.containerName !== targetContainerName);
-  if (result.length != list.length)
-    orderNameSetter(list.length - result.length);
-  return result;
-};
-function getAdjacentItem(items, currentIndex) {
-  if (currentIndex + 1 < items.length) {
-    return {
-      adjacentItem: items[currentIndex + 1],
-      adjacentIndex: currentIndex + 1
-    };
-  } else if (currentIndex - 1 >= 0) {
-    return {
-      adjacentItem: items[currentIndex - 1],
-      adjacentIndex: currentIndex - 1
-    };
-  }
-  return { adjacentItem: null, adjacentIndex: currentIndex };
-}
-var getSelfOrderName = (containerName) => {
-  const result = containerName.split("_").at(-1)?.split("-").at(0)?.split("=").at(0);
-  if (["before", "center", "after"].some((e) => e === result)) {
-    return result;
-  } else {
-    return;
-  }
-};
-function FlexLayoutSplitScreen({
-  children,
-  containerName,
-  layoutName,
-  navigationTitle,
-  dropDocumentOutsideOption,
-  screenKey
-}) {
-  const {
-    direction,
-    isSplit,
-    boundaryContainerSize,
-    afterDropTargetComponent,
-    beforeDropTargetComponent,
-    centerDropTargetComponent,
-    setAfterDropTargetComponent,
-    setBeforeDropTargetComponent,
-    setCenterDropTargetComponent,
-    layoutRef,
-    setIsSplit,
-    setDirection
-  } = useFlexLayoutSplitScreen({
-    isSplitInitial: false,
-    directionInitial: "row",
-    selfContainerName: containerName,
-    parentLayoutName: "",
-    layoutName
-  });
-  useEffect(() => {
-    resetRootSplitScreen(layoutName);
-    const subscribe = getSplitScreen(layoutName, layoutName).subscribe((layoutInfo) => {
-      if (layoutInfo) {
-        setBeforeDropTargetComponent([
-          ...layoutInfo.beforeDropTargetComponent
-        ]);
-        setAfterDropTargetComponent([
-          ...layoutInfo.afterDropTargetComponent
-        ]);
-        setCenterDropTargetComponent([
-          ...layoutInfo.centerDropTargetComponent
-        ]);
-        setDirection(layoutInfo.direction);
-        if (layoutInfo.beforeDropTargetComponent.length !== 0 || layoutInfo.afterDropTargetComponent.length !== 0) {
-          setIsSplit(true);
-        }
-      } else {
-        setSplitScreen(layoutName, layoutName, {
-          afterDropTargetComponent: [],
-          beforeDropTargetComponent: [],
-          centerDropTargetComponent: [
-            {
-              containerName,
-              component: children,
-              navigationTitle,
-              dropDocumentOutsideOption,
-              screenKey: screenKey ? screenKey : Array.from(
-                window.crypto.getRandomValues(
-                  new Uint32Array(16)
-                ),
-                (e) => e.toString(32).padStart(2, "0")
-              ).join("")
-            }
-          ],
-          direction
-        });
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-      resetRootSplitScreen(layoutName);
-    };
-  }, [layoutName]);
-  useEffect(() => {
-    const subscribe = dropMovementEventSubject.pipe(
-      distinctUntilChanged$1((prev, curr) => {
-        const filterChildren2 = (obj) => {
-          const {
-            children: children2,
-            component,
-            targetComponent,
-            x,
-            y,
-            ...rest
-          } = obj || {};
-          return rest;
-        };
-        return equal(filterChildren2(prev), filterChildren2(curr));
-      })
-    ).subscribe((event) => {
-      if (event.state === "remove") {
-        if (event.targetParentLayoutName === layoutName || event.targetParentLayoutName === "" && event.targetLayoutName === layoutName) {
-          requestAnimationFrame(() => {
-            let removeCallback = (removeOrderName) => {
-              if (event.nextContainerName && event.dropTargetComponentEvent && event.targetComponent) {
-                const targetComponentsMap = handleUpdateDropTargetComponents({
-                  orderName: removeOrderName,
-                  containerName: event.nextContainerName,
-                  parentLayoutName: "",
-                  layoutName,
-                  dropComponent: event.targetComponent,
-                  navigationTitle: event.dropTargetComponentEvent.navigationTitle,
-                  isUsePrefix: true,
-                  afterDropTargetComponent,
-                  beforeDropTargetComponent,
-                  centerDropTargetComponent,
-                  dropDocumentOutsideOption,
-                  screenKey: event.dropTargetComponentEvent.screenKey
-                });
-                setSplitScreen(layoutName, layoutName, {
-                  ...getCurrentSplitScreenComponents(
-                    layoutName,
-                    layoutName
-                  ) || {
-                    afterDropTargetComponent,
-                    beforeDropTargetComponent,
-                    centerDropTargetComponent,
-                    direction
-                  },
-                  ...targetComponentsMap
-                });
-                Promise.resolve().then(
-                  () => event.dropEndCallback && event.dropEndCallback({
-                    x: event.x,
-                    y: event.y,
-                    containerName
-                  })
-                );
-              }
-            };
-            const currentComponents = getCurrentSplitScreenComponents(
-              layoutName,
-              layoutName
-            );
-            const afterList = handleRemove(
-              currentComponents?.afterDropTargetComponent || afterDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("after")
-            );
-            const beforList = handleRemove(
-              currentComponents?.beforeDropTargetComponent || beforeDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("before")
-            );
-            const centerList = handleRemove(
-              currentComponents?.centerDropTargetComponent || centerDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("center")
-            );
-            setSplitScreen(layoutName, layoutName, {
-              afterDropTargetComponent: afterList,
-              beforeDropTargetComponent: beforList,
-              centerDropTargetComponent: centerList,
-              direction
-            });
-          });
-        }
-      } else if (event.state === "append") {
-        const {
-          x,
-          y,
-          dropEndCallback,
-          dropTargetComponentEvent,
-          orderName,
-          parentOrderName,
-          targetLayoutName,
-          targetParentLayoutName,
-          targetContainerName,
-          targetComponent,
-          nextContainerName
-        } = event;
-        if (layoutRef.current && orderName && x && y && targetComponent && dropTargetComponentEvent && targetLayoutName === layoutName && isInnerDrop({ x, y, element: layoutRef.current })) {
-          const {
-            direction: dropDirection,
-            navigationTitle: navigationTitle2,
-            dropDocumentOutsideOption: dropDocumentOutsideOption2
-          } = dropTargetComponentEvent;
-          const isOrderNameNotCenter = orderName !== "center";
-          const isOrderNameCenterAndFirstScreen = orderName === "center" && centerDropTargetComponent.length <= 1;
-          if (isOrderNameNotCenter || isOrderNameCenterAndFirstScreen) {
-            setIsSplit(true);
-            if (isOrderNameNotCenter) {
-              setDirection(dropDirection);
-              const targetComponentsMap = handleUpdateDropTargetComponents({
-                orderName,
-                parentOrderName,
-                containerName: targetContainerName,
-                nextContainerName,
-                dropComponent: targetComponent,
-                parentLayoutName: "",
-                layoutName,
-                navigationTitle: navigationTitle2,
-                isUsePrefix: true,
-                afterDropTargetComponent,
-                beforeDropTargetComponent,
-                centerDropTargetComponent,
-                dropDocumentOutsideOption: dropDocumentOutsideOption2
-              });
-              setSplitScreen(layoutName, layoutName, {
-                ...{
-                  afterDropTargetComponent,
-                  beforeDropTargetComponent,
-                  centerDropTargetComponent,
-                  direction: dropDirection
-                },
-                ...targetComponentsMap,
-                ...{ direction: dropDirection }
-              });
-              Promise.resolve().then(
-                () => dropEndCallback && dropEndCallback({
-                  x: event.x,
-                  y: event.y,
-                  containerName
-                })
-              );
-            } else {
-              const childScreenInfo = getCurrentSplitScreenComponents(
-                layoutName,
-                `${layoutName}_center=${centerDropTargetComponent[0].screenKey}`
-              ) || {
-                afterDropTargetComponent: [],
-                beforeDropTargetComponent: [],
-                centerDropTargetComponent: [],
-                direction
-              };
-              setSplitScreen(
-                layoutName,
-                `${layoutName}_center=${centerDropTargetComponent[0].screenKey}`,
-                {
-                  ...childScreenInfo,
-                  ...{
-                    centerDropTargetComponent: [
-                      centerDropTargetComponent[0],
-                      {
-                        containerName: `${targetContainerName}_${layoutName}_${orderName}`,
-                        component: targetComponent,
-                        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: centerDropTargetComponent[0].screenKey,
-                        navigationTitle: navigationTitle2
-                      }
-                    ]
-                  }
-                }
-              );
-            }
-          }
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-    };
-  }, [
-    direction,
-    layoutName,
-    isSplit,
-    beforeDropTargetComponent,
-    afterDropTargetComponent,
-    centerDropTargetComponent
-  ]);
-  return /* @__PURE__ */ React.createElement("div", { className: `${FlexLayout_default["flex-split-screen"]}`, ref: layoutRef }, /* @__PURE__ */ React.createElement(
-    FlexLayout,
-    {
-      direction,
-      layoutName,
-      "data-is_split": isSplit,
-      panelMovementMode: "bulldozer"
-    },
-    beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, beforeDropTargetComponent.map(
-      ({
-        containerName: cName,
-        component,
-        navigationTitle: navigationTitle2,
-        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-        screenKey: screenKey2
-      }, i) => /* @__PURE__ */ React.createElement(
-        FlexLayoutContainer,
-        {
-          containerName: cName,
-          isInitialResizable: true,
-          isResizePanel: true,
-          key: cName
-        },
-        /* @__PURE__ */ React.createElement(
-          FlexLayoutSplitScreenChild,
-          {
-            parentDirection: direction,
-            layoutName: `${layoutName}_before`,
-            parentLayoutName: layoutName,
-            containerName: cName,
-            depth: 1,
-            rootRef: layoutRef,
-            screenKey: screenKey2,
-            initialCenterComponents: [
-              {
-                navigationTitle: navigationTitle2,
-                component,
-                containerName: cName,
-                dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                screenKey: screenKey2
-              }
-            ],
-            rootName: layoutName
-          }
-        )
-      )
-    )) : /* @__PURE__ */ React.createElement("div", null),
-    centerDropTargetComponent.length === 0 ? /* @__PURE__ */ React.createElement("div", null) : /* @__PURE__ */ React.createElement(
-      FlexLayoutContainer,
-      {
-        containerName: `${centerDropTargetComponent[0].containerName}`,
-        isInitialResizable: true,
-        isResizePanel: isSplit
-      },
-      isSplit ? /* @__PURE__ */ React.createElement(
-        FlexLayoutSplitScreenChild,
-        {
-          parentDirection: direction,
-          layoutName: `${layoutName}_center`,
-          parentLayoutName: layoutName,
-          containerName: `${centerDropTargetComponent[0].containerName}`,
-          depth: 0,
-          rootRef: layoutRef,
-          screenKey: centerDropTargetComponent[0].screenKey,
-          initialCenterComponents: [
-            {
-              navigationTitle: centerDropTargetComponent[0].navigationTitle,
-              component: centerDropTargetComponent[0].component,
-              containerName: centerDropTargetComponent[0].containerName,
-              dropDocumentOutsideOption: centerDropTargetComponent[0].dropDocumentOutsideOption,
-              screenKey: centerDropTargetComponent[0].screenKey
-            }
-          ],
-          rootName: layoutName
-        }
-      ) : /* @__PURE__ */ React.createElement(
-        FlexLayoutSplitScreenScrollBox_default,
-        {
-          keyName: centerDropTargetComponent[0].containerName,
-          isDefaultScrollStyle: true
-        },
-        centerDropTargetComponent[0].component
-      )
-    ),
-    afterDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, afterDropTargetComponent.map(
-      ({
-        containerName: cName,
-        component,
-        navigationTitle: navigationTitle2,
-        dropDocumentOutsideOption: dropDocumentOutsideOption2,
-        screenKey: screenKey2
-      }, i) => /* @__PURE__ */ React.createElement(
-        FlexLayoutContainer,
-        {
-          containerName: cName,
-          isInitialResizable: true,
-          isResizePanel: afterDropTargetComponent.length - 1 !== i,
-          key: cName
-        },
-        /* @__PURE__ */ React.createElement(
-          FlexLayoutSplitScreenChild,
-          {
-            parentDirection: direction,
-            layoutName: `${layoutName}_after`,
-            parentLayoutName: layoutName,
-            containerName: cName,
-            depth: 1,
-            rootRef: layoutRef,
-            screenKey: screenKey2,
-            initialCenterComponents: [
-              {
-                navigationTitle: navigationTitle2,
-                component,
-                containerName: cName,
-                dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                screenKey: screenKey2
-              }
-            ],
-            rootName: layoutName
-          }
-        )
-      )
-    )) : /* @__PURE__ */ React.createElement("div", null)
-  ), boundaryContainerSize && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
-      style: { ...boundaryContainerSize }
-    },
-    "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
-  ));
-}
-function FlexLayoutSplitScreenChild({
-  containerName,
-  layoutName,
-  parentLayoutName,
-  parentDirection,
-  depth,
-  //isSplit: isSplitInitial,
-  rootRef,
-  rootName,
-  initialCenterComponents,
-  screenKey
-}) {
-  const {
-    direction,
-    isSplit,
-    boundaryContainerSize,
-    afterDropTargetComponent,
-    beforeDropTargetComponent,
-    centerDropTargetComponent,
-    setAfterDropTargetComponent,
-    setBeforeDropTargetComponent,
-    setCenterDropTargetComponent,
-    layoutRef,
-    setIsSplit,
-    setDirection
-  } = useFlexLayoutSplitScreen({
-    isSplitInitial: false,
-    directionInitial: "row",
-    parentDirection,
-    selfContainerName: containerName,
-    parentLayoutName,
-    layoutName
-  });
-  const [isEmptyContent, setIsEmptyContent] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const centerDropTargetComponentRef = useRef(centerDropTargetComponent);
-  const activeIndexRef = useRef(activeIndex);
-  useEffect(() => {
-    const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).pipe(take$1(1)).subscribe((layoutInfo) => {
-      setSplitScreen(rootName, `${layoutName}=${screenKey}`, {
-        afterDropTargetComponent: layoutInfo?.afterDropTargetComponent || [],
-        beforeDropTargetComponent: layoutInfo?.beforeDropTargetComponent || [],
-        centerDropTargetComponent: layoutInfo?.centerDropTargetComponent || initialCenterComponents || [],
-        direction: layoutInfo?.direction || direction
-      });
-    });
-    return () => {
-      removeSplitScreenChild(rootName, layoutName);
-      subscribe.unsubscribe();
-    };
-  }, [rootName, layoutName, initialCenterComponents]);
-  useEffect(() => {
-    const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).subscribe((layoutInfo) => {
-      if (layoutInfo) {
-        setBeforeDropTargetComponent([
-          ...layoutInfo.beforeDropTargetComponent
-        ]);
-        setAfterDropTargetComponent([
-          ...layoutInfo.afterDropTargetComponent
-        ]);
-        setCenterDropTargetComponent([
-          ...layoutInfo.centerDropTargetComponent
-        ]);
-        setDirection(layoutInfo.direction);
-        if (layoutInfo.beforeDropTargetComponent.length !== 0 || layoutInfo.afterDropTargetComponent.length !== 0) {
-          setIsSplit(true);
-        } else if (layoutInfo.beforeDropTargetComponent.length === 0 && layoutInfo.centerDropTargetComponent.length === 0 && layoutInfo.afterDropTargetComponent.length === 0) {
-          dropMovementEventSubject.next({
-            state: "remove",
-            targetContainerName: containerName,
-            targetParentLayoutName: "",
-            targetLayoutName: parentLayoutName
-          });
-          setIsEmptyContent(true);
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-    };
-  }, [rootName, layoutName]);
-  useEffect(() => {
-    const subscribe = dropMovementEventSubject.pipe(
-      distinctUntilChanged$1((prev, curr) => {
-        const filterChildren2 = (obj) => {
-          const {
-            children,
-            component,
-            targetComponent,
-            x,
-            y,
-            ...rest
-          } = obj || {};
-          return rest;
-        };
-        return equal(filterChildren2(prev), filterChildren2(curr));
-      })
-    ).subscribe((event) => {
-      if (event.state === "remove") {
-        if (event.targetParentLayoutName === layoutName || event.targetParentLayoutName === "" && event.targetLayoutName === layoutName) {
-          requestAnimationFrame(() => {
-            let removeCallback = (removeOrderName) => {
-              if (event.nextContainerName && event.dropTargetComponentEvent && event.targetComponent) {
-                const targetComponentsMap = handleUpdateDropTargetComponents({
-                  orderName: removeOrderName,
-                  containerName: event.nextContainerName,
-                  parentLayoutName,
-                  layoutName,
-                  dropComponent: event.targetComponent,
-                  navigationTitle: event.dropTargetComponentEvent.navigationTitle,
-                  isUsePrefix: true,
-                  afterDropTargetComponent,
-                  beforeDropTargetComponent,
-                  centerDropTargetComponent,
-                  dropDocumentOutsideOption: event.dropTargetComponentEvent?.dropDocumentOutsideOption,
-                  screenKey: event.dropTargetComponentEvent.screenKey
-                });
-                setSplitScreen(
-                  rootName,
-                  `${layoutName}=${screenKey}`,
-                  {
-                    ...getCurrentSplitScreenComponents(
-                      rootName,
-                      `${layoutName}=${screenKey}`
-                    ) || {
-                      afterDropTargetComponent,
-                      beforeDropTargetComponent,
-                      centerDropTargetComponent,
-                      direction
-                    },
-                    ...targetComponentsMap
-                  }
-                );
-                Promise.resolve().then(
-                  () => event.dropEndCallback && event.dropEndCallback({
-                    x: event.x,
-                    y: event.y,
-                    containerName
-                  })
-                );
-              }
-            };
-            const currentComponents = getCurrentSplitScreenComponents(
-              rootName,
-              `${layoutName}=${screenKey}`
-            );
-            const afterList = handleRemove(
-              currentComponents?.afterDropTargetComponent || afterDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("after")
-            );
-            const beforList = handleRemove(
-              currentComponents?.beforeDropTargetComponent || beforeDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("before")
-            );
-            const centerList = handleRemove(
-              currentComponents?.centerDropTargetComponent || centerDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("center")
-            );
-            setSplitScreen(
-              rootName,
-              `${layoutName}=${screenKey}`,
-              {
-                afterDropTargetComponent: afterList,
-                beforeDropTargetComponent: beforList,
-                centerDropTargetComponent: centerList,
-                direction
-              }
-            );
-          });
-        }
-      } else if (event.state === "append") {
-        const {
-          x,
-          y,
-          dropEndCallback,
-          dropTargetComponentEvent,
-          orderName,
-          targetLayoutName,
-          targetParentLayoutName,
-          targetContainerName,
-          targetComponent,
-          nextContainerName,
-          parentOrderName
-        } = event;
-        if (layoutRef.current && orderName && x && y && dropTargetComponentEvent && isInnerDrop({ x, y, element: layoutRef.current })) {
-          const {
-            direction: dropDirection,
-            navigationTitle,
-            dropDocumentOutsideOption,
-            screenKey: containerScreenKey
-          } = dropTargetComponentEvent;
-          if (
-            //orderName !== 'center' &&
-            targetLayoutName === layoutName && targetComponent
-          ) {
-            if (dropDirection === parentDirection && orderName !== "center") {
-              dropMovementEventSubject.next({
-                state: "append",
-                targetContainerName,
-                targetParentLayoutName: "",
-                targetLayoutName: parentLayoutName,
-                targetComponent,
-                nextContainerName: containerName,
-                parentOrderName: getSelfOrderName(layoutName) || orderName,
-                orderName,
-                x,
-                y,
-                dropEndCallback,
-                dropTargetComponentEvent: {
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  direction: parentDirection,
-                  screenKey
-                }
-              });
-            } else {
-              if (orderName !== "center") {
-                setDirection(dropDirection);
-                setIsSplit(true);
-              }
-              const targetComponentsMap = handleUpdateDropTargetComponents({
-                orderName,
-                parentOrderName,
-                containerName: targetContainerName,
-                nextContainerName,
-                parentLayoutName,
-                layoutName,
-                dropComponent: targetComponent,
-                navigationTitle,
-                isUsePrefix: orderName !== "center",
-                afterDropTargetComponent,
-                beforeDropTargetComponent,
-                centerDropTargetComponent,
-                dropDocumentOutsideOption
-              });
-              setSplitScreen(
-                rootName,
-                `${layoutName}=${screenKey}`,
-                {
-                  ...getCurrentSplitScreenComponents(
-                    rootName,
-                    `${layoutName}=${screenKey}`
-                  ) || {
-                    afterDropTargetComponent,
-                    beforeDropTargetComponent,
-                    centerDropTargetComponent,
-                    direction
-                  },
-                  ...targetComponentsMap,
-                  ...{ direction: dropDirection }
-                }
-              );
-              Promise.resolve().then(
-                () => event.dropEndCallback && event.dropEndCallback({
-                  x: event.x,
-                  y: event.y,
-                  containerName
-                })
-              );
-            }
-          }
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-    };
-  }, [
-    direction,
-    parentDirection,
-    parentLayoutName,
-    layoutName,
-    beforeDropTargetComponent,
-    afterDropTargetComponent,
-    centerDropTargetComponent
-  ]);
-  useEffect(() => {
-    centerDropTargetComponentRef.current = centerDropTargetComponent;
-  }, [centerDropTargetComponent]);
-  useEffect(() => {
-    activeIndexRef.current = activeIndex;
-  }, [activeIndex]);
-  const [isOnlyOneScreen, setIsOnlyOneScreen] = useState(false);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isEmptyContent && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: `${FlexLayout_default["flex-split-screen"]}`,
-      ref: layoutRef
-    },
-    /* @__PURE__ */ React.createElement(
-      FlexLayout,
-      {
-        direction,
-        layoutName: `${layoutName}`,
-        panelMovementMode: "bulldozer"
-      },
-      beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, beforeDropTargetComponent.map(
-        ({
-          containerName: cName,
-          component,
-          navigationTitle,
-          dropDocumentOutsideOption,
-          screenKey: screenKey2
-        }, i) => /* @__PURE__ */ React.createElement(
-          FlexLayoutContainer,
-          {
-            containerName: cName,
-            isInitialResizable: true,
-            isResizePanel: true,
-            key: cName
-          },
-          /* @__PURE__ */ React.createElement(
-            FlexLayoutSplitScreenChild,
-            {
-              parentDirection: direction,
-              layoutName: `${layoutName}_before-${depth}`,
-              parentLayoutName: layoutName,
-              containerName: cName,
-              depth: depth + 1,
-              rootRef,
-              screenKey: screenKey2,
-              initialCenterComponents: [
-                {
-                  navigationTitle,
-                  component,
-                  containerName: cName,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }
-              ],
-              rootName
-            }
-          )
-        )
-      )) : /* @__PURE__ */ React.createElement("div", null),
-      centerDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        FlexLayoutContainer,
-        {
-          containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-          isInitialResizable: true,
-          isResizePanel: isSplit,
-          key: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
-        },
-        isSplit ? /* @__PURE__ */ React.createElement("div", { "data-key": screenKey }, /* @__PURE__ */ React.createElement(
-          FlexLayoutSplitScreenChild,
-          {
-            parentDirection: direction,
-            layoutName: `${layoutName}_center-${depth}`,
-            parentLayoutName: layoutName,
-            containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-            depth: depth + 1,
-            rootRef,
-            initialCenterComponents: centerDropTargetComponent.map(
-              ({
-                navigationTitle,
-                component,
-                containerName: cName,
-                dropDocumentOutsideOption,
-                screenKey: centerScreenKey
-              }) => ({
-                navigationTitle,
-                component,
-                containerName: cName,
-                dropDocumentOutsideOption,
-                screenKey: centerScreenKey
-              })
-            ),
-            screenKey,
-            rootName
-          }
-        )) : /* @__PURE__ */ React.createElement(
-          FlexLayoutSplitScreenScrollBox_default,
-          {
-            keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
-            isDefaultScrollStyle: true
-          },
-          !isOnlyOneScreen && /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper-sticky"]}`
-            },
-            /* @__PURE__ */ React.createElement(
-              "div",
-              {
-                "data-is_split": isSplit,
-                "data-layout_name": layoutName,
-                "data-parent_layout_name": parentLayoutName,
-                "data-container_name": `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper"]}`
-              },
-              /* @__PURE__ */ React.createElement(
-                FlexLayoutSplitScreenDragBoxContainer,
-                {
-                  key: layoutName,
-                  "data-layout_name": layoutName,
-                  layoutName
-                },
-                centerDropTargetComponent.map(
-                  (item, index) => /* @__PURE__ */ React.createElement(
-                    FlexLayoutSplitScreenDragBoxItem,
-                    {
-                      onClose: (ev) => {
-                        if (activeIndexRef.current === index && centerDropTargetComponent.length === 1) {
-                          dropMovementEventSubject.next(
-                            {
-                              state: "remove",
-                              targetContainerName: containerName,
-                              targetParentLayoutName: parentLayoutName,
-                              targetLayoutName: layoutName
-                            }
-                          );
-                        } else {
-                          if (centerDropTargetComponent.length === activeIndexRef.current + 1) {
-                            setActiveIndex(
-                              activeIndexRef.current - 1
-                            );
-                          }
-                          setCenterDropTargetComponent(
-                            (prev) => {
-                              const result = handleRemove(
-                                prev,
-                                item.containerName,
-                                () => {
-                                }
-                              );
-                              return result;
-                            }
-                          );
-                        }
-                      },
-                      key: item.navigationTitle + layoutName + item.containerName,
-                      isActive: activeIndex === index
-                    },
-                    /* @__PURE__ */ React.createElement(
-                      FlexLayoutSplitScreenDragBox,
-                      {
-                        onClick: () => {
-                          setActiveIndex(
-                            index
-                          );
-                        },
-                        containerName: item.containerName,
-                        dropDocumentOutsideOption: item.dropDocumentOutsideOption,
-                        targetComponent: item.component,
-                        navigationTitle: item.navigationTitle,
-                        "data-container-name": item.containerName,
-                        "data-layout-name": layoutName,
-                        "data-parent-layout-name": parentLayoutName,
-                        dropEndCallback: ({
-                          x,
-                          y,
-                          containerName: appendContainerName
-                        }) => {
-                          if (!rootRef.current || !layoutRef.current)
-                            return;
-                          const isRootOver = isOverDrop(
-                            {
-                              x,
-                              y,
-                              element: rootRef.current
-                            }
-                          );
-                          const isLayoutInner = isInnerDrop(
-                            {
-                              x,
-                              y,
-                              element: layoutRef.current
-                            }
-                          );
-                          if (!isRootOver && !isLayoutInner || !isRootOver && isLayoutInner && centerDropTargetComponentRef.current.length > 1) {
-                            const option = {};
-                            if (centerDropTargetComponentRef.current.length > 1) {
-                              const {
-                                adjacentItem,
-                                adjacentIndex
-                              } = getAdjacentItem(
-                                centerDropTargetComponentRef.current,
-                                activeIndexRef.current
-                              );
-                              if (adjacentItem && activeIndexRef.current === index) {
-                                Object.assign(
-                                  option,
-                                  {
-                                    x,
-                                    y,
-                                    targetComponent: adjacentItem.component,
-                                    nextContainerName: adjacentItem.containerName,
-                                    orderName: "center",
-                                    dropTargetComponentEvent: {
-                                      navigationTitle: adjacentItem.navigationTitle,
-                                      dropDocumentOutsideOption: adjacentItem.dropDocumentOutsideOption,
-                                      direction,
-                                      screenKey
-                                    }
-                                  }
-                                );
-                              }
-                            }
-                            if (index === 0) {
-                              dropMovementEventSubject.next(
-                                {
-                                  state: "remove",
-                                  targetContainerName: item.containerName,
-                                  targetParentLayoutName: parentLayoutName,
-                                  targetLayoutName: layoutName,
-                                  ...option
-                                }
-                              );
-                            } else {
-                              dropMovementEventSubject.next(
-                                {
-                                  state: "remove",
-                                  targetContainerName: item.containerName,
-                                  targetParentLayoutName: "",
-                                  targetLayoutName: layoutName,
-                                  ...option
-                                }
-                              );
-                            }
-                          }
-                        }
-                      },
-                      item.navigationTitle
-                    )
-                  )
-                )
-              ),
-              /* @__PURE__ */ React.createElement(FlexLayoutSplitScreenDragBoxTitleMore, null)
-            )
-          ),
-          (() => {
-            const target = centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0];
-            return target.component;
-          })()
-        )
-      )) : /* @__PURE__ */ React.createElement("div", null),
-      afterDropTargetComponent.length != 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, afterDropTargetComponent.map(
-        ({
-          containerName: cName,
-          component,
-          navigationTitle,
-          dropDocumentOutsideOption,
-          screenKey: screenKey2
-        }, i) => /* @__PURE__ */ React.createElement(
-          FlexLayoutContainer,
-          {
-            containerName: cName,
-            isInitialResizable: true,
-            isResizePanel: i !== afterDropTargetComponent.length - 1,
-            key: cName
-          },
-          /* @__PURE__ */ React.createElement(
-            FlexLayoutSplitScreenChild,
-            {
-              parentDirection: direction,
-              layoutName: `${layoutName}_after-${depth}`,
-              parentLayoutName: layoutName,
-              containerName: cName,
-              depth: depth + 1,
-              rootRef,
-              screenKey: screenKey2,
-              initialCenterComponents: [
-                {
-                  navigationTitle,
-                  component,
-                  containerName: cName,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }
-              ],
-              rootName
-            }
-          )
-        )
-      )) : /* @__PURE__ */ React.createElement("div", null)
-    ),
-    boundaryContainerSize && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
-        style: { ...boundaryContainerSize }
-      },
-      "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
-    )
-  ));
-}
-function clamp(n, min, max) {
-  return Math.max(min, Math.min(max, n));
-}
-function pickDefaultScrollRoot() {
-  if (typeof document === "undefined") return null;
-  let el = document.body;
-  while (el && el !== document.documentElement && el !== document.body) {
-    const style = getComputedStyle(el);
-    const oy = style.overflowY;
-    const ox = style.overflowX;
-    const scrollable = oy === "auto" || oy === "scroll" || ox === "auto" || ox === "scroll";
-    if (scrollable) return el;
-    el = el.parentElement;
-  }
-  return null;
-}
-function isVerticalScroll(root) {
-  if (typeof window == "undefined") return true;
-  if (!root) {
-    return document.documentElement.scrollHeight > window.innerHeight + 1;
-  }
-  const el = root;
-  return el.scrollHeight > el.clientHeight + 1;
-}
-var dpr = typeof window != "undefined" ? window.devicePixelRatio || 1 : 1;
-function quantizeToDevicePixel(n) {
-  return Math.round(n * dpr) / dpr;
-}
-var FlexLayoutStickyBox = ({
-  edge = "auto",
-  offset = 16,
-  scrollRoot = null,
-  debug = false,
-  children,
-  style,
-  className,
-  onTranslateChange = () => {
-  },
-  ...rest
-}) => {
-  const offsetRef = useRef(offset);
-  const rootRef = useRef(null);
-  const contentRef = useRef(null);
-  const mutatingRef = useRef(false);
-  const lastOffsetRef = useRef(0);
-  const [resolvedEdge, setResolvedEdge] = useState("top");
-  const rafId = useRef(null);
-  const [contentDynamicStyle, setContentDynamicStyle] = useState({});
-  useEffect(() => {
-    setContentDynamicStyle({
-      willChange: "transform",
-      transition: "transform 50ms linear"
-    });
-  }, []);
-  useEffect(() => {
-    offsetRef.current = offset;
-    scheduleUpdate();
-  }, [offset]);
-  const [ioRoot, setIoRoot] = useState(null);
-  useEffect(() => {
-    const root = scrollRoot ?? pickDefaultScrollRoot();
-    setResolvedEdge(
-      edge === "auto" ? isVerticalScroll(root) ? "top" : "left" : edge
-    );
-    setIoRoot(root);
-  }, [edge, scrollRoot]);
-  useEffect(() => {
-    if (edge !== "auto") {
-      setResolvedEdge(edge);
-      return;
-    }
-    const vertical = isVerticalScroll(ioRoot);
-    setResolvedEdge(vertical ? "top" : "left");
-  }, [edge, ioRoot]);
-  useEffect(() => {
-  }, []);
-  const scheduleUpdate = () => {
-    if (rafId.current != null) return;
-    rafId.current = requestAnimationFrame(() => {
-      rafId.current = null;
-      doUpdate();
-    });
-  };
-  const doUpdate = () => {
-    if (mutatingRef.current) return;
-    mutatingRef.current = true;
-    const rootEl = rootRef.current;
-    const contentEl = contentRef.current;
-    if (!rootEl || !contentEl) {
-      mutatingRef.current = false;
-      return;
-    }
-    const parentEl = rootEl.parentElement;
-    if (!parentEl) {
-      mutatingRef.current = false;
-      return;
-    }
-    const rootBounds = ioRoot && "getBoundingClientRect" in ioRoot ? ioRoot.getBoundingClientRect() : new DOMRect(0, 0, window.innerWidth, window.innerHeight);
-    const parentRect = parentEl.getBoundingClientRect();
-    const contentRect = contentEl.getBoundingClientRect();
-    let newOffset = 0;
-    if (resolvedEdge === "top" || resolvedEdge === "bottom") {
-      const maxTranslate = Math.max(
-        0,
-        parentRect.height - contentRect.height
-      );
-      let desiredTop = 0;
-      if (resolvedEdge === "top") {
-        desiredTop = rootBounds.top + offsetRef.current - parentRect.top;
-      } else {
-        const targetBottomFromParentTop = Math.min(
-          parentRect.bottom,
-          rootBounds.bottom - offsetRef.current
-        ) - parentRect.top;
-        desiredTop = targetBottomFromParentTop - contentRect.height;
-      }
-      newOffset = clamp(desiredTop, 0, maxTranslate);
-    } else {
-      const maxTranslate = Math.max(
-        0,
-        parentRect.width - contentRect.width
-      );
-      let desiredLeft = 0;
-      if (resolvedEdge === "left") {
-        desiredLeft = rootBounds.left + offsetRef.current - parentRect.left;
-      } else {
-        const targetRightFromParentLeft = Math.min(
-          parentRect.right,
-          rootBounds.right - offsetRef.current
-        ) - parentRect.left;
-        desiredLeft = targetRightFromParentLeft - contentRect.width;
-      }
-      newOffset = clamp(desiredLeft, 0, maxTranslate);
-    }
-    const nextOffset = quantizeToDevicePixel(newOffset);
-    if (Math.abs(lastOffsetRef.current - nextOffset) > 0.5) {
-      if (resolvedEdge === "top" || resolvedEdge === "bottom") {
-        contentEl.style.transform = `translateY(${nextOffset}px)`;
-      } else {
-        contentEl.style.transform = `translateX(${nextOffset}px)`;
-      }
-      lastOffsetRef.current = nextOffset;
-      onTranslateChange(nextOffset, rootRef, contentRef);
-    }
-    if (debug) {
-      rootEl.style.outline = "1px dashed rgba(0,0,0,.2)";
-      contentEl.style.outline = "1px solid rgba(0,128,255,.35)";
-    }
-    queueMicrotask(() => {
-      mutatingRef.current = false;
-    });
-  };
-  useEffect(() => {
-    if (typeof window == "undefined") return;
-    const rootEl = rootRef.current;
-    if (!rootEl) return;
-    const parentEl = rootEl.parentElement;
-    console.log(parentEl);
-    if (!parentEl) return;
-    const targets = [parentEl];
-    const observerCallback = () => {
-      if (!mutatingRef.current) scheduleUpdate();
-    };
-    const io = new IntersectionObserver(observerCallback, {
-      root: ioRoot instanceof Element ? ioRoot : null,
-      threshold: 0,
-      rootMargin: "1px"
-    });
-    const ro = new ResizeObserver(observerCallback);
-    targets.forEach((t) => io.observe(t));
-    ro.observe(parentEl);
-    if (contentRef.current) {
-      ro.observe(contentRef.current);
-    }
-    const scrollTarget = ioRoot || window;
-    scrollTarget.addEventListener("scroll", scheduleUpdate, {
-      passive: true
-    });
-    window.addEventListener("resize", scheduleUpdate);
-    scheduleUpdate();
-    return () => {
-      io.disconnect();
-      ro.disconnect();
-      scrollTarget.removeEventListener("scroll", scheduleUpdate);
-      window.removeEventListener("resize", scheduleUpdate);
-      if (rafId.current != null) {
-        cancelAnimationFrame(rafId.current);
-        rafId.current = null;
-      }
-    };
-  }, [ioRoot, resolvedEdge, offset, debug]);
-  return /* @__PURE__ */ React2.createElement(
-    "div",
-    {
-      ref: rootRef,
-      className,
-      style: {
-        display: "block",
-        minWidth: 0,
-        minHeight: 0,
-        height: "100%",
-        // 부모 높이를 채우도록 설정
-        ...style
-      },
-      ...rest
-    },
-    /* @__PURE__ */ React2.createElement(
-      "div",
-      {
-        ref: contentRef,
-        style: contentDynamicStyle
-      },
-      children
-    )
-  );
-};
-var FlexLayoutStickyBox_default = FlexLayoutStickyBox;
-
-export { FlexLayout, FlexLayoutContainer, FlexLayoutResizePanel, FlexLayoutSplitScreen, FlexLayoutSplitScreenDragBox, FlexLayoutSplitScreenScrollBox_default as FlexLayoutSplitScreenScrollBox, FlexLayoutStickyBox_default as FlexLayoutStickyBox };
-//# sourceMappingURL=components.js.map
-//# sourceMappingURL=components.js.map