From fe62564f6e6d3bc8a07492272404a25ad624a6fa Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Thu, 13 Mar 2025 22:01:21 +0800
Subject: [PATCH] add @dnd-kit support.

---
 deno.lock    | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 package.json |  3 +++
 src/main.tsx | 39 +++++++++++++++++++++------------------
 3 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/deno.lock b/deno.lock
index 11ed555..df1f7c3 100644
--- a/deno.lock
+++ b/deno.lock
@@ -1,6 +1,9 @@
 {
   "version": "4",
   "specifiers": {
+    "npm:@dnd-kit/core@^6.3.1": "6.3.1_react@19.0.0_react-dom@19.0.0__react@19.0.0",
+    "npm:@dnd-kit/modifiers@9": "9.0.0_@dnd-kit+core@6.3.1__react@19.0.0__react-dom@19.0.0___react@19.0.0_react@19.0.0_react-dom@19.0.0__react@19.0.0",
+    "npm:@dnd-kit/sortable@10": "10.0.0_@dnd-kit+core@6.3.1__react@19.0.0__react-dom@19.0.0___react@19.0.0_react@19.0.0_react-dom@19.0.0__react@19.0.0",
     "npm:@eslint/js@^9.19.0": "9.21.0",
     "npm:@iconify/react@^5.2.0": "5.2.0_react@19.0.0",
     "npm:@tauri-apps/api@2": "2.2.0",
@@ -182,6 +185,48 @@
         "@babel/helper-validator-identifier"
       ]
     },
+    "@dnd-kit/accessibility@3.1.1_react@19.0.0": {
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "dependencies": [
+        "react",
+        "tslib"
+      ]
+    },
+    "@dnd-kit/core@6.3.1_react@19.0.0_react-dom@19.0.0__react@19.0.0": {
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "dependencies": [
+        "@dnd-kit/accessibility",
+        "@dnd-kit/utilities",
+        "react",
+        "react-dom",
+        "tslib"
+      ]
+    },
+    "@dnd-kit/modifiers@9.0.0_@dnd-kit+core@6.3.1__react@19.0.0__react-dom@19.0.0___react@19.0.0_react@19.0.0_react-dom@19.0.0__react@19.0.0": {
+      "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/utilities",
+        "react",
+        "tslib"
+      ]
+    },
+    "@dnd-kit/sortable@10.0.0_@dnd-kit+core@6.3.1__react@19.0.0__react-dom@19.0.0___react@19.0.0_react@19.0.0_react-dom@19.0.0__react@19.0.0": {
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "dependencies": [
+        "@dnd-kit/core",
+        "@dnd-kit/utilities",
+        "react",
+        "tslib"
+      ]
+    },
+    "@dnd-kit/utilities@3.2.2_react@19.0.0": {
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "dependencies": [
+        "react",
+        "tslib"
+      ]
+    },
     "@esbuild/aix-ppc64@0.25.0": {
       "integrity": "sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ=="
     },
@@ -1612,6 +1657,9 @@
   "workspace": {
     "packageJson": {
       "dependencies": [
+        "npm:@dnd-kit/core@^6.3.1",
+        "npm:@dnd-kit/modifiers@9",
+        "npm:@dnd-kit/sortable@10",
         "npm:@eslint/js@^9.19.0",
         "npm:@iconify/react@^5.2.0",
         "npm:@tauri-apps/api@2",
diff --git a/package.json b/package.json
index 9edb5a7..89c7de2 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,9 @@
     "tauri:dev": "tauri dev"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@iconify/react": "^5.2.0",
     "@tauri-apps/plugin-dialog": "~2.2.0",
     "@tauri-apps/plugin-notification": "~2.2.1",
diff --git a/src/main.tsx b/src/main.tsx
index 7687115..9ed8128 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,6 +1,7 @@
 // Load global styles
 import './index.css';
 // Load foundations
+import { DndContext } from '@dnd-kit/core';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
@@ -17,24 +18,26 @@ import Settings from './pages/Settings';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <Notifications>
-      <EstimWatchProvider>
-        <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<Layout />}>
-              <Route index element={<Device />} />
-              <Route path="/play" element={<PlayControl />} />
-              <Route path="/library" element={<PatternLibrary />} />
-              <Route path="/pattern-editor">
-                <Route index element={<PatternNavigator />} />
-                <Route path="new" element={<CreatePattern />} />
-                <Route path="edit" element={<PatternEditor />} />
+    <DndContext>
+      <Notifications>
+        <EstimWatchProvider>
+          <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<Layout />}>
+                <Route index element={<Device />} />
+                <Route path="/play" element={<PlayControl />} />
+                <Route path="/library" element={<PatternLibrary />} />
+                <Route path="/pattern-editor">
+                  <Route index element={<PatternNavigator />} />
+                  <Route path="new" element={<CreatePattern />} />
+                  <Route path="edit" element={<PatternEditor />} />
+                </Route>
+                <Route path="/settings" element={<Settings />} />
               </Route>
-              <Route path="/settings" element={<Settings />} />
-            </Route>
-          </Routes>
-        </BrowserRouter>
-      </EstimWatchProvider>
-    </Notifications>
+            </Routes>
+          </BrowserRouter>
+        </EstimWatchProvider>
+      </Notifications>
+    </DndContext>
   </React.StrictMode>,
 );