From 280af2d3acce2585893851552a0109ead6a8253e Mon Sep 17 00:00:00 2001
From: jiaxinLiu1 <liji23zn@student.ju.se>
Date: Mon, 15 Jun 2026 16:47:50 +0800
Subject: [PATCH 1/2] Update: Implement Sprite panel spacing

---
 spx-gui/package-lock.json                     |  28 +--
 .../components/editor/common/EditorList.vue   |  19 +-
 ui/components/spx/builder-component.lib.pen   | 194 +++++++-----------
 3 files changed, 83 insertions(+), 158 deletions(-)

diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index 8af7064aa0..ad56cb3cb0 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -243,7 +243,6 @@
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
       "integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.23.0",
@@ -280,7 +279,6 @@
       "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
       "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@marijn/find-cluster-break": "^1.0.0"
       }
@@ -290,7 +288,6 @@
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.8.tgz",
       "integrity": "sha512-XcE9fcnkHCbWkjeKyi0lllwXmBLtyYb5dt89dJyx23I9+LSh5vZDIuk7OLG4VM1lgrXZQcY6cxyZyk5WVPRv/A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.5.0",
         "crelt": "^1.0.6",
@@ -1803,7 +1800,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -2887,7 +2883,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.48.0.tgz",
       "integrity": "sha512-jCzKdm/QK0Kg4V4IK/oMlRZlY+QOcdjv89U2NgKHZk1CYTj82/RVSx1mV/0gqCVMJ/DA+Zf/S4NBWNF8GQ+eqQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.48.0",
         "@typescript-eslint/types": "8.48.0",
@@ -3620,7 +3615,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3833,7 +3827,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4320,7 +4313,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4380,7 +4372,6 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -4460,7 +4451,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-10.6.2.tgz",
       "integrity": "sha512-nA5yUs/B1KmKzvC42fyD0+l9Yd+LtEpVhWRbXuDj0e+ZURcTtyRbMDWUeJmTAh2wC6jC83raS63anNM2YT3NPw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
@@ -4796,7 +4786,6 @@
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz",
       "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tabbable": "^6.3.0"
       }
@@ -4834,7 +4823,6 @@
       "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
       "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -5573,7 +5561,6 @@
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
       "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -5604,8 +5591,7 @@
           "type": "github",
           "url": "https://github.com/sponsors/lavrton"
         }
-      ],
-      "peer": true
+      ]
     },
     "node_modules/leven": {
       "version": "4.1.0",
@@ -7139,7 +7125,6 @@
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
       "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -7738,8 +7723,7 @@
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
       "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/source-map-js": {
       "version": "1.2.1",
@@ -7961,8 +7945,7 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
       "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tapable": {
       "version": "2.3.2",
@@ -8026,7 +8009,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8116,7 +8098,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8361,7 +8342,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.0.tgz",
       "integrity": "sha512-fPGaRNj9Zytaf8LEiBhY7Z6ijnFKdzU/+mL8EFBaKr7Vw1/FWcTBAMW0wLPJAGMPX38ZPVCVgLceWiEqeoqL2Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@oxc-project/runtime": "0.115.0",
         "lightningcss": "^1.32.0",
@@ -8585,7 +8565,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz",
       "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.25",
         "@vue/compiler-sfc": "3.5.25",
@@ -8892,7 +8871,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz",
       "integrity": "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index 7b823fec62..f75023719a 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="flex-[1_1_0] flex">
     <div class="flex-none flex flex-col border-r border-dividing-line-2">
-      <div
-        ref="itemsWrapper"
-        v-radar="listRadarInfo"
-        class="items mx-1.5 flex-[1_1_0] flex flex-col gap-2 overflow-y-auto"
-      >
+      <div ref="itemsWrapper" v-radar="listRadarInfo" class="items flex-[1_1_0] flex flex-col gap-2 overflow-y-auto">
         <slot></slot>
       </div>
       <UIDropdownWithTooltip>
@@ -84,18 +80,13 @@ useDragSortable(sortableList, itemsWrapper, {
 
 <style scoped>
 .items {
-  /* Here we keep the horizontal padding no more than `10px`, */
-  /* as SortableJS uses `10` as `spacer` when deciding whether to put dragging item to the end of the list. */
-  /* Padding no more than `10px` disables the `_ghostIsLast` check. */
-  /* See details in https://github.com/SortableJS/Sortable/blob/ddd059717333d07b5b1125b7e1dc89514734bcf0/src/Sortable.js#L1822 */
-  padding: 12px 10px;
+  padding: 12px;
 }
 
 .items:deep(.sortable-ghost-item) {
-  /* Shadow-like effect */
-  /* TODO: Use other tools like svg-filter to achieve shadow-like effect, to avoid coupling here with `UIBlockItem` */
-  border-color: var(--ui-color-grey-400) !important;
-  background-color: var(--ui-color-grey-400) !important;
+  opacity: 0.6;
+  filter: grayscale(1);
+  box-shadow: var(--ui-box-shadow-sm);
 }
 
 .items:deep(.sortable-ghost-item *) {
diff --git a/ui/components/spx/builder-component.lib.pen b/ui/components/spx/builder-component.lib.pen
index da0846e1e8..00c488341c 100644
--- a/ui/components/spx/builder-component.lib.pen
+++ b/ui/components/spx/builder-component.lib.pen
@@ -13166,7 +13166,7 @@
                       "name": "Content",
                       "clip": true,
                       "width": 512,
-                      "height": 2267.999999999999,
+                      "height": 2327.999999999999,
                       "fill": "$grey500",
                       "cornerRadius": "$radius-1",
                       "gap": 10,
@@ -13237,7 +13237,7 @@
                               "rotation": 1.2424041724466865e-17,
                               "fill": "$yellow500",
                               "textGrowth": "fixed-width",
-                              "width": 4147.235277971853,
+                              "width": 4211.1137667735,
                               "content": "Modifying the username may have the following impacts.",
                               "lineHeight": 1.5714285714285714,
                               "textAlignVertical": "middle",
@@ -13659,7 +13659,7 @@
                       "name": "input-box",
                       "clip": true,
                       "width": 512,
-                      "height": 1683.9999999999998,
+                      "height": 1743.9999999999995,
                       "fill": "$grey300",
                       "cornerRadius": "$radius-4",
                       "layout": "vertical",
@@ -13707,7 +13707,7 @@
                       "fill": "$grey800",
                       "textGrowth": "fixed-width-height",
                       "width": 131,
-                      "height": 22.578288643982088,
+                      "height": 25.058605672520287,
                       "flipX": false,
                       "flipY": false
                     },
@@ -13718,7 +13718,7 @@
                       "rotation": 0.017214400057139954,
                       "clip": true,
                       "width": 511.9999547915265,
-                      "height": 567.54969629156,
+                      "height": 630.3838178786741,
                       "fill": "$grey300",
                       "cornerRadius": "$radius-4",
                       "layout": "vertical",
@@ -13849,7 +13849,7 @@
                               "rotation": 1.2424041724466865e-17,
                               "fill": "$yellow500",
                               "textGrowth": "fixed-width",
-                              "width": 4128.497709975444,
+                              "width": 4192.375653862601,
                               "content": "There are errors in the project code. Some references may not be updated automatically. You can check the code and update them manually after renaming.",
                               "lineHeight": 1.5714285714285714,
                               "textAlignVertical": "middle",
@@ -20349,11 +20349,10 @@
             {
               "type": "frame",
               "id": "u99dE",
-              "x": 803.0003872281231,
+              "x": 803,
               "y": 551,
               "name": "Navigation/Editor/Default",
               "reusable": true,
-              "rotation": -0.0004437307428662429,
               "slot": [
                 "Z0Lxj",
                 "txsGe",
@@ -33816,7 +33815,7 @@
                               "type": "ref",
                               "ref": "tfxWX",
                               "x": 24,
-                              "y": 14.999999999999993,
+                              "y": 14.99999999999999,
                               "children": [
                                 {
                                   "id": "y7oK4",
@@ -34425,7 +34424,7 @@
                               "type": "ref",
                               "ref": "tfxWX",
                               "x": 24,
-                              "y": 14.999999999999993,
+                              "y": 14.99999999999999,
                               "children": [
                                 {
                                   "id": "Ta3Aw",
@@ -34929,7 +34928,7 @@
                               "type": "ref",
                               "ref": "tfxWX",
                               "x": 24,
-                              "y": 14.999999999999991,
+                              "y": 14.999999999999993,
                               "children": [
                                 {
                                   "id": "p7X114",
@@ -36092,7 +36091,7 @@
                               "type": "ref",
                               "ref": "m6A5K",
                               "x": 0,
-                              "y": 5.682361148042482e-14,
+                              "y": 5.682361148043401e-14,
                               "children": [
                                 {
                                   "id": "lpatT",
@@ -36105,8 +36104,8 @@
                               "id": "OsOUh",
                               "type": "ref",
                               "ref": "m6A5K",
-                              "x": 247.99999999994955,
-                              "y": 5.682361148042482e-14,
+                              "x": 247.99999999998707,
+                              "y": 5.682361148043401e-14,
                               "children": [
                                 {
                                   "id": "rfnOE",
@@ -36119,8 +36118,8 @@
                               "id": "zRRXP",
                               "type": "ref",
                               "ref": "m6A5K",
-                              "x": 495.99999999989905,
-                              "y": 5.6823611480424834e-14,
+                              "x": 495.9999999999742,
+                              "y": 5.682361148043399e-14,
                               "children": [
                                 {
                                   "id": "dJ1TI",
@@ -36133,8 +36132,8 @@
                               "id": "ryGDv",
                               "type": "ref",
                               "ref": "m6A5K",
-                              "x": 743.9999999998487,
-                              "y": 5.6823611480424834e-14,
+                              "x": 743.9999999999612,
+                              "y": 5.682361148043402e-14,
                               "children": [
                                 {
                                   "id": "f38PK",
@@ -36157,7 +36156,7 @@
                               "type": "ref",
                               "ref": "m6A5K",
                               "x": 0,
-                              "y": 5.682361148042482e-14,
+                              "y": 5.682361148043401e-14,
                               "children": [
                                 {
                                   "id": "eeHrD",
@@ -36170,8 +36169,8 @@
                               "id": "z5Xx2",
                               "type": "ref",
                               "ref": "m6A5K",
-                              "x": 247.99999999994955,
-                              "y": 5.682361148042482e-14,
+                              "x": 247.99999999998707,
+                              "y": 5.682361148043401e-14,
                               "children": [
                                 {
                                   "id": "aGosX",
@@ -36184,8 +36183,8 @@
                               "id": "e6vJm",
                               "type": "ref",
                               "ref": "m6A5K",
-                              "x": 495.99999999989905,
-                              "y": 5.6823611480424834e-14,
+                              "x": 495.9999999999742,
+                              "y": 5.682361148043399e-14,
                               "children": [
                                 {
                                   "id": "u0AjqQ",
@@ -36198,8 +36197,8 @@
                               "id": "r7bhS",
                               "type": "ref",
                               "ref": "m6A5K",
-                              "x": 743.9999999998487,
-                              "y": 5.6823611480424834e-14,
+                              "x": 743.9999999999612,
+                              "y": 5.682361148043402e-14,
                               "children": [
                                 {
                                   "id": "TGis1",
@@ -36750,7 +36749,7 @@
                   "id": "P5uRZ",
                   "type": "ref",
                   "ref": "u99dE",
-                  "x": 0.0003717389978524254,
+                  "x": 0,
                   "y": 0,
                   "children": [
                     {
@@ -36944,7 +36943,7 @@
                   "id": "F3pBad",
                   "type": "ref",
                   "ref": "u99dE",
-                  "x": 0.00037173899785242556,
+                  "x": 0,
                   "y": 0,
                   "width": "fit_content(896)",
                   "children": [
@@ -39420,7 +39419,7 @@
                   "id": "SAnVj",
                   "type": "ref",
                   "ref": "u99dE",
-                  "x": 0.00037173899785242556,
+                  "x": 0,
                   "y": 0,
                   "children": [
                     {
@@ -39444,7 +39443,7 @@
                       "type": "ref",
                       "ref": "hRBgA",
                       "x": 249,
-                      "y": 289.9965304367398,
+                      "y": 290.00000000000006,
                       "children": [
                         {
                           "id": "cQXKV",
@@ -39484,13 +39483,17 @@
                   "id": "kRTQo",
                   "type": "ref",
                   "ref": "u99dE",
-                  "x": 0.0003717389978524254,
+                  "x": 0,
                   "y": 0,
+                  "rotation": 0,
                   "children": [
                     {
                       "id": "tzbHJ",
                       "type": "ref",
                       "ref": "di4iU",
+                      "x": 0,
+                      "y": 0,
+                      "rotation": 0,
                       "descendants": {
                         "VR1t7": {
                           "clip": true
@@ -39529,13 +39532,10 @@
                               "type": "frame",
                               "id": "O9SwC",
                               "name": "Frame 1010106299",
-                              "width": "fit_content(120)",
+                              "width": "fit_content(112)",
                               "height": "fill_container",
                               "layout": "vertical",
-                              "padding": [
-                                "$space-3",
-                                "$space-4"
-                              ],
+                              "padding": "$space-3",
                               "children": [
                                 {
                                   "type": "frame",
@@ -39615,7 +39615,7 @@
                                   "id": "l0ZLw",
                                   "type": "ref",
                                   "ref": "1xCKp",
-                                  "x": 52,
+                                  "x": 48,
                                   "y": 14,
                                   "children": [
                                     {
@@ -39771,7 +39771,7 @@
                   "id": "v4QmfU",
                   "type": "ref",
                   "ref": "u99dE",
-                  "x": 0.0003717389978524254,
+                  "x": 0,
                   "y": 0,
                   "children": [
                     {
@@ -39811,13 +39811,10 @@
                               "type": "frame",
                               "id": "h5miwo",
                               "name": "Frame 1010106299",
-                              "width": "fit_content(120)",
+                              "width": "fit_content(112)",
                               "height": "fill_container",
                               "layout": "vertical",
-                              "padding": [
-                                "$space-3",
-                                "$space-4"
-                              ],
+                              "padding": "$space-3",
                               "children": [
                                 {
                                   "type": "frame",
@@ -39897,7 +39894,7 @@
                                   "id": "O2cIOj",
                                   "type": "ref",
                                   "ref": "1xCKp",
-                                  "x": 52,
+                                  "x": 48,
                                   "y": 14,
                                   "children": [
                                     {
@@ -39946,7 +39943,7 @@
                                   "children": [
                                     {
                                       "type": "frame",
-                                      "id": "eIDgm",
+                                      "id": "wOLD0",
                                       "name": "Content",
                                       "width": "fill_container",
                                       "height": 22,
@@ -39955,62 +39952,30 @@
                                       "children": [
                                         {
                                           "type": "group",
-                                          "id": "r9aj4x",
+                                          "id": "uauqB",
                                           "layout": "horizontal",
                                           "gap": "$space-2",
                                           "alignItems": "center",
                                           "children": [
                                             {
-                                              "type": "frame",
-                                              "id": "ZwJbr",
-                                              "name": "Label",
-                                              "clip": true,
-                                              "width": 833.6787391364617,
-                                              "alignItems": "center",
-                                              "children": [
-                                                {
-                                                  "type": "text",
-                                                  "id": "DoSZL",
-                                                  "name": "Typography/4",
-                                                  "fill": "$grey1000",
-                                                  "content": "Costume01",
-                                                  "lineHeight": 1.5714285714285714,
-                                                  "textAlignVertical": "middle",
-                                                  "fontFamily": "Inter",
-                                                  "fontSize": 14,
-                                                  "fontWeight": "normal"
-                                                }
-                                              ]
+                                              "id": "dm5sJ",
+                                              "type": "ref",
+                                              "ref": "0rSuk",
+                                              "x": 0,
+                                              "y": 0,
+                                              "content": " Animations01"
                                             },
                                             {
-                                              "type": "frame",
-                                              "id": "a9XviW",
-                                              "name": "XBuilder_Newlcons_01",
-                                              "clip": true,
-                                              "justifyContent": "center",
-                                              "alignItems": "center",
-                                              "children": [
-                                                {
-                                                  "type": "frame",
-                                                  "id": "N3UGL",
-                                                  "name": "Ic01-i",
-                                                  "clip": true,
-                                                  "justifyContent": "center",
-                                                  "alignItems": "center",
-                                                  "children": [
-                                                    {
-                                                      "type": "text",
-                                                      "id": "eXJCu",
-                                                      "name": "i",
-                                                      "fill": "$grey900",
-                                                      "content": "l",
-                                                      "fontFamily": "XBuilder_NewIcons_01",
-                                                      "fontSize": 14,
-                                                      "fontWeight": "normal"
-                                                    }
-                                                  ]
+                                              "id": "qaXDQ",
+                                              "type": "ref",
+                                              "ref": "JCkrf",
+                                              "x": 102,
+                                              "y": 4,
+                                              "descendants": {
+                                                "myItR": {
+                                                  "fontSize": 14
                                                 }
-                                              ]
+                                              }
                                             }
                                           ]
                                         }
@@ -40145,7 +40110,7 @@
                   "id": "m17uT",
                   "type": "ref",
                   "ref": "u99dE",
-                  "x": 0.00037209885882604187,
+                  "x": 0,
                   "y": 0,
                   "children": [
                     {
@@ -40185,13 +40150,10 @@
                               "type": "frame",
                               "id": "vsRYR",
                               "name": "Frame 1010106299",
-                              "width": "fit_content(120)",
+                              "width": "fit_content(112)",
                               "height": "fill_container",
                               "layout": "vertical",
-                              "padding": [
-                                "$space-3",
-                                "$space-4"
-                              ],
+                              "padding": "$space-3",
                               "children": [
                                 {
                                   "type": "frame",
@@ -40271,7 +40233,7 @@
                                   "id": "yh9VH",
                                   "type": "ref",
                                   "ref": "1xCKp",
-                                  "x": 52,
+                                  "x": 48,
                                   "y": 14,
                                   "children": [
                                     {
@@ -40419,7 +40381,7 @@
                   "id": "J398Qi",
                   "type": "ref",
                   "ref": "u99dE",
-                  "x": 0.00037173899785242556,
+                  "x": 0,
                   "y": 0,
                   "children": [
                     {
@@ -40459,13 +40421,10 @@
                               "type": "frame",
                               "id": "jxuPj",
                               "name": "Frame 1010106299",
-                              "width": "fit_content(120)",
+                              "width": "fit_content(112)",
                               "height": "fill_container",
                               "layout": "vertical",
-                              "padding": [
-                                "$space-3",
-                                "$space-4"
-                              ],
+                              "padding": "$space-3",
                               "children": [
                                 {
                                   "type": "frame",
@@ -40545,7 +40504,7 @@
                                   "id": "UaHq3",
                                   "type": "ref",
                                   "ref": "1xCKp",
-                                  "x": 52,
+                                  "x": 48,
                                   "y": 14,
                                   "children": [
                                     {
@@ -59399,7 +59358,7 @@
                   "id": "Eq1GX",
                   "type": "ref",
                   "ref": "u99dE",
-                  "x": 0.00037173899785242556,
+                  "x": 0,
                   "y": 0,
                   "children": [
                     {
@@ -59439,13 +59398,10 @@
                               "type": "frame",
                               "id": "HsAlI",
                               "name": "Frame 1010106299",
-                              "width": "fit_content(120)",
+                              "width": "fit_content(112)",
                               "height": "fill_container",
                               "layout": "vertical",
-                              "padding": [
-                                "$space-3",
-                                "$space-4"
-                              ],
+                              "padding": "$space-3",
                               "children": [
                                 {
                                   "type": "frame",
@@ -59525,7 +59481,7 @@
                                   "id": "CC87T",
                                   "type": "ref",
                                   "ref": "1xCKp",
-                                  "x": 52,
+                                  "x": 48,
                                   "y": 14,
                                   "children": [
                                     {
@@ -59635,7 +59591,7 @@
                                       "id": "citkV",
                                       "type": "ref",
                                       "ref": "Hjqqt",
-                                      "x": 0.004037685562188744,
+                                      "x": 4.004037685562189,
                                       "y": 0,
                                       "children": [
                                         {
@@ -64464,7 +64420,7 @@
                           "type": "ref",
                           "ref": "tfxWX",
                           "x": 16,
-                          "y": 8.999999999999991,
+                          "y": 8.999999999999993,
                           "children": [
                             {
                               "id": "eSaJO",
@@ -64860,7 +64816,7 @@
                           "type": "ref",
                           "ref": "tfxWX",
                           "x": 16,
-                          "y": 8.999999999999977,
+                          "y": 8.999999999999979,
                           "children": [
                             {
                               "id": "GYG0X",
@@ -104154,7 +104110,7 @@
                                   "id": "Q28NZ",
                                   "name": "icon/publish-colorful",
                                   "rotation": -0.05413253639937609,
-                                  "width": 5912.781083544392,
+                                  "width": 6157.9871916281645,
                                   "height": 16,
                                   "cornerRadius": "$radius-full",
                                   "layout": "none",
@@ -104392,7 +104348,7 @@
                                   "id": "05ZuN",
                                   "name": "icon/publish-colorful",
                                   "rotation": -0.05413253639937609,
-                                  "width": 5912.781083544392,
+                                  "width": 6157.9871916281645,
                                   "height": 16,
                                   "cornerRadius": "$radius-full",
                                   "layout": "none",
@@ -104860,7 +104816,7 @@
                                   "id": "cNqrQ",
                                   "name": "icon/publish-colorful",
                                   "rotation": -0.05413253639937609,
-                                  "width": 5915.397213475809,
+                                  "width": 6160.605395468696,
                                   "height": 16,
                                   "cornerRadius": "$radius-full",
                                   "layout": "none",

From eb4c44965013d376751d4288db3bf9e6f404943a Mon Sep 17 00:00:00 2001
From: jiaxinLiu1 <liji23zn@student.ju.se>
Date: Mon, 15 Jun 2026 18:03:56 +0800
Subject: [PATCH 2/2] Fix EditorList drag spacing and restore lockfile metadata

---
 spx-gui/package-lock.json                     | 28 +++++++++++++++++--
 .../components/editor/common/EditorList.vue   | 10 +++++--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/spx-gui/package-lock.json b/spx-gui/package-lock.json
index ad56cb3cb0..8af7064aa0 100644
--- a/spx-gui/package-lock.json
+++ b/spx-gui/package-lock.json
@@ -243,6 +243,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.3.tgz",
       "integrity": "sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.23.0",
@@ -279,6 +280,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
       "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@marijn/find-cluster-break": "^1.0.0"
       }
@@ -288,6 +290,7 @@
       "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.8.tgz",
       "integrity": "sha512-XcE9fcnkHCbWkjeKyi0lllwXmBLtyYb5dt89dJyx23I9+LSh5vZDIuk7OLG4VM1lgrXZQcY6cxyZyk5WVPRv/A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@codemirror/state": "^6.5.0",
         "crelt": "^1.0.6",
@@ -1800,6 +1803,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -2883,6 +2887,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.48.0.tgz",
       "integrity": "sha512-jCzKdm/QK0Kg4V4IK/oMlRZlY+QOcdjv89U2NgKHZk1CYTj82/RVSx1mV/0gqCVMJ/DA+Zf/S4NBWNF8GQ+eqQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.48.0",
         "@typescript-eslint/types": "8.48.0",
@@ -3615,6 +3620,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3827,6 +3833,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -4313,6 +4320,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.1.tgz",
       "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -4372,6 +4380,7 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
       "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -4451,6 +4460,7 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-10.6.2.tgz",
       "integrity": "sha512-nA5yUs/B1KmKzvC42fyD0+l9Yd+LtEpVhWRbXuDj0e+ZURcTtyRbMDWUeJmTAh2wC6jC83raS63anNM2YT3NPw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "natural-compare": "^1.4.0",
@@ -4786,6 +4796,7 @@
       "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.6.tgz",
       "integrity": "sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tabbable": "^6.3.0"
       }
@@ -4823,6 +4834,7 @@
       "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
       "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -5561,6 +5573,7 @@
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
       "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -5591,7 +5604,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/lavrton"
         }
-      ]
+      ],
+      "peer": true
     },
     "node_modules/leven": {
       "version": "4.1.0",
@@ -7125,6 +7139,7 @@
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
       "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
+      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -7723,7 +7738,8 @@
       "version": "1.15.6",
       "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
       "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/source-map-js": {
       "version": "1.2.1",
@@ -7945,7 +7961,8 @@
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
       "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.3.2",
@@ -8009,6 +8026,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8098,6 +8116,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8342,6 +8361,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.0.tgz",
       "integrity": "sha512-fPGaRNj9Zytaf8LEiBhY7Z6ijnFKdzU/+mL8EFBaKr7Vw1/FWcTBAMW0wLPJAGMPX38ZPVCVgLceWiEqeoqL2Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/runtime": "0.115.0",
         "lightningcss": "^1.32.0",
@@ -8565,6 +8585,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.25.tgz",
       "integrity": "sha512-YLVdgv2K13WJ6n+kD5owehKtEXwdwXuj2TTyJMsO7pSeKw2bfRNZGjhB7YzrpbMYj5b5QsUebHpOqR3R3ziy/g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.25",
         "@vue/compiler-sfc": "3.5.25",
@@ -8871,6 +8892,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz",
       "integrity": "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/spx-gui/src/components/editor/common/EditorList.vue b/spx-gui/src/components/editor/common/EditorList.vue
index f75023719a..b9686b65a6 100644
--- a/spx-gui/src/components/editor/common/EditorList.vue
+++ b/spx-gui/src/components/editor/common/EditorList.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="flex-[1_1_0] flex">
     <div class="flex-none flex flex-col border-r border-dividing-line-2">
-      <div ref="itemsWrapper" v-radar="listRadarInfo" class="items flex-[1_1_0] flex flex-col gap-2 overflow-y-auto">
+      <div
+        ref="itemsWrapper"
+        v-radar="listRadarInfo"
+        class="items mx-0.5 flex-[1_1_0] flex flex-col gap-2 overflow-y-auto"
+      >
         <slot></slot>
       </div>
       <UIDropdownWithTooltip>
@@ -80,7 +84,9 @@ useDragSortable(sortableList, itemsWrapper, {
 
 <style scoped>
 .items {
-  padding: 12px;
+  /* Keep horizontal padding within the SortableJS drag-end threshold. */
+  /* The extra 2px visual spacing comes from the wrapper margin above. */
+  padding: 12px 10px;
 }
 
 .items:deep(.sortable-ghost-item) {