diff --git a/package.json b/package.json
index 3de67dd15..48e41ae93 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
         ]
     },
     "resolutions": {
-        "@daybrush/utils": "^1.12.1",
+        "@daybrush/utils": "^1.13.0",
         "@types/react": "^16.9.17",
         "typescript": "^4.5.0 <4.6.0",
         "@storybook/react": "^6.4.22",
@@ -114,12 +114,12 @@
         "framework-utils": "^1.1.0",
         "gesto": "^1.19.0",
         "overlap-area": "^1.1.0",
-        "croact-css-styled": "^1.1.8",
-        "react-css-styled": "^1.1.8",
+        "croact-css-styled": "^1.1.9",
+        "react-css-styled": "^1.1.9",
         "tslib": "^2.3.1"
     },
     "overrides": {
-        "@daybrush/utils": "^1.12.1",
+        "@daybrush/utils": "^1.13.0",
         "@types/react": "^16.9.17",
         "typescript": "^4.5.0 <4.6.0",
         "@storybook/react": "^6.4.22",
@@ -138,8 +138,8 @@
         "framework-utils": "^1.1.0",
         "gesto": "^1.19.0",
         "overlap-area": "^1.1.0",
-        "croact-css-styled": "^1.1.8",
-        "react-css-styled": "^1.1.8",
+        "croact-css-styled": "^1.1.9",
+        "react-css-styled": "^1.1.9",
         "tslib": "^2.3.1"
     }
 }
diff --git a/packages/croact-moveable/package.json b/packages/croact-moveable/package.json
index 206b28852..5a4fed1a3 100644
--- a/packages/croact-moveable/package.json
+++ b/packages/croact-moveable/package.json
@@ -58,7 +58,7 @@
     "devDependencies": {
         "@daybrush/builder": "^0.1.2",
         "@types/react": "^16.9.17",
-        "croact": "^1.0.3",
+        "croact": "^1.0.4",
         "keycon": "^0.3.0",
         "print-sizes": "^0.2.0",
         "pvu": "^0.6.1",
@@ -68,19 +68,19 @@
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "@daybrush/utils": "^1.12.1",
+        "@daybrush/utils": "^1.13.0",
         "@egjs/agent": "^2.2.1",
         "@egjs/children-differ": "^1.0.1",
         "@egjs/list-differ": "^1.0.0",
         "@scena/dragscroll": "^1.4.0",
         "@scena/event-emitter": "^1.0.5",
         "@scena/matrix": "^1.1.1",
-        "croact-css-styled": "^1.1.8",
+        "croact-css-styled": "^1.1.9",
         "css-to-mat": "^1.0.3",
         "framework-utils": "^1.1.0",
         "gesto": "^1.19.0",
         "overlap-area": "^1.1.0",
-        "react-css-styled": "^1.1.8",
+        "react-css-styled": "^1.1.9",
         "react-moveable": "~0.50.7"
     }
 }
diff --git a/packages/helper/package.json b/packages/helper/package.json
index b0934b28a..55efa8baa 100644
--- a/packages/helper/package.json
+++ b/packages/helper/package.json
@@ -84,7 +84,7 @@
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "@daybrush/utils": "^1.11.0"
+        "@daybrush/utils": "^1.13.0"
     },
     "browserslist": {
         "production": [
diff --git a/packages/lit-moveable/package.json b/packages/lit-moveable/package.json
index d8b677a1a..e7f687f74 100755
--- a/packages/lit-moveable/package.json
+++ b/packages/lit-moveable/package.json
@@ -63,7 +63,7 @@
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "@daybrush/utils": "^1.12.1",
+        "@daybrush/utils": "^1.13.0",
         "framework-utils": "^1.1.0",
         "moveable": "~0.47.9"
     }
diff --git a/packages/moveable/package.json b/packages/moveable/package.json
index 26851eb5c..c274c0409 100644
--- a/packages/moveable/package.json
+++ b/packages/moveable/package.json
@@ -64,8 +64,9 @@
     "declaration/*"
   ],
   "dependencies": {
+    "@daybrush/utils": "^1.13.0",
     "@scena/event-emitter": "^1.0.5",
-    "croact": "^1.0.3",
+    "croact": "^1.0.4",
     "croact-moveable": "~0.3.8",
     "react-moveable": "~0.50.7"
   },
diff --git a/packages/moveable/src/MoveableManager.tsx b/packages/moveable/src/MoveableManager.tsx
index d35222a96..294f9a0eb 100644
--- a/packages/moveable/src/MoveableManager.tsx
+++ b/packages/moveable/src/MoveableManager.tsx
@@ -6,7 +6,7 @@ import {
     MoveableInterface,
     MoveableOptions, MoveableProperties,
 } from "react-moveable/types";
-import { camelize, isArray } from "@daybrush/utils";
+import { camelize, getDocument, isArray } from "@daybrush/utils";
 import { MoveableEventsParameters } from "./types";
 import { PROPERTIES, EVENTS, METHODS } from "./consts";
 import EventEmitter from "@scena/event-emitter";
@@ -67,7 +67,7 @@ class MoveableManager extends EventEmitter<MoveableEventsParameters> {
             this._warp = true;
             selfElement = parentElement;
         } else {
-            selfElement = document.createElement("div");
+            selfElement = getDocument(parentElement).createElement("div");
             parentElement.appendChild(selfElement);
         }
         this.containerProvider = renderSelf(
@@ -78,6 +78,8 @@ class MoveableManager extends EventEmitter<MoveableEventsParameters> {
             /> as any,
             selfElement,
         );
+
+        this.selfElement = selfElement;
         const target = nextOptions.target!;
         if (isArray(target) && target.length > 1) {
             this.updateRect();
diff --git a/packages/moveable/test/manual/iframe.html b/packages/moveable/test/manual/iframe.html
index 9a7bc0b74..b246af552 100644
--- a/packages/moveable/test/manual/iframe.html
+++ b/packages/moveable/test/manual/iframe.html
@@ -1,6 +1,7 @@
 <body>
     <iframe id="iframe" width="1000" height="1000"></iframe>
 </body>
+<script src="https://daybrush.com/selecto/release/latest/dist/selecto.js"></script>
 <script src="../../dist/moveable.js"></script>
 
 <script>
@@ -8,78 +9,204 @@
     const iframeDocument = iframeWindow.document;
     const iframeBody = iframeDocument.body;
     iframeBody.innerHTML = `
-    <div id="artwork" class="target target1"></div>
-    <div class="target2"></div>
-    <button>aa</button>
-<style>
-    .target1,
-    .target2 {
-        position: relative;
-        width: 200px;
-        height: 200px;
-        background: #f55;
-        border: 1px solid #333;
-    }
-</style>`;
+    <style>
+html, body, #root {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    color: #333;
+    background: #fdfdfd;
+}
 
-    let hasInteracted = false;
-    let isActive = true;
-    let moveable;
+.app {
+    position: relative;
+    min-height: 100%;
+    padding: 10px 20px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+}
 
-    moveable = new Moveable(iframeBody, {
-        target: iframeDocument.querySelector("#artwork"),
-        className: "moveable",
-        draggable: true,
-        resizable: true,
-        scalable: false,
-        rotatable: true,
-        isDisplaySnapDigit: false,
-        snappable: true,
-        snapThreshold: 5,
-        snapGap: false,
-        snapDirections: {
-            top: true,
-            right: true,
-            bottom: true,
-            left: true,
-            center: true,
-            middle: true,
-        },
-        elementSnapDirections: {
-            top: true,
-            right: true,
-            bottom: true,
-            left: true,
-            center: true,
-            middle: true,
-        },
-        // Enabling pinchable lets you use events that
-        // can be used in draggable, resizable, scalable, and rotateable.
-        pinchable: false, // ["resizable", "scalable", "rotatable"]
-        origin: false,
-        keepRatio: true,
-        // Resize, Scale Events at edges.
-        // edge: true,
-        throttleDrag: 0,
-        throttleResize: 0,
-        throttleRotate: 0,
-        padding: { left: 0, top: 0, right: 0, bottom: 0 },
-    });
+.container {
+    max-width: 800px;
+    ;
+}
+
+body {
+    background: #fff;
+}
+
+.logo {
+    position: relative;
+    width: 150px;
+    height: 150px;
+    margin: 0px auto;
+    font-size: 0;
+    text-align: left;
+}
+
+.logo.logos {
+    width: 320px;
+    text-align: center;
+}
+
+.logos .selecto {
+    padding: 16px;
+}
+
+.logo img {
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.cube {
+    display: inline-block;
+    border-radius: 5px;
+    width: 40px;
+    height: 40px;
+    margin: 4px;
+    background: #eee;
+    --color: #4af;
+}
+
+h1, .description {
+    text-align: center;
+}
+
+.button {
+    border: 1px solid #333;
+    color: #333;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    width: 120px;
+    height: 42px;
+    font-size: 14px;
+    letter-spacing: 1px;
+    transition: all ease 0.2s;
+    margin: 0px 5px;
+}
+
+.button:hover {
+    background: #333;
+    color: white;
+}
+
+.elements {
+    margin-top: 40px;
+    border: 2px solid #eee;
+}
+
+.selecto-area {
+    padding: 20px;
+}
 
-    /* draggable */
-    moveable.on("drag", e => {
-        console.log("drag", e.cssText);
-        e.target.style.cssText += e.cssText;
+#selecto1 .cube {
+    transition: all ease 0.2s;
+}
+
+.moveable #selecto1 .cube {
+    transition: none;
+}
+
+.selecto-area .selected {
+    color: #fff;
+    background: var(--color);
+}
+
+.scroll {
+    overflow: auto;
+    padding-top: 10px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.infinite-viewer, .scroll {
+    width: 100%;
+    height: 300px;
+    box-sizing: border-box;
+}
+
+.infinite-viewer .viewport {
+    padding-top: 10px;
+}
+
+.empty.elements {
+    border: none;
+}
+</style>
+<div class="moveable app">
+    <div class="container">
+        <div class="logo logos" id="logo">
+            <a href="https://github.com/daybrush/selecto" target="_blank"><img src="https://daybrush.com/selecto/images/256x256.png" class="selecto" /></a>
+            <a href="https://github.com/daybrush/moveable" target="_blank"><img src="https://daybrush.com/moveable/images/256x256.png" /></a>
+        </div>
+        <h1>Change the Moveable targets by selecting it.</h1>
+        <p class="description">You can drag and move targets and select them.</p>
+        <div class="elements selecto-area"></div>
+    </div>
+</div>`;
+
+
+    const container = iframeBody.querySelector(".container");
+    const cubes = [];
+    let targets = [];
+
+    for (let i = 0; i < 30; ++i) {
+        cubes.push(i);
+    }
+    container.querySelector(".selecto-area").innerHTML
+        = cubes.map(i => `<div class="cube"></div>`).join("");
+    const selecto = new Selecto({
+        container,
+        dragContainer: iframeWindow,
+        selectableTargets: [".selecto-area .cube"],
+        hitRate: 0,
+        selectByClick: true,
+        selectFromInside: false,
+        toggleContinueSelect: ["shift"],
+        ratio: 0,
     });
 
-    moveable.on("resize", e => {
-        console.log("resize", e.cssText);
-        e.target.style.cssText += e.cssText;
+    const moveable = new Moveable(container, {
+        draggable: true,
+    }).on("clickGroup", e => {
+        selecto.clickTarget(e.inputEvent, e.inputTarget);
+    }).on("drag", e => {
+        e.target.style.transform = e.transform;
+    }).on("dragGroup", e => {
+        e.events.forEach(ev => {
+            ev.target.style.transform = ev.transform;
+        });
     });
 
-    /* rotatable */
-    moveable.on("rotate", e => {
-        console.log("onRotate", e.cssText);
-        e.target.style.cssText += e.cssText;
+    selecto.on("dragStart", e => {
+        const target = e.inputEvent.target;
+        if (
+            moveable.isMoveableElement(target)
+            || targets.some(t => t === target || t.contains(target))
+        ) {
+            e.stop();
+        }
+    }).on("selectEnd", e => {
+        targets = e.selected;
+        moveable.target = targets;
+
+        console.log(targets);
+        if (e.isDragStart) {
+            e.inputEvent.preventDefault();
+
+            setTimeout(() => {
+                moveable.dragStart(e.inputEvent);
+            });
+        }
     });
 </script>
diff --git a/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts b/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts
index b49e04df9..952cbae09 100644
--- a/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts
+++ b/packages/ngx-moveable/projects/ngx-moveable/src/consts.ts
@@ -1,4 +1,4 @@
 // auto
 // eslint-disable-next-line max-len
-export const ANGULAR_MOVEABLE_INPUTS: ["target","dragTarget","dragContainer","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","dragFocusedInput","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","displayAroundControls","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","isDisplayGridGuidelines","snapDigit","snapThreshold","snapRenderThreshold","snapRotationThreshold","snapRotationDegress","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","hideThrottleDragRotateLine","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","origin","svgOrigin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"] = ["target","dragTarget","dragContainer","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","dragFocusedInput","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","displayAroundControls","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","isDisplayGridGuidelines","snapDigit","snapThreshold","snapRenderThreshold","snapRotationThreshold","snapRotationDegress","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","hideThrottleDragRotateLine","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","origin","svgOrigin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"];
+export const ANGULAR_MOVEABLE_INPUTS: ["target","dragTarget","dragContainer","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","dragFocusedInput","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","displayAroundControls","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","isDisplayGridGuidelines","snapDigit","snapThreshold","snapRenderThreshold","snapRotationThreshold","snapRotationDegress","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","hideThrottleDragRotateLine","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","origin","svgOrigin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","useDefaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"] = ["target","dragTarget","dragContainer","container","warpSelf","rootContainer","useResizeObserver","useMutationObserver","zoom","dragFocusedInput","transformOrigin","edge","ables","className","pinchThreshold","pinchOutside","triggerAblesSimultaneously","checkInput","cspNonce","translateZ","hideDefaultLines","props","flushSync","stopPropagation","preventClickEventOnDrag","preventClickDefault","viewContainer","persistData","useAccuratePosition","firstRenderState","linePadding","displayAroundControls","controlPadding","preventDefault","requestStyles","snappable","snapContainer","snapDirections","elementSnapDirections","snapGap","snapGridWidth","snapGridHeight","isDisplaySnapDigit","isDisplayInnerSnapDigit","isDisplayGridGuidelines","snapDigit","snapThreshold","snapRenderThreshold","snapRotationThreshold","snapRotationDegress","horizontalGuidelines","verticalGuidelines","elementGuidelines","bounds","innerBounds","snapDistFormat","maxSnapElementGuidelineDistance","maxSnapElementGapDistance","pinchable","draggable","throttleDrag","throttleDragRotate","hideThrottleDragRotateLine","startDragRotate","edgeDraggable","resizable","throttleResize","renderDirections","keepRatio","resizeFormat","keepRatioFinally","checkResizableError","scalable","throttleScale","warpable","rotatable","rotationPosition","throttleRotate","rotationTarget","rotateAroundControls","resolveAblesWithRotatable","scrollable","scrollContainer","scrollThreshold","scrollThrottleTime","getScrollPosition","scrollOptions","origin","svgOrigin","originDraggable","originRelative","clippable","defaultClipPath","customClipPath","clipRelative","clipArea","dragWithClip","clipTargetBounds","clipVerticalGuidelines","clipHorizontalGuidelines","clipSnapThreshold","roundable","roundRelative","minRoundControls","maxRoundControls","roundClickable","roundPadding","isDisplayShadowRoundControls","defaultGroupRotate","useDefaultGroupRotate","defaultGroupOrigin","groupable","groupableProps","targetGroups","hideChildMoveableDefaultLines","individualGroupable","individualGroupableProps","clickable","dragArea","passDragArea"];
 export const ANGULAR_MOVEABLE_OUTPUTS: ["beforeRenderStart","beforeRender","beforeRenderEnd","beforeRenderGroupStart","beforeRenderGroup","beforeRenderGroupEnd","changeTargets","snap","pinchStart","pinch","pinchEnd","pinchGroupStart","pinchGroup","pinchGroupEnd","dragStart","drag","dragEnd","dragGroupStart","dragGroup","dragGroupEnd","resizeStart","beforeResize","resize","resizeEnd","resizeGroupStart","beforeResizeGroup","resizeGroup","resizeGroupEnd","scaleStart","beforeScale","scale","scaleEnd","scaleGroupStart","beforeScaleGroup","scaleGroup","scaleGroupEnd","warpStart","warp","warpEnd","rotateStart","beforeRotate","rotate","rotateEnd","rotateGroupStart","beforeRotateGroup","rotateGroup","rotateGroupEnd","scroll","scrollGroup","dragOriginStart","dragOrigin","dragOriginEnd","clipStart","clip","clipEnd","roundStart","round","roundEnd","roundGroupStart","roundGroup","roundGroupEnd","click","clickGroup","renderStart","render","renderEnd","renderGroupStart","renderGroup","renderGroupEnd"] = ["beforeRenderStart","beforeRender","beforeRenderEnd","beforeRenderGroupStart","beforeRenderGroup","beforeRenderGroupEnd","changeTargets","snap","pinchStart","pinch","pinchEnd","pinchGroupStart","pinchGroup","pinchGroupEnd","dragStart","drag","dragEnd","dragGroupStart","dragGroup","dragGroupEnd","resizeStart","beforeResize","resize","resizeEnd","resizeGroupStart","beforeResizeGroup","resizeGroup","resizeGroupEnd","scaleStart","beforeScale","scale","scaleEnd","scaleGroupStart","beforeScaleGroup","scaleGroup","scaleGroupEnd","warpStart","warp","warpEnd","rotateStart","beforeRotate","rotate","rotateEnd","rotateGroupStart","beforeRotateGroup","rotateGroup","rotateGroupEnd","scroll","scrollGroup","dragOriginStart","dragOrigin","dragOriginEnd","clipStart","clip","clipEnd","roundStart","round","roundEnd","roundGroupStart","roundGroup","roundGroupEnd","click","clickGroup","renderStart","render","renderEnd","renderGroupStart","renderGroup","renderGroupEnd"];
diff --git a/packages/preact-moveable/package.json b/packages/preact-moveable/package.json
index 763b3f267..cbea41686 100644
--- a/packages/preact-moveable/package.json
+++ b/packages/preact-moveable/package.json
@@ -64,7 +64,7 @@
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "preact-css-styled": "^1.1.8",
+        "preact-css-styled": "^1.1.9",
         "react-moveable": "~0.50.7"
     }
 }
diff --git a/packages/react-moveable/package.json b/packages/react-moveable/package.json
index 8193cc9fb..91e9a8d64 100644
--- a/packages/react-moveable/package.json
+++ b/packages/react-moveable/package.json
@@ -120,7 +120,7 @@
         "wait-on": "^7.0.1"
     },
     "dependencies": {
-        "@daybrush/utils": "^1.12.1",
+        "@daybrush/utils": "^1.13.0",
         "@egjs/agent": "^2.2.1",
         "@egjs/children-differ": "^1.0.1",
         "@egjs/list-differ": "^1.0.0",
@@ -131,7 +131,7 @@
         "framework-utils": "^1.1.0",
         "gesto": "^1.19.0",
         "overlap-area": "^1.1.0",
-        "react-css-styled": "^1.1.8"
+        "react-css-styled": "^1.1.9"
     },
     "browserslist": {
         "production": [
diff --git a/packages/react-moveable/src/MoveableManager.tsx b/packages/react-moveable/src/MoveableManager.tsx
index f786c90e2..f391c7fc9 100644
--- a/packages/react-moveable/src/MoveableManager.tsx
+++ b/packages/react-moveable/src/MoveableManager.tsx
@@ -29,7 +29,7 @@ import { triggerAble, getTargetAbleGesto, getAbleGesto, checkMoveableTarget } fr
 import { plus } from "@scena/matrix";
 import {
     addClass, cancelAnimationFrame, find,
-    getKeys, IObject, removeClass, requestAnimationFrame,
+    getKeys, IObject, isNode, removeClass, requestAnimationFrame,
 } from "@daybrush/utils";
 import { renderLine } from "./renderDirections";
 import { fitPoints, getAreaSize, getOverlapSize, isInside } from "overlap-area";
@@ -353,7 +353,7 @@ export default class MoveableManager<T = {}>
         }
         let rect: Required<HitRect>;
 
-        if (el instanceof Element) {
+        if (isNode(el)) {
             const clientRect = el.getBoundingClientRect();
 
             rect = {
diff --git a/packages/react-moveable/src/utils.tsx b/packages/react-moveable/src/utils.tsx
index 0fbd408ab..b098cd911 100644
--- a/packages/react-moveable/src/utils.tsx
+++ b/packages/react-moveable/src/utils.tsx
@@ -7,6 +7,8 @@ import {
     getDocumentBody,
     getDocumentElement,
     getWindow,
+    isNode,
+    isWindow,
 } from "@daybrush/utils";
 import {
     multiply, invert,
@@ -1341,7 +1343,7 @@ export function isArrayFormat<T = any>(arr: any): arr is ArrayFormat<T> {
     if (!arr || !isObject(arr)) {
         return false;
     }
-    if (arr instanceof Element) {
+    if (isNode(arr)) {
         return false;
     }
     return isArray(arr) || "length" in arr;
@@ -1358,7 +1360,7 @@ export function getRefTarget<T extends Element = HTMLElement | SVGElement>(
     if (!target) {
         return null;
     }
-    if (target instanceof Node) {
+    if (isNode(target)) {
         return target;
     }
     if (isString(target)) {
@@ -1725,7 +1727,3 @@ export function sign(value: number) {
 export function abs(value: number) {
     return Math.abs(value);
 }
-
-export function isWindow(val: any): val is Window {
-    return val && "postMessage" in val && "blur" in val && "self" in val;
-}
diff --git a/packages/react-moveable/stories/5-Snap&Bound/0-Snap&Bound.stories.tsx b/packages/react-moveable/stories/5-Snap&Bound/0-Snap&Bound.stories.tsx
index fcb64269c..be8842ed4 100644
--- a/packages/react-moveable/stories/5-Snap&Bound/0-Snap&Bound.stories.tsx
+++ b/packages/react-moveable/stories/5-Snap&Bound/0-Snap&Bound.stories.tsx
@@ -174,7 +174,7 @@ export const SnapRotations = add("Snap Rotations", {
         await rotate({
             target: rotationControl,
             start: 0,
-            end: 85,
+            end: 87,
             duration: 100,
             interval: 10,
             baseTarget: target,
diff --git a/packages/react-moveable/stories/99-Tests/ReactDragAPIApp.tsx b/packages/react-moveable/stories/99-Tests/ReactDragAPIApp.tsx
index bc7ab6f4d..779118c89 100644
--- a/packages/react-moveable/stories/99-Tests/ReactDragAPIApp.tsx
+++ b/packages/react-moveable/stories/99-Tests/ReactDragAPIApp.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import Moveable from "@/react-moveable";
 
 
diff --git a/packages/snappable/package.json b/packages/snappable/package.json
index 1cdd62084..45f341170 100644
--- a/packages/snappable/package.json
+++ b/packages/snappable/package.json
@@ -61,7 +61,7 @@
         "typescript": "^4.5.0 <4.6.0"
     },
     "dependencies": {
-        "@daybrush/utils": "^1.12.1",
+        "@daybrush/utils": "^1.13.0",
         "overlap-area": "^1.1.0"
     }
 }
diff --git a/yarn.lock b/yarn.lock
index a16dcc93f..5b5f611e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2860,10 +2860,10 @@
     sinon "^7.4.1"
     source-map-support "^0.5.13"
 
-"@daybrush/utils@^0.10.0", "@daybrush/utils@^0.10.1", "@daybrush/utils@^0.11.0", "@daybrush/utils@^0.5.2", "@daybrush/utils@^0.7.1", "@daybrush/utils@^1.0.0", "@daybrush/utils@^1.1.1", "@daybrush/utils@^1.10.3", "@daybrush/utils@^1.11.0", "@daybrush/utils@^1.12.0", "@daybrush/utils@^1.12.1", "@daybrush/utils@^1.3.1", "@daybrush/utils@^1.4.0", "@daybrush/utils@^1.6.0", "@daybrush/utils@^1.7.1", "@daybrush/utils@^1.9.1":
-  version "1.12.1"
-  resolved "https://registry.npmjs.org/@daybrush/utils/-/utils-1.12.1.tgz#0daaa2a925fdfe8f42b4dbc202e22484878b64e2"
-  integrity sha512-VwtY+Pr+g2jpoXk9zQa5mmkXPG5XaHob1YJQZEs5XD35zma7QYaL5oWZY4dqRRhkD8YGonKms50kT9mThRkstg==
+"@daybrush/utils@^0.10.0", "@daybrush/utils@^0.10.1", "@daybrush/utils@^0.11.0", "@daybrush/utils@^0.5.2", "@daybrush/utils@^0.7.1", "@daybrush/utils@^1.0.0", "@daybrush/utils@^1.1.1", "@daybrush/utils@^1.10.3", "@daybrush/utils@^1.12.0", "@daybrush/utils@^1.13.0", "@daybrush/utils@^1.3.1", "@daybrush/utils@^1.4.0", "@daybrush/utils@^1.6.0", "@daybrush/utils@^1.7.1", "@daybrush/utils@^1.9.1":
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/@daybrush/utils/-/utils-1.13.0.tgz#ea70a60864130da476406fdd1d465e3068aea0ff"
+  integrity sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==
 
 "@design-systems/utils@2.12.0":
   version "2.12.0"
@@ -10674,21 +10674,21 @@ critters@0.0.16:
     postcss "^8.3.7"
     pretty-bytes "^5.3.0"
 
-croact-css-styled@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.npmjs.org/croact-css-styled/-/croact-css-styled-1.1.8.tgz#518aee0e66c3b1f84dd73c16f57bfd3531b83173"
-  integrity sha512-CYR9eUsjDeDqT5+aSJN1L1zVhaDR8FOHh92u5rDwTbJ1l2pISGFqwg6L0Fy1GXDoh+tUmuS4zYHoAC21DR+gUQ==
+croact-css-styled@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.npmjs.org/croact-css-styled/-/croact-css-styled-1.1.9.tgz#05ec164ebb8a6d61ae7b26ac27af5e83fac47f48"
+  integrity sha512-G7yvRiVJ3Eoj0ov2h2xR4312hpOzATay2dGS9clK8yJQothjH1sBXIyvOeRP5wBKD9mPcKcoUXPCPsl0tQog4w==
   dependencies:
-    "@daybrush/utils" "^1.0.0"
-    css-styled "~1.0.7"
+    "@daybrush/utils" "^1.13.0"
+    css-styled "~1.0.8"
     framework-utils "^1.1.0"
 
-croact@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/croact/-/croact-1.0.3.tgz#796cb6bf8966eea3e6cc7546781dc9c7631c6e3c"
-  integrity sha512-BgediQptaQjOnJmttpC3DM8ShuOXnY3pJ/T4lnupO1Aoyb4LOI+mu9AzjPnoWantiitpRSkR2WMxg7JhDgaNQQ==
+croact@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/croact/-/croact-1.0.4.tgz#9bce583e13ee61dbbfc70781318c1421210e28b0"
+  integrity sha512-9GhvyzTY/IVUrMQ2iz/mzgZ8+NcjczmIo/t4FkC1CU0CEcau6v6VsEih4jkTa4ZmRgYTF0qXEZLObCzdDFplpw==
   dependencies:
-    "@daybrush/utils" "^1.11.0"
+    "@daybrush/utils" "^1.13.0"
     "@egjs/list-differ" "^1.0.0"
 
 croffle@^0.0.17:
@@ -10914,12 +10914,12 @@ css-styled@^1.0.1:
     "@daybrush/utils" "^1.0.0"
     string-hash "^1.1.3"
 
-css-styled@~1.0.7:
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/css-styled/-/css-styled-1.0.7.tgz#08bb17676b27e62b3978d1072c3dbbebb96edb51"
-  integrity sha512-ud6VclnjgwWxkxz3vrLTv7oEKP3xP/VeydTj5VAqa8zp5LFqKnHb7oSMgW+Z1R70Oz7sfBNEkv/H+yE9FhM4HQ==
+css-styled@~1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/css-styled/-/css-styled-1.0.8.tgz#c9c05dc4abdef5571033090bfb8cfc5e19429974"
+  integrity sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==
   dependencies:
-    "@daybrush/utils" "^1.11.0"
+    "@daybrush/utils" "^1.13.0"
 
 css-to-mat@^1.0.3:
   version "1.0.3"
@@ -22557,12 +22557,12 @@ preact-context@^1.1.3:
   resolved "https://registry.npmjs.org/preact-context/-/preact-context-1.1.4.tgz"
   integrity sha512-gcCjPJ65R0MiW9hDu8W/3WAmyTElIvwLyEO6oLQiM6/TbLKLxCpBCWV8GJjx52TTEyUr60HLDcmoCXZlslelzQ==
 
-preact-css-styled@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.npmjs.org/preact-css-styled/-/preact-css-styled-1.1.8.tgz#63dbdbb8627978c30be63ee9f365406c0fe19e05"
-  integrity sha512-fxeyFNlz+jJPzC7IYL4Nrt7fH9IXb96tGqY35rGWD94MeBORcSxBm3VOvQNgcVoe7BqXdyUkqpeJd23kuUOWVA==
+preact-css-styled@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.npmjs.org/preact-css-styled/-/preact-css-styled-1.1.9.tgz#fbed74da49623d607c17ac476fa3092a2d98f513"
+  integrity sha512-/3IBaLY3c0sofqePCTthFrZ+gpXHAllfok6j1k6rBRfiJM+Lla4gkKcZTGybQkYY2PKcs/BVtZ4uosL4m1WE7w==
   dependencies:
-    css-styled "~1.0.7"
+    css-styled "~1.0.8"
     framework-utils "^1.1.0"
 
 preact-render-to-string@^3.8.2:
@@ -23259,12 +23259,12 @@ react-compat-ruler@~0.8.1:
   dependencies:
     "@scena/react-ruler" "~0.9.1"
 
-react-css-styled@^1.0.2, react-css-styled@^1.1.8, react-css-styled@~1.0.4:
-  version "1.1.8"
-  resolved "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.1.8.tgz#8fac644fb04c9c4049d897f827511dceaf12cc0b"
-  integrity sha512-IdgkIcIBDeCavoI/51Msq/+yT4y8ThoPtguzKslvVc2ubYNvXa9K4W1T3HZdGVOv0jTXFQHD1FMbYa9kiEUFTQ==
+react-css-styled@^1.0.2, react-css-styled@^1.1.9, react-css-styled@~1.0.4:
+  version "1.1.9"
+  resolved "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.1.9.tgz#a7cc948e49f72b2f7fb1393bd85416a8293afab3"
+  integrity sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==
   dependencies:
-    css-styled "~1.0.7"
+    css-styled "~1.0.8"
     framework-utils "^1.1.0"
 
 react-docgen-typescript@^2.1.1: