@byeolnaerim/flex-layout 0.0.4 → 0.0.6

package/dist/chunk-UYI4Z27V.js

@@ -1,2432 +0,0 @@
-import { useDragEvents, dragState, dropMovementEventSubject, useDragCapture, allSplitScreenCount } from './chunk-PMTZFSP4.js';
-import { ContainerOpenCloseProvider } from './chunk-JM3CZ5DU.js';
-import { getGrow, mathGrow, mathWeight, isDocumentOut, findNotCloseFlexContent, isOverMove } from './chunk-W4CNFJTK.js';
-import { setScrollPosition, getScrollPosition, removeScrollPosition, setResizePanelRef, setContainerRef, resetRootSplitScreen, getSplitScreen, setSplitScreen, getCurrentSplitScreenComponents, removeSplitScreenChild } from './chunk-CFQQ6ZDC.js';
-import { createContext, memo, useRef, useState, useEffect, Children, isValidElement, Fragment as Fragment$1, useCallback, useContext, useLayoutEffect, cloneElement } from 'react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Subject, fromEvent, distinctUntilChanged, take as take$1 } from 'rxjs';
-import equal from 'fast-deep-equal';
-import { throttleTime, take } from 'rxjs/operators';
-
-// src/flex-layout/styles/FlexLayout.module.css
-var FlexLayout_default = {};
-var FlexLayoutContext = createContext(null);
-function useFlexLayoutContext() {
-  const context = useContext(FlexLayoutContext);
-  if (!context) {
-    throw new Error(
-      "useFlexLayoutContext must be used within FlexLayoutContext.Provider"
-    );
-  }
-  return context;
-}
-function FlexLayoutProvider({
-  value,
-  children
-}) {
-  return /* @__PURE__ */ jsx(FlexLayoutContext.Provider, { value, children });
-}
-var FlexLayout = ({
-  layoutName,
-  direction,
-  children,
-  ref,
-  className,
-  panelClassName,
-  panelMovementMode = "divorce",
-  ...props
-}) => {
-  const containerCount = Children.count(children);
-  const fitContent = direction === "row" ? "width" : "height";
-  const isFragmentElement = (node) => isValidElement(node) && node.type === Fragment$1;
-  const nodes = Children.toArray(children).flatMap(
-    (node) => isFragmentElement(node) ? Children.toArray(node.props.children) : [node]
-  );
-  const flattenedChildren = nodes.filter(
-    isValidElement
-  );
-  if (flattenedChildren.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-    FlexLayoutProvider,
-    {
-      value: {
-        layoutName,
-        direction,
-        panelMovementMode,
-        panelClassName,
-        containerCount,
-        fitContent
-      },
-      children: /* @__PURE__ */ 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 || !isValidElement(child)) return null;
-            return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              child,
-              /* @__PURE__ */ jsx(
-                ContainerOpenCloseProvider,
-                {
-                  layoutName,
-                  containerName: child.props.containerName,
-                  sizeName: fitContent
-                }
-              )
-            ] }, index);
-          })
-        }
-      )
-    }
-  ) });
-};
-var FlexLayout_default2 = FlexLayout;
-var useSize = (sizeName) => {
-  const ref = useRef(null);
-  const [size, setSize] = useState(void 0);
-  useLayoutEffect(() => {
-    if (!ref.current) return;
-    const handleResize = () => {
-      if (ref.current) {
-        const newSize = ref.current.getBoundingClientRect()[sizeName];
-        setSize(newSize);
-      }
-    };
-    handleResize();
-    const resizeObserver = new ResizeObserver(() => {
-      handleResize();
-    });
-    resizeObserver.observe(ref.current);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [sizeName]);
-  return { ref, size };
-};
-var flexDirectionModel = {
-  row: {
-    xy: "x",
-    targetDirection: "left",
-    nextDirection: "right",
-    sizeName: "width",
-    resizeCursor: "ew-resize"
-  },
-  column: {
-    xy: "y",
-    targetDirection: "top",
-    nextDirection: "bottom",
-    sizeName: "height",
-    resizeCursor: "ns-resize"
-  }
-};
-var FlexLayoutResizePanel = ({
-  direction,
-  containerCount,
-  panelMode = "default",
-  containerName,
-  layoutName,
-  panelClassName,
-  panelMovementMode
-}) => {
-  let isResizePanelClickRef = useRef(false);
-  let prevTouchEvent = null;
-  let parentSizeRef = useRef(0);
-  let totalMovementRef = useRef(0);
-  const containerCountRef = useRef(containerCount);
-  useEffect(() => {
-    return () => {
-      document.body.style.cursor = "";
-    };
-  }, []);
-  useEffect(() => {
-    containerCountRef.current = containerCount;
-  }, [containerCount]);
-  const panelRef = useRef(null);
-  const panelMouseDownEvent = (event) => {
-    if (!panelRef.current || !panelRef.current.parentElement) return;
-    isResizePanelClickRef.current = true;
-    containerCountRef.current = [
-      ...panelRef.current.parentElement.children
-    ].filter((e) => e.hasAttribute("data-container_name")).length;
-    const sizeName = flexDirectionModel[direction].sizeName;
-    parentSizeRef.current = panelRef.current.parentElement.getBoundingClientRect()[sizeName];
-    prevTouchEvent = null;
-    totalMovementRef.current = 0;
-    if (!parentSizeRef.current) return;
-    document.body.style.cursor = flexDirectionModel[direction].resizeCursor;
-  };
-  const panelMouseUpEvent = () => {
-    isResizePanelClickRef.current = false;
-    parentSizeRef.current = 0;
-    prevTouchEvent = null;
-    totalMovementRef.current = 0;
-    document.body.style.cursor = "";
-  };
-  function moveMouseFlex(originTarget, resizePanel, moveEvent) {
-    const model = flexDirectionModel[direction];
-    const movement = moveEvent["movement" + model.xy.toUpperCase()];
-    totalMovementRef.current += movement;
-    const minSizeName = "min-" + model.sizeName;
-    const maxSizeName = "max-" + model.sizeName;
-    let targetElement = findNotCloseFlexContent(
-      originTarget,
-      "previousElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current > 0 || panelMovementMode === "bulldozer" && movement > 0 || !targetElement)
-      targetElement = originTarget;
-    let nextElement = findNotCloseFlexContent(
-      resizePanel.nextElementSibling,
-      "nextElementSibling"
-    );
-    if (panelMovementMode === "divorce" && totalMovementRef.current < 0 || panelMovementMode === "bulldozer" && movement < 0 || !nextElement)
-      nextElement = resizePanel.nextElementSibling;
-    if (!targetElement || !nextElement) return;
-    const targetRect = targetElement.getBoundingClientRect();
-    const targetStyle = window.getComputedStyle(targetElement);
-    const targetMinSize = parseFloat(targetStyle.getPropertyValue(minSizeName)) || 0;
-    const targetMaxSize = parseFloat(targetStyle.getPropertyValue(maxSizeName)) || 0;
-    const nextRect = nextElement.getBoundingClientRect();
-    const nextStyle = window.getComputedStyle(nextElement);
-    const nextMinSize = parseFloat(nextStyle.getPropertyValue(minSizeName)) || 0;
-    const nextMaxSize = parseFloat(nextStyle.getPropertyValue(maxSizeName)) || 0;
-    let targetSize = targetRect[model.sizeName] + movement;
-    let nextElementSize = nextRect[model.sizeName] - movement;
-    if (targetMaxSize > 0 && targetSize > targetMaxSize) {
-      return;
-    }
-    if (nextMaxSize > 0 && nextElementSize > nextMaxSize) {
-      return;
-    }
-    if (isOverMove(targetSize, targetMinSize)) {
-      targetSize = 0;
-      nextElementSize = nextRect[model.sizeName];
-    } else if (isOverMove(nextElementSize, nextMinSize)) {
-      nextElementSize = 0;
-      targetSize = targetRect[model.sizeName];
-    }
-    const targetFlexGrow = targetSize / (parentSizeRef.current - 1) * containerCountRef.current;
-    const nextElementFlexGrow = nextElementSize / (parentSizeRef.current - 1) * containerCountRef.current;
-    targetElement.style.flex = `${targetFlexGrow} 1 0%`;
-    nextElement.style.flex = `${nextElementFlexGrow} 1 0%`;
-  }
-  useEffect(() => {
-    const addGlobalMoveEvent = (event) => {
-      if (!isResizePanelClickRef.current || !panelRef.current) {
-        return;
-      }
-      event.preventDefault();
-      const targetElement = panelRef.current.previousElementSibling;
-      const targetPanel = panelRef.current;
-      if (!targetElement || !targetPanel) return;
-      let move = { movementX: 0, movementY: 0 };
-      if (window.TouchEvent && event instanceof window.TouchEvent) {
-        if (!prevTouchEvent) {
-          prevTouchEvent = event;
-          return;
-        }
-        move.movementX = (prevTouchEvent.touches[0].pageX - event.touches[0].pageX) * -2;
-        move.movementY = (prevTouchEvent.touches[0].pageY - event.touches[0].pageY) * -2;
-        prevTouchEvent = event;
-      } else {
-        move.movementX = event.movementX;
-        move.movementY = event.movementY;
-      }
-      moveMouseFlex(targetElement, targetPanel, move);
-    };
-    ["mousemove", "touchmove"].forEach((eventName) => {
-      window.addEventListener(eventName, addGlobalMoveEvent, {
-        passive: false
-      });
-    });
-    ["mouseup", "touchend"].forEach((eventName) => {
-      window.addEventListener(eventName, panelMouseUpEvent);
-    });
-    return () => {
-      ["mousemove", "touchmove"].forEach((eventName) => {
-        window.removeEventListener(eventName, addGlobalMoveEvent);
-      });
-      ["mouseup", "touchend"].forEach((eventName) => {
-        window.removeEventListener(eventName, panelMouseUpEvent);
-      });
-    };
-  }, []);
-  useEffect(() => {
-    if (!panelRef.current) return;
-    setResizePanelRef(layoutName, containerName, panelRef);
-  }, [containerName, layoutName]);
-  return /* @__PURE__ */ 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__ */ 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 = useRef(null);
-  const flexContainerRef = useCallback(
-    (node) => {
-      flexContainerNodeRef.current = node;
-      if (node !== null) {
-        setContainerRef(layoutName, containerName, { current: node });
-      }
-    },
-    [layoutName, containerName]
-  );
-  const [growState, setGrowState] = useState(initialGrow);
-  useEffect(() => {
-    setGrowState(initialGrow);
-  }, [initialGrow]);
-  const [prevGrowState, setPrevGrowState] = useState(
-    initialPrevGrow
-  );
-  const [isFirstLoad, setIsFirstLoad] = useState(true);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    setContainerRef(layoutName, containerName, flexContainerNodeRef);
-    return () => {
-      setContainerRef(layoutName, containerName, {
-        current: null
-      });
-    };
-  }, [containerName, layoutName]);
-  useEffect(() => {
-    if (typeof window == "undefined" || flexContainerNodeRef.current === null)
-      return;
-    const storedGrow = sessionStorage.getItem(containerName);
-    if (storedGrow !== null) {
-      const parsed = parseFloat(storedGrow);
-      if (!isNaN(parsed)) {
-        flexContainerNodeRef.current.style.flex = `${parsed} 1 0%`;
-        setGrowState(parsed);
-      }
-    }
-  }, [containerName]);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    const targetNode = flexContainerNodeRef.current;
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.type === "attributes" && mutation.attributeName === "style" && targetNode.style.flex) {
-          const flexValue = targetNode.style.flex;
-          const parsedGrow = parseFloat(flexValue.split(" ")[0]);
-          if (!isNaN(parsedGrow)) {
-            setGrowState(parsedGrow);
-          }
-        }
-      }
-    });
-    observer.observe(targetNode, {
-      attributes: true,
-      attributeFilter: ["style"],
-      attributeOldValue: true
-    });
-    return () => {
-      observer.disconnect();
-    };
-  }, [containerName]);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current || !ref || !ref.current || !size || !fitContent)
-      return;
-    requestAnimationFrame(() => {
-      if (!flexContainerNodeRef.current) return;
-      const sizeName = `${fitContent.charAt(0).toUpperCase() + fitContent.substring(1)}`;
-      const parentSize = flexContainerNodeRef.current.parentElement && flexContainerNodeRef.current.parentElement["client" + sizeName] || 0;
-      if (isFitContent) {
-        flexContainerNodeRef.current.style["max" + sizeName] = size + "px";
-      }
-      if (!isFitResize && isFirstLoad) {
-        setIsFirstLoad(false);
-        return;
-      }
-      if (getGrow(flexContainerNodeRef.current) != 0 && isFitResize) {
-        const newGrow = mathGrow(size, parentSize, containerCount);
-        setPrevGrowState(growState);
-        setGrowState(newGrow);
-      }
-    });
-  }, [size, containerCount, isFitResize, children]);
-  useEffect(() => {
-    if (!flexContainerNodeRef.current) return;
-    let notGrowList = [];
-    let containerList = [
-      ...flexContainerNodeRef.current.parentElement?.children || []
-    ].filter((e) => e.hasAttribute("data-container_name"));
-    let remainingGrow = containerList.reduce((t, e, i) => {
-      let item = e;
-      if (item.classList.contains(FlexLayout_default["flex-resize-panel"])) return t;
-      if (e.hasAttribute("data-grow") == false || e.getAttribute("data-is_resize") === "true") {
-        notGrowList.push(item);
-        return t;
-      }
-      let grow = parseFloat(item.dataset.grow || "");
-      item.style.flex = `${grow} 1 0%`;
-      t -= grow;
-      return t;
-    }, containerList.length);
-    if (notGrowList.length != 0) {
-      let resizeWeight = mathWeight(notGrowList.length, remainingGrow);
-      notGrowList.forEach((e) => {
-        e.dataset.grow = resizeWeight.toString();
-        e.style.flex = `${resizeWeight} 1 0%`;
-      });
-    }
-  }, []);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ 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__ */ jsx(
-          "div",
-          {
-            className: `${FlexLayout_default["flex-content-fit-wrapper"]}`,
-            ref,
-            children
-          }
-        ) || children
-      }
-    ),
-    isResizePanel && /* @__PURE__ */ jsx(
-      FlexLayoutResizePanel_default,
-      {
-        containerName,
-        layoutName,
-        direction,
-        containerCount,
-        panelMode,
-        panelClassName,
-        panelMovementMode
-      }
-    )
-  ] });
-};
-var FlexLayoutContainer_default = FlexLayoutContainer;
-function useFlexLayoutSplitScreen({
-  isSplitInitial = false,
-  parentDirection,
-  directionInitial = "row",
-  selfContainerName,
-  parentLayoutName,
-  layoutName
-}) {
-  const [direction, setDirection] = useState(
-    directionInitial
-  );
-  const [isSplit, setIsSplit] = useState(isSplitInitial);
-  const [boundaryContainerSize, setBoundaryContainerSize] = useState(null);
-  const [centerDropTargetComponent, setCenterDropTargetComponent] = useState([]);
-  const [afterDropTargetComponent, setAfterDropTargetComponent] = useState([]);
-  const [beforeDropTargetComponent, setBeforeDropTargetComponent] = useState([]);
-  const layoutRef = useRef(null);
-  const dragState2 = useDragCapture(layoutRef);
-  useEffect(() => {
-    if (!dragState2) {
-      setBoundaryContainerSize(null);
-      return;
-    }
-    const {
-      isDrop,
-      isDragging,
-      positionName,
-      containerName,
-      children: dropComponent,
-      isOver,
-      navigationTitle,
-      dropEndCallback,
-      x,
-      y,
-      screenKey
-    } = dragState2;
-    const orderName = positionName === "leftBoundary" || positionName === "topBoundary" ? "before" : positionName === "rightBoundary" || positionName === "bottomBoundary" ? "after" : "center";
-    if ((isOver || isDrop) && boundaryContainerSize) {
-      setBoundaryContainerSize(null);
-    }
-    if (selfContainerName.startsWith(containerName)) {
-      return;
-    }
-    if (isDrop && screenKey) {
-      const dropDirection = positionName === "leftBoundary" || positionName === "rightBoundary" ? "row" : "column";
-      if (!isSplit && !isOver) {
-        if (positionName !== "centerBoundary" && dropDirection !== parentDirection) {
-          setIsSplit(true);
-          setDirection(dropDirection);
-        }
-        dropMovementEventSubject.next({
-          state: "append",
-          targetContainerName: containerName,
-          targetParentLayoutName: parentLayoutName,
-          targetLayoutName: layoutName,
-          targetComponent: dropComponent,
-          orderName,
-          x,
-          y,
-          dropEndCallback,
-          dropTargetComponentEvent: {
-            navigationTitle,
-            dropDocumentOutsideOption: dragState2?.dropDocumentOutsideOption,
-            direction: dropDirection,
-            screenKey
-          }
-        });
-      }
-    }
-    if (isDragging && !isSplit && !isOver) {
-      const newSize = {
-        left: positionName === "rightBoundary" ? "50%" : "0",
-        top: positionName === "bottomBoundary" ? "50%" : "0",
-        width: positionName === "leftBoundary" || positionName === "rightBoundary" ? "50%" : "100%",
-        height: positionName === "topBoundary" || positionName === "bottomBoundary" ? "50%" : "100%"
-      };
-      if (JSON.stringify(boundaryContainerSize) !== JSON.stringify(newSize)) {
-        setBoundaryContainerSize(newSize);
-      }
-    }
-  }, [
-    dragState2,
-    isSplit,
-    boundaryContainerSize,
-    parentLayoutName,
-    layoutName,
-    selfContainerName,
-    direction
-  ]);
-  return {
-    direction,
-    setDirection,
-    isSplit,
-    setIsSplit,
-    boundaryContainerSize,
-    //setBoundaryContainerSize,
-    centerDropTargetComponent,
-    afterDropTargetComponent,
-    beforeDropTargetComponent,
-    setAfterDropTargetComponent,
-    setBeforeDropTargetComponent,
-    setCenterDropTargetComponent,
-    //dropTargetComponent,
-    //setDropTargetComponent,
-    //setDropPosition,
-    isOver: dragState2?.isOver,
-    layoutRef
-  };
-}
-var MAX_STEP = 18;
-function edgeVelocity(x, y) {
-  const w = window.innerWidth, h = window.innerHeight;
-  const mx = w * 0.15, my = h * 0.15;
-  let vx = 0;
-  if (x < mx)
-    vx = -((mx - x) / mx) * MAX_STEP;
-  else if (x > w - mx)
-    vx = (x - (w - mx)) / mx * MAX_STEP;
-  let vy = 0;
-  if (y < my)
-    vy = -((my - y) / my) * MAX_STEP;
-  else if (y > h - my)
-    vy = (y - (h - my)) / my * MAX_STEP;
-  return { vx, vy };
-}
-function FlexLayoutSplitScreenDragBox({
-  onMouseDown,
-  onTouchStart,
-  dropEndCallback,
-  style,
-  navigationTitle,
-  targetComponent,
-  containerName,
-  children,
-  className,
-  dropDocumentOutsideOption,
-  screenKey = Array.from(
-    window.crypto.getRandomValues(new Uint32Array(16)),
-    (e) => e.toString(32).padStart(2, "0")
-  ).join(""),
-  isBlockingActiveInput = false,
-  customData = {},
-  scrollTargetRef,
-  ...props
-}) {
-  const scrollRAF = useRef(null);
-  const velocity = useRef({ vx: 0, vy: 0 });
-  const ref = useRef(null);
-  const clonedNodeRef = useRef(null);
-  const clonedWidth = useRef(null);
-  const clonedHeight = useRef(null);
-  const hrefUrlRef = useRef("");
-  const { handleStart, handleMove, handleEnd } = useDragEvents({
-    isBlockingActiveInput
-  });
-  const handleMoveWrapper = (event) => {
-    let x = 0;
-    let y = 0;
-    if (event.type === "touchmove") {
-      const t = event.touches[0];
-      x = t.clientX;
-      y = t.clientY;
-    } else {
-      const m = event;
-      x = m.clientX;
-      y = m.clientY;
-    }
-    const { vx, vy } = edgeVelocity(x, y);
-    const inEdge = vx !== 0 || vy !== 0;
-    if (clonedNodeRef.current?.isConnected && !inEdge) {
-      event.preventDefault();
-      if (scrollRAF.current) {
-        cancelAnimationFrame(scrollRAF.current);
-        scrollRAF.current = null;
-      }
-    }
-    if (clonedNodeRef.current?.isConnected && inEdge) {
-      event.preventDefault();
-      velocity.current = { vx, vy };
-      if (!scrollRAF.current) {
-        const step = () => {
-          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
-        });
-      }
-    });
-  };
-  useEffect(() => {
-    if (ref.current) {
-      const clone = ref.current.cloneNode(true);
-      const originRect = ref.current.getBoundingClientRect();
-      clone.style.width = originRect.width + "px";
-      clone.style.height = originRect.height + "px";
-      clone.style.opacity = "0.3";
-      clone.style.backdropFilter = "blur(6px)";
-      clonedWidth.current = originRect.width;
-      clonedHeight.current = originRect.height;
-      if (dropDocumentOutsideOption?.openUrl) {
-        hrefUrlRef.current = dropDocumentOutsideOption.openUrl;
-        const href = document.createElement("span");
-        href.textContent = hrefUrlRef.current;
-        clone.prepend(href);
-      }
-      if (navigationTitle) {
-        const title = document.createElement("span");
-        title.textContent = navigationTitle;
-        clone.prepend(title);
-      }
-      clone.style.position = "fixed";
-      clonedNodeRef.current = clone;
-      clonedNodeRef.current.classList.add(
-        FlexLayout_default["flex-split-screen-drag-box-clone"]
-      );
-    }
-  }, []);
-  useEffect(() => {
-    const moveEvents = [
-      "mousemove",
-      "touchmove"
-    ];
-    const endEvents = ["mouseup", "touchend"];
-    moveEvents.forEach((eventName) => {
-      window.addEventListener(eventName, handleMoveWrapper, {
-        passive: false
-      });
-    });
-    endEvents.forEach((eventName) => {
-      window.addEventListener(eventName, handleEndWrapper);
-    });
-    return () => {
-      moveEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, handleMoveWrapper);
-      });
-      endEvents.forEach((eventName) => {
-        window.removeEventListener(eventName, handleEndWrapper);
-      });
-    };
-  }, [
-    customData,
-    targetComponent,
-    dropDocumentOutsideOption,
-    screenKey,
-    isBlockingActiveInput,
-    containerName,
-    navigationTitle,
-    dropEndCallback
-  ]);
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const onCtx = (e) => e.preventDefault();
-    el.addEventListener("contextmenu", onCtx);
-    return () => {
-      el.removeEventListener("contextmenu", onCtx);
-    };
-  }, []);
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ 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 = useRef(null);
-  const [isMouseDown, setIsMouseDown] = useState(false);
-  const scrollEventSubject = useRef(new Subject());
-  useEffect(() => {
-    const mouseUpSubscribe = fromEvent(
-      window,
-      "mouseup"
-    ).subscribe(() => {
-      setIsMouseDown(false);
-    });
-    const scrollEventSubscribe = scrollEventSubject.current.pipe(throttleTime(70)).subscribe((position) => {
-      setScrollPosition(keyName, position);
-    });
-    const scrollSubscribe = getScrollPosition(keyName).pipe(take(1)).subscribe((position) => {
-      if (scrollRef.current && position) {
-        scrollRef.current.scrollLeft = position.x;
-        scrollRef.current.scrollTop = position.y;
-      }
-    });
-    return () => {
-      removeScrollPosition(keyName);
-      mouseUpSubscribe.unsubscribe();
-      scrollSubscribe.unsubscribe();
-      scrollEventSubscribe.unsubscribe();
-    };
-  }, [keyName]);
-  useEffect(() => {
-    if (!scrollRef.current) return;
-    let animationFrameId = null;
-    const handleWheel = (event) => {
-      if (!scrollRef.current || direction !== "x") return;
-      if (scrollRef.current.matches(":hover")) {
-        event.preventDefault();
-        const { deltaY } = event;
-        const newScrollLeft = scrollRef.current.scrollLeft + deltaY;
-        if (animationFrameId) {
-          cancelAnimationFrame(animationFrameId);
-        }
-        animationFrameId = requestAnimationFrame(() => {
-          scrollRef.current.scrollLeft = newScrollLeft;
-          scrollEventSubject.current.next({
-            x: newScrollLeft,
-            y: scrollRef.current.scrollTop
-          });
-          animationFrameId = null;
-        });
-      }
-    };
-    scrollRef.current.addEventListener("wheel", handleWheel, {
-      passive: false
-    });
-    return () => {
-      scrollRef.current?.removeEventListener("wheel", handleWheel);
-    };
-  }, []);
-  return /* @__PURE__ */ 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 = memo(FlexLayoutSplitScreenScrollBox);
-function FlexLayoutSplitScreenDragBoxContainer({
-  className,
-  children,
-  layoutName,
-  ...props
-}) {
-  return /* @__PURE__ */ 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
-}) {
-  useEffect(() => {
-    allSplitScreenCount.next(allSplitScreenCount.value + 1);
-    return () => {
-      if (allSplitScreenCount.value <= 1) return;
-      allSplitScreenCount.next(allSplitScreenCount.value - 1);
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `${FlexLayout_default["flex-split-screen-drag-box-title-item"]} ${isActive ? FlexLayout_default["active"] : ""}`,
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: (ev) => onClose(ev), children: "X" })
-      ]
-    }
-  );
-}
-function FlexLayoutSplitScreenDragBoxTitleMore({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ...props,
-      className: `${FlexLayout_default["flex-split-screen-drag-box-title-more"]} ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsx("span", { children: "." }),
-        /* @__PURE__ */ jsx("span", { children: "." }),
-        /* @__PURE__ */ 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: cloneElement(
-      dropComponent,
-      { key: screenKey, screenKey }
-    ),
-    navigationTitle,
-    dropDocumentOutsideOption,
-    screenKey: screenKey || Array.from(
-      window.crypto.getRandomValues(new Uint32Array(16)),
-      (e) => e.toString(32).padStart(2, "0")
-    ).join("")
-  };
-  let allComponents;
-  if (nextContainerName) {
-    const index = list.findIndex(
-      (item) => item.containerName === nextContainerName
-    );
-    if (index !== -1) {
-      if (nextContainerNameOrderName === orderName) {
-        if (orderName === "before") {
-          allComponents = [
-            ...list.slice(0, index),
-            newComponent,
-            ...list.slice(index)
-          ];
-        } else {
-          allComponents = [
-            ...list.slice(0, index + 1),
-            newComponent,
-            ...list.slice(index + 1)
-          ];
-        }
-      } else {
-        if (nextContainerNameOrderName === "after" && orderName === "before") {
-          allComponents = [
-            ...list.slice(0, index),
-            newComponent,
-            ...list.slice(index)
-          ];
-        } else if (nextContainerNameOrderName === "before" && orderName === "after") {
-          allComponents = [
-            ...list.slice(0, index + 1),
-            newComponent,
-            ...list.slice(index + 1)
-          ];
-        } else {
-          if (orderName === "before") {
-            allComponents = [
-              ...list.slice(0, index),
-              newComponent,
-              ...list.slice(index)
-            ];
-          } else {
-            allComponents = [
-              ...list.slice(0, index + 1),
-              newComponent,
-              ...list.slice(index + 1)
-            ];
-          }
-        }
-      }
-    } else {
-      if (nextContainerNameOrderName === "center" && orderName === "after") {
-        allComponents = [newComponent, ...list];
-      } else if (nextContainerNameOrderName === "center" && orderName === "before") {
-        allComponents = [...list, newComponent];
-      } else {
-        allComponents = orderName === "before" ? [newComponent, ...list] : [...list, newComponent];
-      }
-    }
-  } else {
-    allComponents = orderName === "before" ? [newComponent, ...list] : [...list, newComponent];
-  }
-  const seen = /* @__PURE__ */ new Set();
-  const result = allComponents.filter((item) => {
-    if (seen.has(item.containerName)) {
-      return false;
-    }
-    seen.add(item.containerName);
-    return true;
-  });
-  dropMovementEventSubject.next({
-    state: "append",
-    targetParentLayoutName: parentLayoutName,
-    targetLayoutName: layoutName,
-    targetContainerName: containerName,
-    orderName
-  });
-  return { [key]: result };
-};
-var handleRemove = (list, targetContainerName, orderNameSetter) => {
-  const result = list.filter((e) => e.containerName !== targetContainerName);
-  if (result.length != list.length)
-    orderNameSetter(list.length - result.length);
-  return result;
-};
-function getAdjacentItem(items, currentIndex) {
-  if (currentIndex + 1 < items.length) {
-    return {
-      adjacentItem: items[currentIndex + 1],
-      adjacentIndex: currentIndex + 1
-    };
-  } else if (currentIndex - 1 >= 0) {
-    return {
-      adjacentItem: items[currentIndex - 1],
-      adjacentIndex: currentIndex - 1
-    };
-  }
-  return { adjacentItem: null, adjacentIndex: currentIndex };
-}
-var getSelfOrderName = (containerName) => {
-  const result = containerName.split("_").at(-1)?.split("-").at(0)?.split("=").at(0);
-  if (["before", "center", "after"].some((e) => e === result)) {
-    return result;
-  } else {
-    return;
-  }
-};
-function FlexLayoutSplitScreen({
-  children,
-  containerName,
-  layoutName,
-  navigationTitle,
-  dropDocumentOutsideOption,
-  screenKey
-}) {
-  const {
-    direction,
-    isSplit,
-    boundaryContainerSize,
-    afterDropTargetComponent,
-    beforeDropTargetComponent,
-    centerDropTargetComponent,
-    setAfterDropTargetComponent,
-    setBeforeDropTargetComponent,
-    setCenterDropTargetComponent,
-    layoutRef,
-    setIsSplit,
-    setDirection
-  } = useFlexLayoutSplitScreen({
-    isSplitInitial: false,
-    directionInitial: "row",
-    selfContainerName: containerName,
-    parentLayoutName: "",
-    layoutName
-  });
-  useEffect(() => {
-    resetRootSplitScreen(layoutName);
-    const subscribe = getSplitScreen(layoutName, layoutName).subscribe((layoutInfo) => {
-      if (layoutInfo) {
-        setBeforeDropTargetComponent([
-          ...layoutInfo.beforeDropTargetComponent
-        ]);
-        setAfterDropTargetComponent([
-          ...layoutInfo.afterDropTargetComponent
-        ]);
-        setCenterDropTargetComponent([
-          ...layoutInfo.centerDropTargetComponent
-        ]);
-        setDirection(layoutInfo.direction);
-        if (layoutInfo.beforeDropTargetComponent.length !== 0 || layoutInfo.afterDropTargetComponent.length !== 0) {
-          setIsSplit(true);
-        }
-      } else {
-        setSplitScreen(layoutName, layoutName, {
-          afterDropTargetComponent: [],
-          beforeDropTargetComponent: [],
-          centerDropTargetComponent: [
-            {
-              containerName,
-              component: children,
-              navigationTitle,
-              dropDocumentOutsideOption,
-              screenKey: screenKey ? screenKey : Array.from(
-                window.crypto.getRandomValues(
-                  new Uint32Array(16)
-                ),
-                (e) => e.toString(32).padStart(2, "0")
-              ).join("")
-            }
-          ],
-          direction
-        });
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-      resetRootSplitScreen(layoutName);
-    };
-  }, [layoutName]);
-  useEffect(() => {
-    const subscribe = dropMovementEventSubject.pipe(
-      distinctUntilChanged((prev, curr) => {
-        const filterChildren = (obj) => {
-          const {
-            children: children2,
-            component,
-            targetComponent,
-            x,
-            y,
-            ...rest
-          } = obj || {};
-          return rest;
-        };
-        return equal(filterChildren(prev), filterChildren(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__ */ jsxs("div", { className: `${FlexLayout_default["flex-split-screen"]}`, ref: layoutRef, children: [
-    /* @__PURE__ */ jsxs(
-      FlexLayout_default2,
-      {
-        direction,
-        layoutName,
-        "data-is_split": isSplit,
-        panelMovementMode: "bulldozer",
-        children: [
-          beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: beforeDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsx(
-              FlexLayoutContainer_default,
-              {
-                containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: true,
-                children: /* @__PURE__ */ 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__ */ jsx("div", {}),
-          centerDropTargetComponent.length === 0 ? /* @__PURE__ */ jsx("div", {}) : /* @__PURE__ */ jsx(
-            FlexLayoutContainer_default,
-            {
-              containerName: `${centerDropTargetComponent[0].containerName}`,
-              isInitialResizable: true,
-              isResizePanel: isSplit,
-              children: isSplit ? /* @__PURE__ */ 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__ */ jsx(
-                FlexLayoutSplitScreenScrollBox_default,
-                {
-                  keyName: centerDropTargetComponent[0].containerName,
-                  isDefaultScrollStyle: true,
-                  children: centerDropTargetComponent[0].component
-                }
-              )
-            }
-          ),
-          afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: afterDropTargetComponent.map(
-            ({
-              containerName: cName,
-              component,
-              navigationTitle: navigationTitle2,
-              dropDocumentOutsideOption: dropDocumentOutsideOption2,
-              screenKey: screenKey2
-            }, i) => /* @__PURE__ */ jsx(
-              FlexLayoutContainer_default,
-              {
-                containerName: cName,
-                isInitialResizable: true,
-                isResizePanel: afterDropTargetComponent.length - 1 !== i,
-                children: /* @__PURE__ */ 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__ */ jsx("div", {})
-        ]
-      }
-    ),
-    boundaryContainerSize && /* @__PURE__ */ 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] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const centerDropTargetComponentRef = useRef(centerDropTargetComponent);
-  const activeIndexRef = useRef(activeIndex);
-  useEffect(() => {
-    const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).pipe(take$1(1)).subscribe((layoutInfo) => {
-      setSplitScreen(rootName, `${layoutName}=${screenKey}`, {
-        afterDropTargetComponent: layoutInfo?.afterDropTargetComponent || [],
-        beforeDropTargetComponent: layoutInfo?.beforeDropTargetComponent || [],
-        centerDropTargetComponent: layoutInfo?.centerDropTargetComponent || initialCenterComponents || [],
-        direction: layoutInfo?.direction || direction
-      });
-    });
-    return () => {
-      removeSplitScreenChild(rootName, layoutName);
-      subscribe.unsubscribe();
-    };
-  }, [rootName, layoutName, initialCenterComponents]);
-  useEffect(() => {
-    const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).subscribe((layoutInfo) => {
-      if (layoutInfo) {
-        setBeforeDropTargetComponent([
-          ...layoutInfo.beforeDropTargetComponent
-        ]);
-        setAfterDropTargetComponent([
-          ...layoutInfo.afterDropTargetComponent
-        ]);
-        setCenterDropTargetComponent([
-          ...layoutInfo.centerDropTargetComponent
-        ]);
-        setDirection(layoutInfo.direction);
-        if (layoutInfo.beforeDropTargetComponent.length !== 0 || layoutInfo.afterDropTargetComponent.length !== 0) {
-          setIsSplit(true);
-        } else if (layoutInfo.beforeDropTargetComponent.length === 0 && layoutInfo.centerDropTargetComponent.length === 0 && layoutInfo.afterDropTargetComponent.length === 0) {
-          dropMovementEventSubject.next({
-            state: "remove",
-            targetContainerName: containerName,
-            targetParentLayoutName: "",
-            targetLayoutName: parentLayoutName
-          });
-          setIsEmptyContent(true);
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-    };
-  }, [rootName, layoutName]);
-  useEffect(() => {
-    const subscribe = dropMovementEventSubject.pipe(
-      distinctUntilChanged((prev, curr) => {
-        const filterChildren = (obj) => {
-          const {
-            children,
-            component,
-            targetComponent,
-            x,
-            y,
-            ...rest
-          } = obj || {};
-          return rest;
-        };
-        return equal(filterChildren(prev), filterChildren(curr));
-      })
-    ).subscribe((event) => {
-      if (event.state === "remove") {
-        if (event.targetParentLayoutName === layoutName || event.targetParentLayoutName === "" && event.targetLayoutName === layoutName) {
-          requestAnimationFrame(() => {
-            let removeCallback = (removeOrderName) => {
-              if (event.nextContainerName && event.dropTargetComponentEvent && event.targetComponent) {
-                const targetComponentsMap = handleUpdateDropTargetComponents({
-                  orderName: removeOrderName,
-                  containerName: event.nextContainerName,
-                  parentLayoutName,
-                  layoutName,
-                  dropComponent: event.targetComponent,
-                  navigationTitle: event.dropTargetComponentEvent.navigationTitle,
-                  isUsePrefix: true,
-                  afterDropTargetComponent,
-                  beforeDropTargetComponent,
-                  centerDropTargetComponent,
-                  dropDocumentOutsideOption: event.dropTargetComponentEvent?.dropDocumentOutsideOption,
-                  screenKey: event.dropTargetComponentEvent.screenKey
-                });
-                setSplitScreen(
-                  rootName,
-                  `${layoutName}=${screenKey}`,
-                  {
-                    ...getCurrentSplitScreenComponents(
-                      rootName,
-                      `${layoutName}=${screenKey}`
-                    ) || {
-                      afterDropTargetComponent,
-                      beforeDropTargetComponent,
-                      centerDropTargetComponent,
-                      direction
-                    },
-                    ...targetComponentsMap
-                  }
-                );
-                Promise.resolve().then(
-                  () => event.dropEndCallback && event.dropEndCallback({
-                    x: event.x,
-                    y: event.y,
-                    containerName
-                  })
-                );
-              }
-            };
-            const currentComponents = getCurrentSplitScreenComponents(
-              rootName,
-              `${layoutName}=${screenKey}`
-            );
-            const afterList = handleRemove(
-              currentComponents?.afterDropTargetComponent || afterDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("after")
-            );
-            const beforList = handleRemove(
-              currentComponents?.beforeDropTargetComponent || beforeDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("before")
-            );
-            const centerList = handleRemove(
-              currentComponents?.centerDropTargetComponent || centerDropTargetComponent,
-              event.targetContainerName,
-              () => removeCallback("center")
-            );
-            setSplitScreen(
-              rootName,
-              `${layoutName}=${screenKey}`,
-              {
-                afterDropTargetComponent: afterList,
-                beforeDropTargetComponent: beforList,
-                centerDropTargetComponent: centerList,
-                direction
-              }
-            );
-          });
-        }
-      } else if (event.state === "append") {
-        const {
-          x,
-          y,
-          dropEndCallback,
-          dropTargetComponentEvent,
-          orderName,
-          targetLayoutName,
-          targetParentLayoutName,
-          targetContainerName,
-          targetComponent,
-          nextContainerName,
-          parentOrderName
-        } = event;
-        if (layoutRef.current && orderName && x && y && dropTargetComponentEvent && isInnerDrop({ x, y, element: layoutRef.current })) {
-          const {
-            direction: dropDirection,
-            navigationTitle,
-            dropDocumentOutsideOption,
-            screenKey: containerScreenKey
-          } = dropTargetComponentEvent;
-          if (
-            //orderName !== 'center' &&
-            targetLayoutName === layoutName && targetComponent
-          ) {
-            if (dropDirection === parentDirection && orderName !== "center") {
-              dropMovementEventSubject.next({
-                state: "append",
-                targetContainerName,
-                targetParentLayoutName: "",
-                targetLayoutName: parentLayoutName,
-                targetComponent,
-                nextContainerName: containerName,
-                parentOrderName: getSelfOrderName(layoutName) || orderName,
-                orderName,
-                x,
-                y,
-                dropEndCallback,
-                dropTargetComponentEvent: {
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  direction: parentDirection,
-                  screenKey
-                }
-              });
-            } else {
-              if (orderName !== "center") {
-                setDirection(dropDirection);
-                setIsSplit(true);
-              }
-              const targetComponentsMap = handleUpdateDropTargetComponents({
-                orderName,
-                parentOrderName,
-                containerName: targetContainerName,
-                nextContainerName,
-                parentLayoutName,
-                layoutName,
-                dropComponent: targetComponent,
-                navigationTitle,
-                isUsePrefix: orderName !== "center",
-                afterDropTargetComponent,
-                beforeDropTargetComponent,
-                centerDropTargetComponent,
-                dropDocumentOutsideOption
-              });
-              setSplitScreen(
-                rootName,
-                `${layoutName}=${screenKey}`,
-                {
-                  ...getCurrentSplitScreenComponents(
-                    rootName,
-                    `${layoutName}=${screenKey}`
-                  ) || {
-                    afterDropTargetComponent,
-                    beforeDropTargetComponent,
-                    centerDropTargetComponent,
-                    direction
-                  },
-                  ...targetComponentsMap,
-                  ...{ direction: dropDirection }
-                }
-              );
-              Promise.resolve().then(
-                () => event.dropEndCallback && event.dropEndCallback({
-                  x: event.x,
-                  y: event.y,
-                  containerName
-                })
-              );
-            }
-          }
-        }
-      }
-    });
-    return () => {
-      subscribe.unsubscribe();
-    };
-  }, [
-    direction,
-    parentDirection,
-    parentLayoutName,
-    layoutName,
-    beforeDropTargetComponent,
-    afterDropTargetComponent,
-    centerDropTargetComponent
-  ]);
-  useEffect(() => {
-    centerDropTargetComponentRef.current = centerDropTargetComponent;
-  }, [centerDropTargetComponent]);
-  useEffect(() => {
-    activeIndexRef.current = activeIndex;
-  }, [activeIndex]);
-  const [isOnlyOneScreen, setIsOnlyOneScreen] = useState(false);
-  return /* @__PURE__ */ jsx(Fragment, { children: !isEmptyContent && /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `${FlexLayout_default["flex-split-screen"]}`,
-      ref: layoutRef,
-      children: [
-        /* @__PURE__ */ jsxs(
-          FlexLayout_default2,
-          {
-            direction,
-            layoutName: `${layoutName}`,
-            panelMovementMode: "bulldozer",
-            children: [
-              beforeDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: beforeDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsx(
-                  FlexLayoutContainer_default,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: true,
-                    children: /* @__PURE__ */ 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__ */ jsx("div", {}),
-              centerDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
-                FlexLayoutContainer_default,
-                {
-                  containerName: `${(centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName}`,
-                  isInitialResizable: true,
-                  isResizePanel: isSplit,
-                  children: isSplit ? /* @__PURE__ */ jsx("div", { "data-key": screenKey, children: /* @__PURE__ */ 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__ */ jsxs(
-                    FlexLayoutSplitScreenScrollBox_default,
-                    {
-                      keyName: (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName,
-                      isDefaultScrollStyle: true,
-                      children: [
-                        !isOnlyOneScreen && /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: `${FlexLayout_default["flex-split-screen-drag-box-title-wrapper-sticky"]}`,
-                            children: /* @__PURE__ */ 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__ */ jsx(
-                                    FlexLayoutSplitScreenDragBoxContainer,
-                                    {
-                                      "data-layout_name": layoutName,
-                                      layoutName,
-                                      children: centerDropTargetComponent.map(
-                                        (item, index) => /* @__PURE__ */ 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__ */ 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__ */ jsx(FlexLayoutSplitScreenDragBoxTitleMore, {})
-                                ]
-                              }
-                            )
-                          }
-                        ),
-                        (() => {
-                          const target = centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0];
-                          return target.component;
-                        })()
-                      ]
-                    }
-                  )
-                },
-                (centerDropTargetComponent[activeIndex] || centerDropTargetComponent[0]).containerName
-              ) }) : /* @__PURE__ */ jsx("div", {}),
-              afterDropTargetComponent.length != 0 ? /* @__PURE__ */ jsx(Fragment, { children: afterDropTargetComponent.map(
-                ({
-                  containerName: cName,
-                  component,
-                  navigationTitle,
-                  dropDocumentOutsideOption,
-                  screenKey: screenKey2
-                }, i) => /* @__PURE__ */ jsx(
-                  FlexLayoutContainer_default,
-                  {
-                    containerName: cName,
-                    isInitialResizable: true,
-                    isResizePanel: i !== afterDropTargetComponent.length - 1,
-                    children: /* @__PURE__ */ 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__ */ jsx("div", {})
-            ]
-          }
-        ),
-        boundaryContainerSize && /* @__PURE__ */ 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 = useRef(offset);
-  const rootRef = useRef(null);
-  const contentRef = useRef(null);
-  const mutatingRef = useRef(false);
-  const lastOffsetRef = useRef(0);
-  const [resolvedEdge, setResolvedEdge] = useState("top");
-  const rafId = useRef(null);
-  const [contentDynamicStyle, setContentDynamicStyle] = useState({});
-  useEffect(() => {
-    setContentDynamicStyle({
-      willChange: "transform",
-      transition: "transform 50ms linear"
-    });
-  }, []);
-  useEffect(() => {
-    offsetRef.current = offset;
-    scheduleUpdate();
-  }, [offset]);
-  const [ioRoot, setIoRoot] = useState(null);
-  useEffect(() => {
-    const root = scrollRoot ?? pickDefaultScrollRoot();
-    setResolvedEdge(
-      edge === "auto" ? isVerticalScroll(root) ? "top" : "left" : edge
-    );
-    setIoRoot(root);
-  }, [edge, scrollRoot]);
-  useEffect(() => {
-    if (edge !== "auto") {
-      setResolvedEdge(edge);
-      return;
-    }
-    const vertical = isVerticalScroll(ioRoot);
-    setResolvedEdge(vertical ? "top" : "left");
-  }, [edge, ioRoot]);
-  useEffect(() => {
-  }, []);
-  const scheduleUpdate = () => {
-    if (rafId.current != null) return;
-    rafId.current = requestAnimationFrame(() => {
-      rafId.current = null;
-      doUpdate();
-    });
-  };
-  const doUpdate = () => {
-    if (mutatingRef.current) return;
-    mutatingRef.current = true;
-    const rootEl = rootRef.current;
-    const contentEl = contentRef.current;
-    if (!rootEl || !contentEl) {
-      mutatingRef.current = false;
-      return;
-    }
-    const parentEl = rootEl.parentElement;
-    if (!parentEl) {
-      mutatingRef.current = false;
-      return;
-    }
-    const rootBounds = ioRoot && "getBoundingClientRect" in ioRoot ? ioRoot.getBoundingClientRect() : new DOMRect(0, 0, window.innerWidth, window.innerHeight);
-    const parentRect = parentEl.getBoundingClientRect();
-    const contentRect = contentEl.getBoundingClientRect();
-    let newOffset = 0;
-    if (resolvedEdge === "top" || resolvedEdge === "bottom") {
-      const maxTranslate = Math.max(
-        0,
-        parentRect.height - contentRect.height
-      );
-      let desiredTop = 0;
-      if (resolvedEdge === "top") {
-        desiredTop = rootBounds.top + offsetRef.current - parentRect.top;
-      } else {
-        const targetBottomFromParentTop = Math.min(
-          parentRect.bottom,
-          rootBounds.bottom - offsetRef.current
-        ) - parentRect.top;
-        desiredTop = targetBottomFromParentTop - contentRect.height;
-      }
-      newOffset = clamp(desiredTop, 0, maxTranslate);
-    } else {
-      const maxTranslate = Math.max(
-        0,
-        parentRect.width - contentRect.width
-      );
-      let desiredLeft = 0;
-      if (resolvedEdge === "left") {
-        desiredLeft = rootBounds.left + offsetRef.current - parentRect.left;
-      } else {
-        const targetRightFromParentLeft = Math.min(
-          parentRect.right,
-          rootBounds.right - offsetRef.current
-        ) - parentRect.left;
-        desiredLeft = targetRightFromParentLeft - contentRect.width;
-      }
-      newOffset = clamp(desiredLeft, 0, maxTranslate);
-    }
-    const nextOffset = quantizeToDevicePixel(newOffset);
-    if (Math.abs(lastOffsetRef.current - nextOffset) > 0.5) {
-      if (resolvedEdge === "top" || resolvedEdge === "bottom") {
-        contentEl.style.transform = `translateY(${nextOffset}px)`;
-      } else {
-        contentEl.style.transform = `translateX(${nextOffset}px)`;
-      }
-      lastOffsetRef.current = nextOffset;
-      onTranslateChange(nextOffset, rootRef, contentRef);
-    }
-    if (debug) {
-      rootEl.style.outline = "1px dashed rgba(0,0,0,.2)";
-      contentEl.style.outline = "1px solid rgba(0,128,255,.35)";
-    }
-    queueMicrotask(() => {
-      mutatingRef.current = false;
-    });
-  };
-  useEffect(() => {
-    if (typeof window == "undefined") return;
-    const rootEl = rootRef.current;
-    if (!rootEl) return;
-    const parentEl = rootEl.parentElement;
-    console.log(parentEl);
-    if (!parentEl) return;
-    const targets = [parentEl];
-    const observerCallback = () => {
-      if (!mutatingRef.current) scheduleUpdate();
-    };
-    const io = new IntersectionObserver(observerCallback, {
-      root: ioRoot instanceof Element ? ioRoot : null,
-      threshold: 0,
-      rootMargin: "1px"
-    });
-    const ro = new ResizeObserver(observerCallback);
-    targets.forEach((t) => io.observe(t));
-    ro.observe(parentEl);
-    if (contentRef.current) {
-      ro.observe(contentRef.current);
-    }
-    const scrollTarget = ioRoot || window;
-    scrollTarget.addEventListener("scroll", scheduleUpdate, {
-      passive: true
-    });
-    window.addEventListener("resize", scheduleUpdate);
-    scheduleUpdate();
-    return () => {
-      io.disconnect();
-      ro.disconnect();
-      scrollTarget.removeEventListener("scroll", scheduleUpdate);
-      window.removeEventListener("resize", scheduleUpdate);
-      if (rafId.current != null) {
-        cancelAnimationFrame(rafId.current);
-        rafId.current = null;
-      }
-    };
-  }, [ioRoot, resolvedEdge, offset, debug]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: rootRef,
-      className,
-      style: {
-        display: "block",
-        minWidth: 0,
-        minHeight: 0,
-        height: "100%",
-        // 부모 높이를 채우도록 설정
-        ...style
-      },
-      ...rest,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: contentRef,
-          style: contentDynamicStyle,
-          children
-        }
-      )
-    }
-  );
-};
-var FlexLayoutStickyBox_default = FlexLayoutStickyBox;
-
-export { FlexLayoutContainer_default, FlexLayoutResizePanel_default, FlexLayoutSplitScreenDragBox, FlexLayoutSplitScreenScrollBox_default, FlexLayoutSplitScreen_default, FlexLayoutStickyBox_default, FlexLayout_default2 as FlexLayout_default };
-//# sourceMappingURL=chunk-UYI4Z27V.js.map
-//# sourceMappingURL=chunk-UYI4Z27V.js.map