@byeolnaerim/flex-layout 0.0.8 → 0.0.10

package/dist/flex-layout/components/FlexLayoutSplitScreenScrollBox.js

@@ -1,103 +1 @@
-import { jsx } from 'react/jsx-runtime';
-import { memo, useRef, useState, useEffect } from 'react';
-import { Subject, fromEvent } from 'rxjs';
-import { throttleTime, take } from 'rxjs/operators';
-import { setScrollPosition, getScrollPosition, removeScrollPosition } from '../store/FlexLayoutContainerStore';
-import listScroll from '../styles/listScroll.module.css';
-
-const 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-scroll"] : listScroll["list-scroll"]} ${direction ? listScroll[direction] : ""}`,
-      ...props,
-      children
-    }
-  );
-};
-var FlexLayoutSplitScreenScrollBox_default = memo(FlexLayoutSplitScreenScrollBox);
-
-export { FlexLayoutSplitScreenScrollBox_default as default };
-//# sourceMappingURL=FlexLayoutSplitScreenScrollBox.js.map
-//# sourceMappingURL=FlexLayoutSplitScreenScrollBox.js.map
+"use client";import{jsx as D}from"react/jsx-runtime";import{memo as L,useEffect as a,useRef as m,useState as M}from"react";import{fromEvent as E,Subject as d}from"rxjs";import{take as w,throttleTime as F}from"rxjs/operators";import{getScrollPosition as T,removeScrollPosition as h,setScrollPosition as y}from"../store/FlexLayoutContainerStore";import i from"../styles/listScroll.module.css";const P=({className:S,children:b,keyName:l,direction:o,isDefaultScrollStyle:p=!1,...x})=>{const e=m(null),[v,u]=M(!1),n=m(new d);return a(()=>{const r=E(window,"mouseup").subscribe(()=>{u(!1)}),s=n.current.pipe(F(70)).subscribe(t=>{y(l,t)}),c=T(l).pipe(w(1)).subscribe(t=>{e.current&&t&&(e.current.scrollLeft=t.x,e.current.scrollTop=t.y)});return()=>{h(l),r.unsubscribe(),c.unsubscribe(),s.unsubscribe()}},[l]),a(()=>{if(!e.current)return;let r=null;const s=c=>{if(!(!e.current||o!=="x")&&e.current.matches(":hover")){c.preventDefault();const{deltaY:t}=c,f=e.current.scrollLeft+t;r&&cancelAnimationFrame(r),r=requestAnimationFrame(()=>{e.current.scrollLeft=f,n.current.next({x:f,y:e.current.scrollTop}),r=null})}};return e.current.addEventListener("wheel",s,{passive:!1}),()=>{e.current?.removeEventListener("wheel",s)}},[]),D("div",{ref:e,onMouseUp:()=>u(!1),onMouseDown:()=>u(!0),onMouseMove:r=>{!e.current||!v||o!=="x"||(e.current.scrollLeft+=r.movementX*-1,n.current.next({x:e.current.scrollLeft,y:e.current.scrollTop}))},onScroll:()=>{e.current&&n.current.next({x:e.current.scrollLeft,y:e.current.scrollTop})},className:`${S||""} ${p?i["default-scroll"]:i["list-scroll"]} ${o?i[o]:""}`,...x,children:b})};var U=L(P);export{U as default};

package/dist/flex-layout/components/FlexLayoutStickyBox.cjs

@@ -1,226 +1 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-
-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;
-}
-const dpr = typeof window != "undefined" ? window.devicePixelRatio || 1 : 1;
-function quantizeToDevicePixel(n) {
-  return Math.round(n * dpr) / dpr;
-}
-const 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;
-
-module.exports = FlexLayoutStickyBox_default;
-//# sourceMappingURL=FlexLayoutStickyBox.cjs.map
-//# sourceMappingURL=FlexLayoutStickyBox.cjs.map
+"use strict";"use client";var L=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var U=Object.prototype.hasOwnProperty;var W=(e,t)=>{for(var o in t)L(e,o,{get:t[o],enumerable:!0})},X=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let u of j(t))!U.call(e,u)&&u!==o&&L(e,u,{get:()=>t[u],enumerable:!(s=$(t,u))||s.enumerable});return e};var Y=e=>X(L({},"__esModule",{value:!0}),e);var Q={};W(Q,{default:()=>K});module.exports=Y(Q);var T=require("react/jsx-runtime"),n=require("react");function C(e,t,o){return Math.max(t,Math.min(o,e))}function V(){if(typeof document>"u")return null;let e=document.body;for(;e&&e!==document.documentElement&&e!==document.body;){const t=getComputedStyle(e),o=t.overflowY,s=t.overflowX;if(o==="auto"||o==="scroll"||s==="auto"||s==="scroll")return e;e=e.parentElement}return null}function F(e){if(typeof window>"u")return!0;if(!e)return document.documentElement.scrollHeight>window.innerHeight+1;const t=e;return t.scrollHeight>t.clientHeight+1}const B=typeof window<"u"&&window.devicePixelRatio||1;function G(e){return Math.round(e*B)/B}const J=({edge:e="auto",offset:t=16,scrollRoot:o=null,debug:s=!1,children:u,style:D,className:P,transitionDurationMs:S=200,onTranslateChange:O=()=>{},...k})=>{const v=(0,n.useRef)(t),R=(0,n.useRef)(null),w=(0,n.useRef)(null),g=(0,n.useRef)(!1),H=(0,n.useRef)(0),[f,x]=(0,n.useState)("top"),b=(0,n.useRef)(null),[z,A]=(0,n.useState)({});(0,n.useEffect)(()=>{A({willChange:"transform",transition:`transform ${S}ms linear`})},[S]),(0,n.useEffect)(()=>{v.current=t,d()},[t]);const[c,q]=(0,n.useState)(null);(0,n.useEffect)(()=>{const r=o??V();x(e==="auto"?F(r)?"top":"left":e),q(r)},[e,o]),(0,n.useEffect)(()=>{if(e!=="auto"){x(e);return}const r=F(c);x(r?"top":"left")},[e,c]),(0,n.useEffect)(()=>{},[]);const d=()=>{b.current==null&&(b.current=requestAnimationFrame(()=>{b.current=null,I()}))},I=()=>{if(g.current)return;g.current=!0;const r=R.current,i=w.current;if(!r||!i){g.current=!1;return}const y=r.parentElement;if(!y){g.current=!1;return}const m=c&&"getBoundingClientRect"in c?c.getBoundingClientRect():new DOMRect(0,0,window.innerWidth,window.innerHeight),l=y.getBoundingClientRect(),a=i.getBoundingClientRect();let E=0;if(f==="top"||f==="bottom"){const M=Math.max(0,l.height-a.height);let h=0;f==="top"?h=m.top+v.current-l.top:h=Math.min(l.bottom,m.bottom-v.current)-l.top-a.height,E=C(h,0,M)}else{const M=Math.max(0,l.width-a.width);let h=0;f==="left"?h=m.left+v.current-l.left:h=Math.min(l.right,m.right-v.current)-l.left-a.width,E=C(h,0,M)}const p=G(E);Math.abs(H.current-p)>.5&&(f==="top"||f==="bottom"?i.style.transform=`translateY(${p}px)`:i.style.transform=`translateX(${p}px)`,H.current=p,O(p,R,w)),s&&(r.style.outline="1px dashed rgba(0,0,0,.2)",i.style.outline="1px solid rgba(0,128,255,.35)"),queueMicrotask(()=>{g.current=!1})};return(0,n.useEffect)(()=>{if(typeof window>"u")return;const r=R.current;if(!r)return;const i=r.parentElement;if(console.log(i),!i)return;const y=[i],m=()=>{g.current||d()},l=new IntersectionObserver(m,{root:c instanceof Element?c:null,threshold:0,rootMargin:"1px"}),a=new ResizeObserver(m);y.forEach(p=>l.observe(p)),a.observe(i),w.current&&a.observe(w.current);const E=c||window;return E.addEventListener("scroll",d,{passive:!0}),window.addEventListener("resize",d),d(),()=>{l.disconnect(),a.disconnect(),E.removeEventListener("scroll",d),window.removeEventListener("resize",d),b.current!=null&&(cancelAnimationFrame(b.current),b.current=null)}},[c,f,t,s]),(0,T.jsx)("div",{ref:R,className:P,style:{display:"block",minWidth:0,minHeight:0,height:"100%",...D},...k,children:(0,T.jsx)("div",{ref:w,style:z,children:u})})};var K=J;

package/dist/flex-layout/components/FlexLayoutStickyBox.d.ts

@@ -11,6 +11,7 @@ interface FlexLayoutStickyBoxProps extends HTMLAttributes<HTMLDivElement> {
     debug?: boolean;
     /** 자식 */
     children: ReactNode;
+    transitionDurationMs?: number;
     onTranslateChange?: (value: number, rootRef: RefObject<HTMLDivElement | null>, contentRef: RefObject<HTMLDivElement | null>) => void;
 }
 /**

package/dist/flex-layout/components/FlexLayoutStickyBox.js

@@ -1,224 +1 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect } from 'react';
-
-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;
-}
-const dpr = typeof window != "undefined" ? window.devicePixelRatio || 1 : 1;
-function quantizeToDevicePixel(n) {
-  return Math.round(n * dpr) / dpr;
-}
-const 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 { FlexLayoutStickyBox_default as default };
-//# sourceMappingURL=FlexLayoutStickyBox.js.map
-//# sourceMappingURL=FlexLayoutStickyBox.js.map
+"use client";import{jsx as D}from"react/jsx-runtime";import{useEffect as g,useRef as b,useState as L}from"react";function C(e,t,c){return Math.max(t,Math.min(c,e))}function j(){if(typeof document>"u")return null;let e=document.body;for(;e&&e!==document.documentElement&&e!==document.body;){const t=getComputedStyle(e),c=t.overflowY,E=t.overflowX;if(c==="auto"||c==="scroll"||E==="auto"||E==="scroll")return e;e=e.parentElement}return null}function F(e){if(typeof window>"u")return!0;if(!e)return document.documentElement.scrollHeight>window.innerHeight+1;const t=e;return t.scrollHeight>t.clientHeight+1}const B=typeof window<"u"&&window.devicePixelRatio||1;function U(e){return Math.round(e*B)/B}const W=({edge:e="auto",offset:t=16,scrollRoot:c=null,debug:E=!1,children:T,style:P,className:O,transitionDurationMs:S=200,onTranslateChange:k=()=>{},...z})=>{const v=b(t),R=b(null),w=b(null),m=b(!1),H=b(0),[s,x]=L("top"),p=b(null),[A,q]=L({});g(()=>{q({willChange:"transform",transition:`transform ${S}ms linear`})},[S]),g(()=>{v.current=t,u()},[t]);const[l,I]=L(null);g(()=>{const n=c??j();x(e==="auto"?F(n)?"top":"left":e),I(n)},[e,c]),g(()=>{if(e!=="auto"){x(e);return}const n=F(l);x(n?"top":"left")},[e,l]),g(()=>{},[]);const u=()=>{p.current==null&&(p.current=requestAnimationFrame(()=>{p.current=null,N()}))},N=()=>{if(m.current)return;m.current=!0;const n=R.current,r=w.current;if(!n||!r){m.current=!1;return}const y=n.parentElement;if(!y){m.current=!1;return}const a=l&&"getBoundingClientRect"in l?l.getBoundingClientRect():new DOMRect(0,0,window.innerWidth,window.innerHeight),o=y.getBoundingClientRect(),i=r.getBoundingClientRect();let h=0;if(s==="top"||s==="bottom"){const M=Math.max(0,o.height-i.height);let d=0;s==="top"?d=a.top+v.current-o.top:d=Math.min(o.bottom,a.bottom-v.current)-o.top-i.height,h=C(d,0,M)}else{const M=Math.max(0,o.width-i.width);let d=0;s==="left"?d=a.left+v.current-o.left:d=Math.min(o.right,a.right-v.current)-o.left-i.width,h=C(d,0,M)}const f=U(h);Math.abs(H.current-f)>.5&&(s==="top"||s==="bottom"?r.style.transform=`translateY(${f}px)`:r.style.transform=`translateX(${f}px)`,H.current=f,k(f,R,w)),E&&(n.style.outline="1px dashed rgba(0,0,0,.2)",r.style.outline="1px solid rgba(0,128,255,.35)"),queueMicrotask(()=>{m.current=!1})};return g(()=>{if(typeof window>"u")return;const n=R.current;if(!n)return;const r=n.parentElement;if(console.log(r),!r)return;const y=[r],a=()=>{m.current||u()},o=new IntersectionObserver(a,{root:l instanceof Element?l:null,threshold:0,rootMargin:"1px"}),i=new ResizeObserver(a);y.forEach(f=>o.observe(f)),i.observe(r),w.current&&i.observe(w.current);const h=l||window;return h.addEventListener("scroll",u,{passive:!0}),window.addEventListener("resize",u),u(),()=>{o.disconnect(),i.disconnect(),h.removeEventListener("scroll",u),window.removeEventListener("resize",u),p.current!=null&&(cancelAnimationFrame(p.current),p.current=null)}},[l,s,t,E]),D("div",{ref:R,className:O,style:{display:"block",minWidth:0,minHeight:0,height:"100%",...P},...z,children:D("div",{ref:w,style:A,children:T})})};var Q=W;export{Q as default};

package/dist/flex-layout/components/index.cjs

@@ -1,52 +1 @@
-'use strict';
-
-var FlexLayout = require('./FlexLayout');
-var FlexLayoutContainer = require('./FlexLayoutContainer');
-var FlexLayoutResizePanel = require('./FlexLayoutResizePanel');
-var FlexLayoutSplitScreen = require('./FlexLayoutSplitScreen');
-var FlexLayoutSplitScreenDragBox = require('./FlexLayoutSplitScreenDragBox');
-var FlexLayoutSplitScreenScrollBox = require('./FlexLayoutSplitScreenScrollBox');
-var FlexLayoutStickyBox = require('./FlexLayoutStickyBox');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var FlexLayout__default = /*#__PURE__*/_interopDefault(FlexLayout);
-var FlexLayoutContainer__default = /*#__PURE__*/_interopDefault(FlexLayoutContainer);
-var FlexLayoutResizePanel__default = /*#__PURE__*/_interopDefault(FlexLayoutResizePanel);
-var FlexLayoutSplitScreen__default = /*#__PURE__*/_interopDefault(FlexLayoutSplitScreen);
-var FlexLayoutSplitScreenDragBox__default = /*#__PURE__*/_interopDefault(FlexLayoutSplitScreenDragBox);
-var FlexLayoutSplitScreenScrollBox__default = /*#__PURE__*/_interopDefault(FlexLayoutSplitScreenScrollBox);
-var FlexLayoutStickyBox__default = /*#__PURE__*/_interopDefault(FlexLayoutStickyBox);
-
-
-
-Object.defineProperty(exports, "FlexLayout", {
-  enumerable: true,
-  get: function () { return FlexLayout__default.default; }
-});
-Object.defineProperty(exports, "FlexLayoutContainer", {
-  enumerable: true,
-  get: function () { return FlexLayoutContainer__default.default; }
-});
-Object.defineProperty(exports, "FlexLayoutResizePanel", {
-  enumerable: true,
-  get: function () { return FlexLayoutResizePanel__default.default; }
-});
-Object.defineProperty(exports, "FlexLayoutSplitScreen", {
-  enumerable: true,
-  get: function () { return FlexLayoutSplitScreen__default.default; }
-});
-Object.defineProperty(exports, "FlexLayoutSplitScreenDragBox", {
-  enumerable: true,
-  get: function () { return FlexLayoutSplitScreenDragBox__default.default; }
-});
-Object.defineProperty(exports, "FlexLayoutSplitScreenScrollBox", {
-  enumerable: true,
-  get: function () { return FlexLayoutSplitScreenScrollBox__default.default; }
-});
-Object.defineProperty(exports, "FlexLayoutStickyBox", {
-  enumerable: true,
-  get: function () { return FlexLayoutStickyBox__default.default; }
-});
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map
+"use strict";var F=Object.create;var r=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var n=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;var B=(e,o)=>{for(var t in o)r(e,t,{get:o[t],enumerable:!0})},f=(e,o,t,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of i(o))!c.call(e,l)&&l!==t&&r(e,l,{get:()=>o[l],enumerable:!(x=L(o,l))||x.enumerable});return e};var a=(e,o,t)=>(t=e!=null?F(n(e)):{},f(o||!e||!e.__esModule?r(t,"default",{value:e,enumerable:!0}):t,e)),g=e=>f(r({},"__esModule",{value:!0}),e);var k={};B(k,{FlexLayout:()=>u.default,FlexLayoutContainer:()=>p.default,FlexLayoutResizePanel:()=>s.default,FlexLayoutSplitScreen:()=>y.default,FlexLayoutSplitScreenDragBox:()=>S.default,FlexLayoutSplitScreenScrollBox:()=>d.default,FlexLayoutStickyBox:()=>m.default});module.exports=g(k);var u=a(require("./FlexLayout"),1),p=a(require("./FlexLayoutContainer"),1),s=a(require("./FlexLayoutResizePanel"),1),y=a(require("./FlexLayoutSplitScreen"),1),S=a(require("./FlexLayoutSplitScreenDragBox"),1),d=a(require("./FlexLayoutSplitScreenScrollBox"),1),m=a(require("./FlexLayoutStickyBox"),1);0&&(module.exports={FlexLayout,FlexLayoutContainer,FlexLayoutResizePanel,FlexLayoutSplitScreen,FlexLayoutSplitScreenDragBox,FlexLayoutSplitScreenScrollBox,FlexLayoutStickyBox});

package/dist/flex-layout/components/index.js

@@ -1,9 +1 @@
-export { default as FlexLayout } from './FlexLayout';
-export { default as FlexLayoutContainer } from './FlexLayoutContainer';
-export { default as FlexLayoutResizePanel } from './FlexLayoutResizePanel';
-export { default as FlexLayoutSplitScreen } from './FlexLayoutSplitScreen';
-export { default as FlexLayoutSplitScreenDragBox } from './FlexLayoutSplitScreenDragBox';
-export { default as FlexLayoutSplitScreenScrollBox } from './FlexLayoutSplitScreenScrollBox';
-export { default as FlexLayoutStickyBox } from './FlexLayoutStickyBox';
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+import{default as t}from"./FlexLayout";import{default as l}from"./FlexLayoutContainer";import{default as x}from"./FlexLayoutResizePanel";import{default as u}from"./FlexLayoutSplitScreen";import{default as s}from"./FlexLayoutSplitScreenDragBox";import{default as S}from"./FlexLayoutSplitScreenScrollBox";import{default as m}from"./FlexLayoutStickyBox";export{t as FlexLayout,l as FlexLayoutContainer,x as FlexLayoutResizePanel,u as FlexLayoutSplitScreen,s as FlexLayoutSplitScreenDragBox,S as FlexLayoutSplitScreenScrollBox,m as FlexLayoutStickyBox};

package/dist/flex-layout/hooks/index.cjs

@@ -1,21 +1 @@
-'use strict';
-
-var useDrag = require('./useDrag');
-var useListPaging = require('./useListPaging');
-
-
-
-Object.keys(useDrag).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return useDrag[k]; }
-	});
-});
-Object.keys(useListPaging).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return useListPaging[k]; }
-	});
-});
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map
+"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var t=(r,o,p,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let m of c(o))!d.call(r,m)&&m!==p&&a(r,m,{get:()=>o[m],enumerable:!(x=b(o,m))||x.enumerable});return r},f=(r,o,p)=>(t(r,o,"default"),p&&t(p,o,"default"));var g=r=>t(a({},"__esModule",{value:!0}),r);var e={};module.exports=g(e);f(e,require("./useDrag"),module.exports);f(e,require("./useListPaging"),module.exports);0&&(module.exports={...require("./useDrag"),...require("./useListPaging")});

package/dist/flex-layout/hooks/index.js

@@ -1,4 +1 @@
-export * from './useDrag';
-export * from './useListPaging';
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+export*from"./useDrag";export*from"./useListPaging";