@byeolnaerim/flex-layout 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -4,12 +4,13 @@ var react = require('react');
 var equal = require('fast-deep-equal');
 var rxjs = require('rxjs');
 var operators = require('rxjs/operators');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var equal__default = /*#__PURE__*/_interopDefault(equal);
 
-// src/flex-layout/providers/FlexLayoutHooks.tsx
+// src/flex-layout/components/FlexLayout.tsx
 function updateScrollStore(subject, newValue) {
   const currentValue = subject.getValue();
   if (!equal__default.default(currentValue, newValue)) {
@@ -606,6 +607,451 @@ var useDoubleClick = (containerName, opt) => {
   }, [containerName]);
   return { isOpen, isDoubleClick, setIsDoubleClick };
 };
+
+// src/flex-layout/styles/FlexLayout.module.css
+var FlexLayout_default = {};
+var FlexLayoutContext = react.createContext(null);
+function useFlexLayoutContext() {
+  const context = react.useContext(FlexLayoutContext);
+  if (!context) {
+    throw new Error(
+      "useFlexLayoutContext must be used within FlexLayoutContext.Provider"
+    );
+  }
+  return context;
+}
+function FlexLayoutProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FlexLayoutContext.Provider, { value, children });
+}
+var FlexLayout = ({
+  layoutName,
+  direction,
+  children,
+  ref,
+  className,
+  panelClassName,
+  panelMovementMode = "divorce",
+  ...props
+}) => {
+  const containerCount = react.Children.count(children);
+  const fitContent = direction === "row" ? "width" : "height";
+  const isFragmentElement = (node) => react.isValidElement(node) && node.type === react.Fragment;
+  const nodes = react.Children.toArray(children).flatMap(
+    (node) => isFragmentElement(node) ? react.Children.toArray(node.props.children) : [node]
+  );
+  const flattenedChildren = nodes.filter(
+    react.isValidElement
+  );
+  if (flattenedChildren.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    FlexLayoutProvider,
+    {
+      value: {
+        layoutName,
+        direction,
+        panelMovementMode,
+        panelClassName,
+        containerCount,
+        fitContent
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `${FlexLayout_default["flex-layout"]} ${className && className !== "" ? className : ""}`,
+          ...ref ? { ref } : {},
+          ...props,
+          "data-layout_name": layoutName,
+          "data-direction": direction,
+          children: flattenedChildren.map((child, index) => {
+            if (!child || !react.isValidElement(child)) return null;
+            return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+              child,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ContainerOpenCloseProvider,
+                {
+                  layoutName,
+                  containerName: child.props.containerName,
+                  sizeName: fitContent
+                }
+              )
+            ] }, index);
+          })
+        }
+      )
+    }
+  ) });
+};
+var FlexLayout_default2 = FlexLayout;
+var useSize = (sizeName) => {
+  const ref = react.useRef(null);
+  const [size, setSize] = react.useState(void 0);
+  react.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"
+  }
+};
+var FlexLayoutResizePanel = ({
+  direction,
+  containerCount,
+  panelMode = "default",
+  containerName,
+  layoutName,
+  panelClassName,
+  panelMovementMode
+}) => {
+  let isResizePanelClickRef = react.useRef(false);
+  let prevTouchEvent = null;
+  let parentSizeRef = react.useRef(0);
+  let totalMovementRef = react.useRef(0);
+  const containerCountRef = react.useRef(containerCount);
+  react.useEffect(() => {
+    return () => {
+      document.body.style.cursor = "";
+    };
+  }, []);
+  react.useEffect(() => {
+    containerCountRef.current = containerCount;
+  }, [containerCount]);
+  const panelRef = react.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;
+    targetElement.style.flex = `${targetFlexGrow} 1 0%`;
+    nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
+  }
+  react.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);
+      });
+    };
+  }, []);
+  react.useEffect(() => {
+    if (!panelRef.current) return;
+    setResizePanelRef(layoutName, containerName, panelRef);
+  }, [containerName, layoutName]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id: containerName + "_resize_panel",
+      className: `${FlexLayout_default["flex-resize-panel"]} ${FlexLayout_default[panelMode]} ${panelClassName && panelClassName !== "" ? panelClassName : ""}`,
+      ref: panelRef,
+      onMouseDown: panelMouseDownEvent,
+      onTouchStart: panelMouseDownEvent,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: FlexLayout_default.hover })
+    }
+  );
+};
+var FlexLayoutResizePanel_default = FlexLayoutResizePanel;
+var 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 = react.useRef(null);
+  const flexContainerRef = react.useCallback(
+    (node) => {
+      flexContainerNodeRef.current = node;
+      if (node !== null) {
+        setContainerRef(layoutName, containerName, { current: node });
+      }
+    },
+    [layoutName, containerName]
+  );
+  const [growState, setGrowState] = react.useState(initialGrow);
+  react.useEffect(() => {
+    setGrowState(initialGrow);
+  }, [initialGrow]);
+  const [prevGrowState, setPrevGrowState] = react.useState(
+    initialPrevGrow
+  );
+  const [isFirstLoad, setIsFirstLoad] = react.useState(true);
+  react.useEffect(() => {
+    if (!flexContainerNodeRef.current) return;
+    setContainerRef(layoutName, containerName, flexContainerNodeRef);
+    return () => {
+      setContainerRef(layoutName, containerName, {
+        current: null
+      });
+    };
+  }, [containerName, layoutName]);
+  react.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]);
+  react.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]);
+  react.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]);
+  react.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "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%`
+        } || {},
+        children: isFitContent && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${FlexLayout_default["flex-content-fit-wrapper"]}`,
+            ref,
+            children
+          }
+        ) || children
+      }
+    ),
+    isResizePanel && /* @__PURE__ */ jsxRuntime.jsx(
+      FlexLayoutResizePanel_default,
+      {
+        containerName,
+        layoutName,
+        direction,
+        containerCount,
+        panelMode,
+        panelClassName,
+        panelMovementMode
+      }
+    )
+  ] });
+};
+var FlexLayoutContainer_default = FlexLayoutContainer;
 var dragState = new rxjs.Subject();
 var filterChildren = (obj) => {
   const { children, ...rest } = obj || {};
@@ -816,8 +1262,2158 @@ var useFolderEvent = () => {
   }, []);
   return { folderEvent };
 };
+function useFlexLayoutSplitScreen({
+  isSplitInitial = false,
+  parentDirection,
+  directionInitial = "row",
+  selfContainerName,
+  parentLayoutName,
+  layoutName
+}) {
+  const [direction, setDirection] = react.useState(
+    directionInitial
+  );
+  const [isSplit, setIsSplit] = react.useState(isSplitInitial);
+  const [boundaryContainerSize, setBoundaryContainerSize] = react.useState(null);
+  const [centerDropTargetComponent, setCenterDropTargetComponent] = react.useState([]);
+  const [afterDropTargetComponent, setAfterDropTargetComponent] = react.useState([]);
+  const [beforeDropTargetComponent, setBeforeDropTargetComponent] = react.useState([]);
+  const layoutRef = react.useRef(null);
+  const dragState2 = useDragCapture(layoutRef);
+  react.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 = react.useRef(null);
+  const velocity = react.useRef({ vx: 0, vy: 0 });
+  const ref = react.useRef(null);
+  const clonedNodeRef = react.useRef(null);
+  const clonedWidth = react.useRef(null);
+  const clonedHeight = react.useRef(null);
+  const hrefUrlRef = react.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 = () => {
+          scrollTargetRef?.current?.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
+        });
+      }
+    });
+  };
+  react.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"]
+      );
+    }
+  }, []);
+  react.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
+  ]);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onCtx = (e) => e.preventDefault();
+    el.addEventListener("contextmenu", onCtx);
+    return () => {
+      el.removeEventListener("contextmenu", onCtx);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "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 = {};
+var FlexLayoutSplitScreenScrollBox = ({
+  className,
+  children,
+  keyName,
+  direction,
+  isDefaultScrollStyle = false,
+  ...props
+}) => {
+  const scrollRef = react.useRef(null);
+  const [isMouseDown, setIsMouseDown] = react.useState(false);
+  const scrollEventSubject = react.useRef(new rxjs.Subject());
+  react.useEffect(() => {
+    const mouseUpSubscribe = rxjs.fromEvent(
+      window,
+      "mouseup"
+    ).subscribe(() => {
+      setIsMouseDown(false);
+    });
+    const scrollEventSubscribe = scrollEventSubject.current.pipe(operators.throttleTime(70)).subscribe((position) => {
+      setScrollPosition(keyName, position);
+    });
+    const scrollSubscribe = getScrollPosition(keyName).pipe(operators.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]);
+  react.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__ */ jsxRuntime.jsx(
+    "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 = react.memo(FlexLayoutSplitScreenScrollBox);
+function FlexLayoutSplitScreenDragBoxContainer({
+  className,
+  children,
+  layoutName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    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
+}) {
+  react.useEffect(() => {
+    allSplitScreenCount.next(allSplitScreenCount.value + 1);
+    return () => {
+      if (allSplitScreenCount.value <= 1) return;
+      allSplitScreenCount.next(allSplitScreenCount.value - 1);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${FlexLayout_default["flex-split-screen-drag-box-title-item"]} ${isActive ? FlexLayout_default["active"] : ""}`,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: (ev) => onClose(ev), children: "X" })
+      ]
+    }
+  );
+}
+function FlexLayoutSplitScreenDragBoxTitleMore({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...props,
+      className: `${FlexLayout_default["flex-split-screen-drag-box-title-more"]} ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "." })
+      ]
+    }
+  );
+}
+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: react.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
+  });
+  react.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]);
+  react.useEffect(() => {
+    const subscribe = dropMovementEventSubject.pipe(
+      rxjs.distinctUntilChanged((prev, curr) => {
+        const filterChildren2 = (obj) => {
+          const {
+            children: children2,
+            component,
+            targetComponent,
+            x,
+            y,
+            ...rest
+          } = obj || {};
+          return rest;
+        };
+        return equal__default.default(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__ */ jsxRuntime.jsxs("div", { className: `${FlexLayout_default["flex-split-screen"]}`, ref: layoutRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      FlexLayout_default2,
+      {
+        direction,
+        layoutName,
+        "data-is_split": isSplit,
+        panelMovementMode: "bulldozer",
+        children: [
+          beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: beforeDropTargetComponent.map(
+            ({
+              containerName: cName,
+              component,
+              navigationTitle: navigationTitle2,
+              dropDocumentOutsideOption: dropDocumentOutsideOption2,
+              screenKey: screenKey2
+            }, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              FlexLayoutContainer_default,
+              {
+                containerName: cName,
+                isInitialResizable: true,
+                isResizePanel: true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  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
+                  }
+                )
+              },
+              cName
+            )
+          ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+          centerDropTargetComponent.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", {}) : /* @__PURE__ */ jsxRuntime.jsx(
+            FlexLayoutContainer_default,
+            {
+              containerName: `${centerDropTargetComponent[0].containerName}`,
+              isInitialResizable: true,
+              isResizePanel: isSplit,
+              children: isSplit ? /* @__PURE__ */ jsxRuntime.jsx(
+                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__ */ jsxRuntime.jsx(
+                FlexLayoutSplitScreenScrollBox_default,
+                {
+                  keyName: centerDropTargetComponent[0].containerName,
+                  isDefaultScrollStyle: true,
+                  children: centerDropTargetComponent[0].component
+                }
+              )
+            }
+          ),
+          afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: afterDropTargetComponent.map(
+            ({
+              containerName: cName,
+              component,
+              navigationTitle: navigationTitle2,
+              dropDocumentOutsideOption: dropDocumentOutsideOption2,
+              screenKey: screenKey2
+            }, i) => /* @__PURE__ */ jsxRuntime.jsx(
+              FlexLayoutContainer_default,
+              {
+                containerName: cName,
+                isInitialResizable: true,
+                isResizePanel: afterDropTargetComponent.length - 1 !== i,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  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
+                  }
+                )
+              },
+              cName
+            )
+          ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
+        ]
+      }
+    ),
+    boundaryContainerSize && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
+        style: { ...boundaryContainerSize },
+        children: "\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] = react.useState(false);
+  const [activeIndex, setActiveIndex] = react.useState(0);
+  const centerDropTargetComponentRef = react.useRef(centerDropTargetComponent);
+  const activeIndexRef = react.useRef(activeIndex);
+  react.useEffect(() => {
+    const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).pipe(rxjs.take(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]);
+  react.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]);
+  react.useEffect(() => {
+    const subscribe = dropMovementEventSubject.pipe(
+      rxjs.distinctUntilChanged((prev, curr) => {
+        const filterChildren2 = (obj) => {
+          const {
+            children,
+            component,
+            targetComponent,
+            x,
+            y,
+            ...rest
+          } = obj || {};
+          return rest;
+        };
+        return equal__default.default(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
+  ]);
+  react.useEffect(() => {
+    centerDropTargetComponentRef.current = centerDropTargetComponent;
+  }, [centerDropTargetComponent]);
+  react.useEffect(() => {
+    activeIndexRef.current = activeIndex;
+  }, [activeIndex]);
+  const [isOnlyOneScreen, setIsOnlyOneScreen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isEmptyContent && /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${FlexLayout_default["flex-split-screen"]}`,
+      ref: layoutRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          FlexLayout_default2,
+          {
+            direction,
+            layoutName: `${layoutName}`,
+            panelMovementMode: "bulldozer",
+            children: [
+              beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: beforeDropTargetComponent.map(
+                ({
+                  containerName: cName,
+                  component,
+                  navigationTitle,
+                  dropDocumentOutsideOption,
+                  screenKey: screenKey2
+                }, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  FlexLayoutContainer_default,
+                  {
+                    containerName: cName,
+                    isInitialResizable: true,
+                    isResizePanel: true,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      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
+                      }
+                    )
+                  },
+                  cName
+                )
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+              centerDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                FlexLayoutContainer_default,
+                {
+                  containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
+                  isInitialResizable: true,
+                  isResizePanel: isSplit,
+                  children: isSplit ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-key": screenKey, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    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__ */ jsxRuntime.jsxs(
+                    FlexLayoutSplitScreenScrollBox_default,
+                    {
+                      keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
+                      isDefaultScrollStyle: true,
+                      children: [
+                        !isOnlyOneScreen && /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,
+                            children: /* @__PURE__ */ jsxRuntime.jsxs(
+                              "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"]}`,
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    FlexLayoutSplitScreenDragBoxContainer,
+                                    {
+                                      "data-layout_name": layoutName,
+                                      layoutName,
+                                      children: centerDropTargetComponent.map(
+                                        (item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                                          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;
+                                                  }
+                                                );
+                                              }
+                                            },
+                                            isActive: activeIndex === index,
+                                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                                              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
+                                                        }
+                                                      );
+                                                    }
+                                                  }
+                                                },
+                                                children: item.navigationTitle
+                                              }
+                                            )
+                                          },
+                                          item.navigationTitle + layoutName + item.containerName
+                                        )
+                                      )
+                                    },
+                                    layoutName
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(FlexLayoutSplitScreenDragBoxTitleMore, {})
+                                ]
+                              }
+                            )
+                          }
+                        ),
+                        (() => {
+                          const target = centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0];
+                          return target.component;
+                        })()
+                      ]
+                    }
+                  )
+                },
+                (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+              afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: afterDropTargetComponent.map(
+                ({
+                  containerName: cName,
+                  component,
+                  navigationTitle,
+                  dropDocumentOutsideOption,
+                  screenKey: screenKey2
+                }, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  FlexLayoutContainer_default,
+                  {
+                    containerName: cName,
+                    isInitialResizable: true,
+                    isResizePanel: i !== afterDropTargetComponent.length - 1,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      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
+                      }
+                    )
+                  },
+                  cName
+                )
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
+            ]
+          }
+        ),
+        boundaryContainerSize && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `${FlexLayout_default["flex-split-screen-boundary-container"]}`,
+            style: { ...boundaryContainerSize },
+            children: "\u2B07\uFE0F\uB4DC\uB86D\uD558\uBA74 \uD654\uBA74\uC774 \uBD84\uD560\uB429\uB2C8\uB2E4."
+          }
+        )
+      ]
+    }
+  ) });
+}
+FlexLayoutSplitScreen.displayName = "FlexLayoutSplitScreen";
+var FlexLayoutSplitScreen_default = FlexLayoutSplitScreen;
+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 = react.useRef(offset);
+  const rootRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const mutatingRef = react.useRef(false);
+  const lastOffsetRef = react.useRef(0);
+  const [resolvedEdge, setResolvedEdge] = react.useState("top");
+  const rafId = react.useRef(null);
+  const [contentDynamicStyle, setContentDynamicStyle] = react.useState({});
+  react.useEffect(() => {
+    setContentDynamicStyle({
+      willChange: "transform",
+      transition: "transform 50ms linear"
+    });
+  }, []);
+  react.useEffect(() => {
+    offsetRef.current = offset;
+    scheduleUpdate();
+  }, [offset]);
+  const [ioRoot, setIoRoot] = react.useState(null);
+  react.useEffect(() => {
+    const root = scrollRoot ?? pickDefaultScrollRoot();
+    setResolvedEdge(
+      edge === "auto" ? isVerticalScroll(root) ? "top" : "left" : edge
+    );
+    setIoRoot(root);
+  }, [edge, scrollRoot]);
+  react.useEffect(() => {
+    if (edge !== "auto") {
+      setResolvedEdge(edge);
+      return;
+    }
+    const vertical = isVerticalScroll(ioRoot);
+    setResolvedEdge(vertical ? "top" : "left");
+  }, [edge, ioRoot]);
+  react.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;
+    });
+  };
+  react.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: rootRef,
+      className,
+      style: {
+        display: "block",
+        minWidth: 0,
+        minHeight: 0,
+        height: "100%",
+        // 부모 높이를 채우도록 설정
+        ...style
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: contentRef,
+          style: contentDynamicStyle,
+          children
+        }
+      )
+    }
+  );
+};
+var FlexLayoutStickyBox_default = FlexLayoutStickyBox;
+var useListPagingForSentinel = ({
+  //initPageNumber,
+  //initPageSize,
+  onReachTerminal
+}) => {
+  const [firstChildNode, setFirstChildNode] = react.useState(null);
+  const [lastChildNode, setLastChildNode] = react.useState(null);
+  const observerRef = react.useRef(null);
+  const firstChildRef = react.useCallback((node) => {
+    setFirstChildNode(node);
+  }, []);
+  const lastChildRef = react.useCallback((node) => {
+    setLastChildNode(node);
+  }, []);
+  react.useEffect(() => {
+    if (firstChildNode && observerRef.current)
+      observerRef.current.unobserve(firstChildNode);
+    if (lastChildNode && observerRef.current)
+      observerRef.current.unobserve(lastChildNode);
+    const handleIntersect = (entries, observer2) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (entry.target === firstChildNode) {
+            if (onReachTerminal)
+              onReachTerminal({
+                isFirst: true,
+                isLast: false,
+                observer: observer2
+              });
+          }
+          if (entry.target === lastChildNode) {
+            if (onReachTerminal)
+              onReachTerminal({
+                isFirst: false,
+                isLast: true,
+                observer: observer2
+              });
+          }
+        }
+      });
+    };
+    const observer = new IntersectionObserver(handleIntersect, {
+      threshold: 0.1
+    });
+    observerRef.current = observer;
+    if (firstChildNode) observer.observe(firstChildNode);
+    if (lastChildNode) observer.observe(lastChildNode);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [firstChildNode, lastChildNode]);
+  return {
+    firstChildRef,
+    lastChildRef
+  };
+};
+var usePaginationViewNumber = ({
+  initPageNumber
+}) => {
+  const [showCurrentPageNumber, setShowCurrentPageNumber] = react.useState(initPageNumber);
+  const observerRef = react.useRef(null);
+  const showCurrentPageObserveTarget = react.useCallback(
+    (node) => {
+      if (!node) return;
+      if (!observerRef.current) {
+        observerRef.current = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                const pageIndexAttr = entry.target.getAttribute(
+                  "data-page-index"
+                );
+                if (!pageIndexAttr) return;
+                const pageIndex = parseInt(pageIndexAttr, 10);
+                setShowCurrentPageNumber(pageIndex);
+              }
+            });
+          },
+          {
+            threshold: 0.1
+            // 예: 10% 이상 보여야 intersect로 판단
+          }
+        );
+      }
+      observerRef.current.observe(node);
+    },
+    []
+  );
+  react.useEffect(() => {
+    const currentObserver = observerRef.current;
+    return () => {
+      if (currentObserver) {
+        currentObserver.disconnect();
+      }
+    };
+  }, []);
+  return {
+    showCurrentPageNumber,
+    showCurrentPageObserveTarget
+  };
+};
+var usePagingHandler = ({
+  lastCallPageNumber,
+  dataListRef
+}) => {
+  const jumpingPageNumberRef = react.useRef(lastCallPageNumber);
+  react.useEffect(() => {
+    if (jumpingPageNumberRef.current) {
+      setTimeout(() => {
+        jumpingPageNumberRef.current = null;
+      }, 1e3);
+    }
+  }, [jumpingPageNumberRef]);
+  const paginationScrollIntoViewTarget = react.useRef({});
+  const pageNumberRef = react.useRef(lastCallPageNumber);
+  const setPaginationRef = react.useCallback(
+    (i) => (node) => {
+      if (!node) return;
+      paginationScrollIntoViewTarget.current[i] = node;
+      if (jumpingPageNumberRef.current !== null && i === jumpingPageNumberRef.current) {
+        node.scrollIntoView({
+          behavior: "instant",
+          // 필요한 경우 'smooth' 등으로 수정 가능
+          block: "start"
+        });
+        jumpingPageNumberRef.current = null;
+      }
+    },
+    []
+  );
+  const handleReachTerminal = ({ isFirst, isLast, observer }, dataCallFetch) => {
+    if (dataListRef.current.length === 0) return;
+    if (jumpingPageNumberRef.current != null) return;
+    if (!isFirst && !isLast) return;
+    const callPageNumber = isFirst ? Math.max(pageNumberRef.current - 1, 0) : pageNumberRef.current + 1;
+    if (dataListRef.current[callPageNumber] != null && (dataListRef.current[callPageNumber]?.length || 0) > 0)
+      return;
+    jumpingPageNumberRef.current = callPageNumber;
+    setTimeout(() => {
+      jumpingPageNumberRef.current = null;
+    }, 1e3);
+    dataCallFetch(callPageNumber);
+  };
+  const handleClickPageChange = (page, dataCallFetch) => {
+    const pageData = dataListRef.current[page];
+    if (pageData != null && Array.isArray(pageData) && pageData.length > 0) {
+      paginationScrollIntoViewTarget.current[page]?.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+      return;
+    }
+    jumpingPageNumberRef.current = page;
+    setTimeout(() => {
+      jumpingPageNumberRef.current = null;
+    }, 1e3);
+    dataCallFetch(page);
+  };
+  return {
+    jumpingPageNumberRef,
+    paginationScrollIntoViewTarget,
+    pageNumberRef,
+    setPaginationRef,
+    handleReachTerminal,
+    handleClickPageChange
+  };
+};
 
 exports.ContainerOpenCloseProvider = ContainerOpenCloseProvider;
+exports.FlexLayout = FlexLayout_default2;
+exports.FlexLayoutContainer = FlexLayoutContainer_default;
+exports.FlexLayoutResizePanel = FlexLayoutResizePanel_default;
+exports.FlexLayoutSplitScreen = FlexLayoutSplitScreen_default;
+exports.FlexLayoutSplitScreenDragBox = FlexLayoutSplitScreenDragBox;
+exports.FlexLayoutSplitScreenScrollBox = FlexLayoutSplitScreenScrollBox_default;
+exports.FlexLayoutStickyBox = FlexLayoutStickyBox_default;
 exports.allSplitScreenCount = allSplitScreenCount;
 exports.closeFlex = closeFlex;
 exports.containerOpenCloseSubjectMap = containerOpenCloseSubjectMap;
@@ -861,5 +3457,8 @@ exports.useDragCapture = useDragCapture;
 exports.useDragEvents = useDragEvents;
 exports.useFolderEvent = useFolderEvent;
 exports.useLayoutName = useLayoutName;
+exports.useListPagingForSentinel = useListPagingForSentinel;
+exports.usePaginationViewNumber = usePaginationViewNumber;
+exports.usePagingHandler = usePagingHandler;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map