diff --git a/app/components/DraggableWindow.vue b/app/components/DraggableWindow.vue
index 741dd8d2..bed4658a 100644
--- a/app/components/DraggableWindow.vue
+++ b/app/components/DraggableWindow.vue
@@ -1,53 +1,64 @@
 <script setup lang="ts">
+import Moveable, { type OnDrag, type OnResize, type OnResizeStart } from 'vue3-moveable'
+
 interface Props {
   x?: number
   y?: number
+  initialWidth?: number
+  initialHeight?: number
+  minWidth?: number
+  minHeight?: number
   maxInset?: number
+  resizable?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   x: 0,
   y: 0,
-  maxInset: 0,
+  initialWidth: 240,
+  initialHeight: 240,
+  maxInset: 7,
+  resizable: false,
 })
 
-let stickRight = false
-let stickBottom = false
+const pos = readonly({
+  x: props.x,
+  y: props.y,
+})
 
-const dragWindow = ref<HTMLElement | null>(null)
-const dragHandle = ref<HTMLElement | null>(null)
+const dragWindow = useTemplateRef<HTMLElement>('dragWindow')
+const dragHandle = useTemplateRef<HTMLElement>('dragHandle')
 
-const { x: dragX, y: dragY, style, isDragging } = useDraggable(dragWindow, {
-  initialValue: { x: props.x, y: props.y },
-  handle: dragHandle,
-  preventDefault: true,
-  onEnd() {
-    stickRight = false
-    stickBottom = false
-    limitPosition()
-  },
-})
+// #region : Draggable
+const isDragging = ref(false)
+function handleDrag(e: OnDrag) {
+  isDragging.value = true
+  e.target.style.transform = e.transform
+}
 // #endregion
 
 // #region : Avoid the window stayed outside
+const moveableRef = useTemplateRef<InstanceType<typeof Moveable>>('moveableRef')
+
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 const dragWindowBounding = useElementBounding(dragWindow)
 
 function limitPosition() {
+  let x = dragWindowBounding.left.value
+  let y = dragWindowBounding.top.value
   if (dragWindowBounding.left.value < props.maxInset) {
-    dragX.value = props.maxInset
+    x = props.maxInset
   }
-  else if (stickRight || dragWindowBounding.right.value > windowWidth.value - props.maxInset) {
-    dragX.value = windowWidth.value - props.maxInset - dragWindowBounding.width.value
-    stickRight = true
+  else if (dragWindowBounding.right.value > windowWidth.value - props.maxInset) {
+    x = Math.max(windowWidth.value - props.maxInset - dragWindowBounding.width.value, 0)
   }
 
   if (dragWindowBounding.top.value < props.maxInset) {
-    dragY.value = props.maxInset
+    y = props.maxInset
   }
-  else if (stickBottom || dragWindowBounding.bottom.value > windowHeight.value - props.maxInset) {
-    dragY.value = windowHeight.value - props.maxInset - dragWindowBounding.height.value
-    stickBottom = true
+  else if (dragWindowBounding.bottom.value > windowHeight.value - props.maxInset) {
+    y = Math.max(windowHeight.value - props.maxInset - dragWindowBounding.height.value, 0)
   }
+  moveableRef.value?.request('draggable', { x, y }, true)
 }
 
 onMounted(() => {
@@ -55,27 +66,111 @@ onMounted(() => {
   useEventListener('resize', limitPositionDebounced, { passive: true })
 })
 // #endregion
+
+// #region : Resizable
+function handleResize(e: OnResize) {
+  e.target.style.width = `${e.width}px`
+  e.target.style.height = `${e.height}px`
+  e.target.style.transform = e.drag.transform
+}
+function handleResizeStart(e: OnResizeStart) {
+  e.setMin([240, 160])
+}
+// #endregion
+
+// #region : Reset
+function reset() {
+  if (!dragWindow.value || !moveableRef.value)
+    return
+  dragWindow.value.style.top = ''
+  dragWindow.value.style.left = ''
+  dragWindow.value.style.width = ''
+  dragWindow.value.style.height = ''
+  dragWindow.value.style.transform = ''
+  limitPosition()
+  moveableRef.value.updateRect()
+}
+// #endregion
 </script>
 
 <template>
-  <div
-    ref="dragWindow"
-    class="draggable-window"
-    :class="{
-      'pointer-events-none': isDragging,
-    }"
-    fixed
-    :style
-    z-floating
-  >
+  <Teleport to="body">
     <div
-      ref="dragHandle"
-      class="@hover:(bg-gray/10 op100)"
-      flex="~ items-center justify-center"
-      draggable pointer-events-auto mxa w-20 cursor-move rounded-full op25
+      ref="dragWindow"
+      class="drag-window"
+      :class="{
+        'pointer-events-none': isDragging,
+        'pointer-events-auto': !isDragging,
+      }"
+      :style="{
+        '--moveable-left': `${pos.x}px`,
+        '--moveable-top': `${pos.y}px`,
+        '--moveable-width': `${props.initialWidth}px`,
+        '--moveable-height': `${props.initialHeight}px`,
+      }"
+      fixed h-full w-full
+      v-bind="$attrs"
     >
-      <div i-mdi-drag-horizontal ma text-size-xl />
+      <div
+        ref="dragHandle"
+        class="drag-handle left-50% top-0 transform-translate-x--50% transform-translate-y--100% @hover:(bg-gray/10 op100)"
+        flex="~ items-center justify-center"
+        draggable absolute mxa h-6 w-20 cursor-move rounded-full op25
+        @dblclick.left="reset"
+      >
+        <div i-mdi-drag-horizontal ma text-size-xl />
+      </div>
+      <slot />
     </div>
-    <slot />
-  </div>
+    <Moveable
+      ref="moveableRef"
+      :target="dragWindow"
+      :origin="false"
+      :draggable="true"
+      :drag-target="dragHandle"
+      :throttle-drag="3"
+      :resizable="resizable"
+      :throttle-resize="3"
+      :snappable="true"
+      :bounds="{
+        left: 7,
+        right: 7,
+        top: 31,
+        bottom: 7,
+        position: 'css',
+      }"
+      :style="{
+        '--bounds-color': 'transparent',
+        '--moveable-color': 'transparent',
+      }"
+      @resize="handleResize"
+      @resize-start="handleResizeStart"
+      @drag="handleDrag"
+      @drag-end="isDragging = false"
+    />
+  </Teleport>
 </template>
+
+<style>
+.drag-window {
+  left: var(--moveable-left);
+  top: var(--moveable-top);
+  width: var(--moveable-width);
+  height: var(--moveable-height);
+  max-width: calc(100vw - 14px);
+  max-height: calc(100vh - 38px);
+  max-height: calc(100dvh - 38px);
+}
+.drag-window:hover + .moveable-control-box,
+.moveable-control-box:hover {
+  --moveable-control-opacity: 0.2;
+}
+.moveable-control-box .moveable-control {
+  opacity: var(--moveable-control-opacity, 0);
+  background: rgba(0 0 0 / 0.5) !important;
+  transition: opacity 150ms ease;
+}
+.moveable-control-box .moveable-control:hover {
+  --moveable-control-opacity: 1;
+}
+</style>
diff --git a/app/components/editors/SongEditor.vue b/app/components/editors/SongEditor.vue
index c368cac7..47247207 100644
--- a/app/components/editors/SongEditor.vue
+++ b/app/components/editors/SongEditor.vue
@@ -307,10 +307,17 @@ onMounted(() => {
 </script>
 
 <template>
-  <DraggableWindow :x="windowWidth - 32 - 480" :y="60">
-    <div flex="~ col">
-      <YouTubePlayer w-120 rounded-lg border="~ base" />
-      <div flex="~ gap-2 items-center" mt--2 w-max self-end p1 px2 text-sm floating-glass>
+  <DraggableWindow
+    id="editor-video"
+    :x="windowWidth - 32 - 480"
+    :y="84"
+    :initial-width="480"
+    :initial-height="300"
+    resizable
+  >
+    <div flex="~ col" relative h-full w-full pb-6.5>
+      <YouTubePlayer h-full w-full rounded-lg border="~ base" />
+      <div flex="~ gap-2 items-center" absolute bottom-0 mt--2 self-end p1 px2 text-sm floating-glass>
         <!-- <IconButton
           :icon="controls.status.value === 'playing' ? 'i-uil-pause' : 'i-uil-play'"
           @click="controls.toggle()"
@@ -484,3 +491,10 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style>
+#editor-video iframe {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
diff --git a/package.json b/package.json
index 18d78279..9ed38597 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "uqr": "^0.1.2",
     "valibot": "^0.42.1",
     "vue-virtual-scroller": "2.0.0-beta.8",
+    "vue3-moveable": "^0.28.0",
     "weq8": "^0.2.2"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b45adf6..98f20250 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       vue-virtual-scroller:
         specifier: 2.0.0-beta.8
         version: 2.0.0-beta.8(vue@3.5.6(typescript@5.6.3))
+      vue3-moveable:
+        specifier: ^0.28.0
+        version: 0.28.0
       weq8:
         specifier: ^0.2.2
         version: 0.2.2
@@ -403,6 +406,9 @@ packages:
     resolution: {integrity: sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==}
     engines: {node: '>=6.9.0'}
 
+  '@cfcs/core@0.0.6':
+    resolution: {integrity: sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==}
+
   '@clack/core@0.3.4':
     resolution: {integrity: sha512-H4hxZDXgHtWTwV3RAVenqcC4VbJZNegbBjlPvzOzCouXtS2y3sDvlO3IsbrPNWuLWPPlYVYPghQdSF64683Ldw==}
 
@@ -415,6 +421,9 @@ packages:
     resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
     engines: {node: '>=16.13'}
 
+  '@daybrush/utils@1.13.0':
+    resolution: {integrity: sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==}
+
   '@dprint/formatter@0.3.0':
     resolution: {integrity: sha512-N9fxCxbaBOrDkteSOzaCqwWjso5iAe+WJPsHC021JfHNj2ThInPNEF13ORDKta3llq5D1TlclODCvOvipH7bWQ==}
 
@@ -424,6 +433,18 @@ packages:
   '@dprint/toml@0.6.2':
     resolution: {integrity: sha512-Mk5unEANsL/L+WHYU3NpDXt1ARU5bNU5k5OZELxaJodDycKG6RoRnSlZXpW6+7UN2PSnETAFVUdKrh937ZwtHA==}
 
+  '@egjs/agent@2.4.4':
+    resolution: {integrity: sha512-cvAPSlUILhBBOakn2krdPnOGv5hAZq92f1YHxYcfu0p7uarix2C6Ia3AVizpS1SGRZGiEkIS5E+IVTLg1I2Iog==}
+
+  '@egjs/children-differ@1.0.1':
+    resolution: {integrity: sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==}
+
+  '@egjs/component@3.0.5':
+    resolution: {integrity: sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==}
+
+  '@egjs/list-differ@1.0.1':
+    resolution: {integrity: sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==}
+
   '@es-joy/jsdoccomment@0.48.0':
     resolution: {integrity: sha512-G6QUWIcC+KvSwXNsJyDTHvqUdNoAVJPPgkc3+Uk4WBKqZvoXhlvazOgm9aL0HwihJLQf0l+tOE2UFzXBqCqgDw==}
     engines: {node: '>=16'}
@@ -1579,6 +1600,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@scena/dragscroll@1.4.0':
+    resolution: {integrity: sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==}
+
+  '@scena/event-emitter@1.0.5':
+    resolution: {integrity: sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==}
+
+  '@scena/matrix@1.1.1':
+    resolution: {integrity: sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==}
+
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
@@ -2520,6 +2550,17 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  croact-css-styled@1.1.9:
+    resolution: {integrity: sha512-G7yvRiVJ3Eoj0ov2h2xR4312hpOzATay2dGS9clK8yJQothjH1sBXIyvOeRP5wBKD9mPcKcoUXPCPsl0tQog4w==}
+
+  croact-moveable@0.9.0:
+    resolution: {integrity: sha512-fc3bieV6CdqqZFtzsSLi9KmvUMFW3oakUfhPCls1BxKjOfUfn8rktteGED2341A/Qghy8tI3Hm6SdocIc68IKg==}
+    peerDependencies:
+      croact: ^1.0.4
+
+  croact@1.0.4:
+    resolution: {integrity: sha512-9GhvyzTY/IVUrMQ2iz/mzgZ8+NcjczmIo/t4FkC1CU0CEcau6v6VsEih4jkTa4ZmRgYTF0qXEZLObCzdDFplpw==}
+
   croner@8.1.1:
     resolution: {integrity: sha512-1VdUuRnQP4drdFkS8NKvDR1NBgevm8TOuflcaZEKsxw42CxonjW/2vkj1AKlinJb4ZLwBcuWF9GiPr7FQc6AQA==}
     engines: {node: '>=18.0'}
@@ -2549,6 +2590,12 @@ packages:
   css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
 
+  css-styled@1.0.8:
+    resolution: {integrity: sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==}
+
+  css-to-mat@1.1.1:
+    resolution: {integrity: sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==}
+
   css-tree@2.2.1:
     resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
@@ -3183,6 +3230,9 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  framework-utils@1.1.0:
+    resolution: {integrity: sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg==}
+
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -3219,6 +3269,9 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  gesto@1.19.4:
+    resolution: {integrity: sha512-hfr/0dWwh0Bnbb88s3QVJd1ZRJeOWcgHPPwmiH6NnafDYvhTsxg+SLYu+q/oPNh9JS3V+nlr6fNs8kvPAtcRDQ==}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -3668,6 +3721,12 @@ packages:
   jszip@3.10.1:
     resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
 
+  keycode@2.2.1:
+    resolution: {integrity: sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==}
+
+  keycon@1.4.0:
+    resolution: {integrity: sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -4051,6 +4110,9 @@ packages:
   mlly@1.7.1:
     resolution: {integrity: sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==}
 
+  moveable@0.53.0:
+    resolution: {integrity: sha512-71jS9zIoQzMhnNvduhg4tUEdm23+fO/40FN7muVMbZvVwbTku2MIxxLhnU4qFvxI4oVxn75l79SbtgjuA+s7Pw==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -4242,6 +4304,9 @@ packages:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  overlap-area@1.1.0:
+    resolution: {integrity: sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==}
+
   p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -4647,6 +4712,15 @@ packages:
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
+  react-css-styled@1.1.9:
+    resolution: {integrity: sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==}
+
+  react-moveable@0.56.0:
+    resolution: {integrity: sha512-FmJNmIOsOA36mdxbrc/huiE4wuXSRlmon/o+/OrfNhSiYYYL0AV5oObtPluEhb2Yr/7EfYWBHTxF5aWAvjg1SA==}
+
+  react-selecto@1.26.3:
+    resolution: {integrity: sha512-Ubik7kWSnZyQEBNro+1k38hZaI1tJarE+5aD/qsqCOA1uUBSjgKVBy3EWRzGIbdmVex7DcxznFZLec/6KZNvwQ==}
+
   read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -4796,6 +4870,9 @@ packages:
     resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
     engines: {node: '>=4'}
 
+  selecto@1.26.3:
+    resolution: {integrity: sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==}
+
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -5605,6 +5682,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue3-moveable@0.28.0:
+    resolution: {integrity: sha512-vplQO0XkxVEtXMDh2/lZE+c5kMycGXAfYFMvbwFKi8UVYzVk8MTgVHr4fxO9Z+4i4Rb+U/IEIgkhHRMAbx8FJg==}
+
   vue@3.5.6:
     resolution: {integrity: sha512-zv+20E2VIYbcJOzJPUWp03NOGFhMmpCKOfSxVTmCYyYFFko48H9tmuQFzYj7tu4qX1AeXlp9DmhIP89/sSxxhw==}
     peerDependencies:
@@ -6029,6 +6109,10 @@ snapshots:
       '@babel/helper-validator-identifier': 7.24.7
       to-fast-properties: 2.0.0
 
+  '@cfcs/core@0.0.6':
+    dependencies:
+      '@egjs/component': 3.0.5
+
   '@clack/core@0.3.4':
     dependencies:
       picocolors: 1.1.0
@@ -6044,12 +6128,24 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
+  '@daybrush/utils@1.13.0': {}
+
   '@dprint/formatter@0.3.0': {}
 
   '@dprint/markdown@0.17.5': {}
 
   '@dprint/toml@0.6.2': {}
 
+  '@egjs/agent@2.4.4': {}
+
+  '@egjs/children-differ@1.0.1':
+    dependencies:
+      '@egjs/list-differ': 1.0.1
+
+  '@egjs/component@3.0.5': {}
+
+  '@egjs/list-differ@1.0.1': {}
+
   '@es-joy/jsdoccomment@0.48.0':
     dependencies:
       comment-parser: 1.4.1
@@ -7234,6 +7330,19 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.0':
     optional: true
 
+  '@scena/dragscroll@1.4.0':
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+
+  '@scena/event-emitter@1.0.5':
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
+  '@scena/matrix@1.1.1':
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
   '@sec-ant/readable-stream@0.4.1': {}
 
   '@shikijs/core@1.21.0':
@@ -8498,6 +8607,35 @@ snapshots:
 
   create-require@1.1.1: {}
 
+  croact-css-styled@1.1.9:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      css-styled: 1.0.8
+      framework-utils: 1.1.0
+
+  croact-moveable@0.9.0(croact@1.0.4):
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/agent': 2.4.4
+      '@egjs/children-differ': 1.0.1
+      '@egjs/list-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      '@scena/matrix': 1.1.1
+      croact: 1.0.4
+      croact-css-styled: 1.1.9
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      overlap-area: 1.1.0
+      react-css-styled: 1.1.9
+      react-moveable: 0.56.0
+
+  croact@1.0.4:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/list-differ': 1.0.1
+
   croner@8.1.1: {}
 
   cronstrue@2.50.0: {}
@@ -8522,6 +8660,15 @@ snapshots:
       domutils: 3.1.0
       nth-check: 2.1.1
 
+  css-styled@1.0.8:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
+  css-to-mat@1.1.1:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/matrix': 1.1.1
+
   css-tree@2.2.1:
     dependencies:
       mdn-data: 2.0.28
@@ -9328,6 +9475,8 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  framework-utils@1.1.0: {}
+
   fresh@0.5.2: {}
 
   fs-extra@11.2.0:
@@ -9363,6 +9512,11 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
+  gesto@1.19.4:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+
   get-caller-file@2.0.5: {}
 
   get-func-name@2.0.2: {}
@@ -9819,6 +9973,15 @@ snapshots:
       readable-stream: 2.3.8
       setimmediate: 1.0.5
 
+  keycode@2.2.1: {}
+
+  keycon@1.4.0:
+    dependencies:
+      '@cfcs/core': 0.0.6
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+      keycode: 2.2.1
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -10384,6 +10547,14 @@ snapshots:
       pkg-types: 1.2.0
       ufo: 1.5.4
 
+  moveable@0.53.0:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@scena/event-emitter': 1.0.5
+      croact: 1.0.4
+      croact-moveable: 0.9.0(croact@1.0.4)
+      react-moveable: 0.56.0
+
   mri@1.2.0: {}
 
   mrmime@2.0.0: {}
@@ -10769,6 +10940,10 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  overlap-area@1.1.0:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+
   p-limit@2.3.0:
     dependencies:
       p-try: 2.2.0
@@ -11117,6 +11292,31 @@ snapshots:
       defu: 6.1.4
       destr: 2.0.3
 
+  react-css-styled@1.1.9:
+    dependencies:
+      css-styled: 1.0.8
+      framework-utils: 1.1.0
+
+  react-moveable@0.56.0:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/agent': 2.4.4
+      '@egjs/children-differ': 1.0.1
+      '@egjs/list-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      '@scena/matrix': 1.1.1
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      overlap-area: 1.1.0
+      react-css-styled: 1.1.9
+      react-selecto: 1.26.3
+
+  react-selecto@1.26.3:
+    dependencies:
+      selecto: 1.26.3
+
   read-pkg-up@7.0.1:
     dependencies:
       find-up: 4.1.0
@@ -11303,6 +11503,19 @@ snapshots:
       extend-shallow: 2.0.1
       kind-of: 6.0.3
 
+  selecto@1.26.3:
+    dependencies:
+      '@daybrush/utils': 1.13.0
+      '@egjs/children-differ': 1.0.1
+      '@scena/dragscroll': 1.4.0
+      '@scena/event-emitter': 1.0.5
+      css-styled: 1.0.8
+      css-to-mat: 1.1.1
+      framework-utils: 1.1.0
+      gesto: 1.19.4
+      keycon: 1.4.0
+      overlap-area: 1.1.0
+
   semver@5.7.2: {}
 
   semver@6.3.1: {}
@@ -12202,6 +12415,11 @@ snapshots:
       vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.6(typescript@5.6.3))
       vue-resize: 2.0.0-alpha.1(vue@3.5.6(typescript@5.6.3))
 
+  vue3-moveable@0.28.0:
+    dependencies:
+      framework-utils: 1.1.0
+      moveable: 0.53.0
+
   vue@3.5.6(typescript@5.6.3):
     dependencies:
       '@vue/compiler-dom': 3.5.6