feat: enhance studio app with left panel toggle and loading state

- Added a left panel toggle button in the header to show/hide the ViewList component.
- Integrated loading state management in the studio store for better user feedback during data fetching.
- Updated the ViewList component to utilize a dropdown menu for editing and deleting views.
- Improved UI elements with consistent border styles and loading indicators.
- Refactored the DataItemForm and ViewFormItem components for better user experience and added clipboard copy functionality.
- Introduced a new DropdownMenu component for better dropdown handling across the application.

web/package.json

@@ -30,6 +30,7 @@
     "@kevisual/registry": "^0.0.1",
     "@kevisual/router": "^0.0.52",
     "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/vite": "^4.1.18",

web/pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       '@radix-ui/react-checkbox':
         specifier: ^1.3.3
         version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dropdown-menu':
+        specifier: ^2.1.16
+        version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-label':
         specifier: ^2.1.8
         version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -560,6 +563,21 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/react-dom@2.1.6':
+    resolution: {integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
   '@handsontable/pikaday@1.0.0':
     resolution: {integrity: sha512-1VN6N38t5/DcjJ7y7XUYrDx1LuzvvzlrFdBdMG90Qo1xc8+LXHqbWbsTEm5Ec5gXTEbDEO53vUT35R+2COmOyg==}
 
@@ -790,6 +808,19 @@ packages:
   '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-checkbox@1.3.3':
     resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
     peerDependencies:
@@ -803,6 +834,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
@@ -834,6 +878,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.11':
     resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
     peerDependencies:
@@ -847,6 +900,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.3':
     resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
     peerDependencies:
@@ -891,6 +957,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
@@ -943,6 +1035,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -1015,6 +1120,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-size@1.1.1':
     resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
     peerDependencies:
@@ -1024,6 +1138,9 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
   '@rc-component/async-validator@5.0.4':
     resolution: {integrity: sha512-qgGdcVIF604M9EqjNF0hbUTz42bz/RDtxWdWuU5EQe3hi7M8ob54B6B35rOsvX5eSvIHIzT9iH1R3n+hk3CGfg==}
     engines: {node: '>=14.x'}
@@ -4160,6 +4277,23 @@ snapshots:
   '@esbuild/win32-x64@0.25.10':
     optional: true
 
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
+  '@floating-ui/utils@0.2.10': {}
+
   '@handsontable/pikaday@1.0.0': {}
 
   '@img/colour@1.0.0':
@@ -4461,6 +4595,15 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -4477,6 +4620,18 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       react: 19.2.3
@@ -4511,6 +4666,12 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
   '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -4524,6 +4685,21 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       react: 19.2.3
@@ -4557,6 +4733,50 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.7)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -4595,6 +4815,23 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
@@ -4649,6 +4886,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.7)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.7
+
   '@radix-ui/react-use-size@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
@@ -4656,6 +4900,8 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/rect@1.1.1': {}
+
   '@rc-component/async-validator@5.0.4':
     dependencies:
       '@babel/runtime': 7.28.4

web/src/apps/studio/index.tsx

@@ -1,17 +1,24 @@
 import { toast, ToastContainer } from 'react-toastify';
 import { useStudioStore } from './store.ts';
 import { useEffect, useState } from 'react';
-import { MonitorPlay, Play } from 'lucide-react';
+import { MonitorPlay, Play, PanelLeft, PanelLeftClose } from 'lucide-react';
 import { Panel, Group } from 'react-resizable-panels'
 import { ViewList } from '../view/list.tsx';
+import { useShallow } from 'zustand/shallow';
+
 export const AppProvider = () => {
+  const { showLeftPanel } = useStudioStore(useShallow((state) => ({
+    showLeftPanel: state.showLeftPanel,
+  })));
   return <main className='w-full h-screen flex flex-col overflow-hidden'>
     <Group className="h-full flex-1 overflow-hidden">
-      <Panel defaultSize={300} minSize={250} maxSize={500} className="border-r overflow-auto">
+      {showLeftPanel && <Panel defaultSize={300} minSize={250} maxSize={500} className="border-r border-gray-300 overflow-auto">
         <ViewList />
-      </Panel>
+      </Panel>}
       <Panel>
+        <WrapperHeader>
           <App />
+        </WrapperHeader>
       </Panel>
     </Group>
     <ToastContainer
@@ -27,7 +34,22 @@ export const AppProvider = () => {
       theme="light" />
   </main>
 }
-
+export const WrapperHeader = (props: { children: React.ReactNode }) => {
+  const showLeftPanel = useStudioStore(state => state.showLeftPanel);
+  const setShowLeftPanel = useStudioStore(state => state.setShowLeftPanel);
+  return <div className='h-full'>
+    <div className="w-full h-12 flex items-center justify-between px-4 border-b border-gray-200 bg-white">
+      <div className="cursor-pointer text-gray-600 hover:text-gray-900 transition-colors" title="Kevisual Router Studio" onClick={() => {
+        setShowLeftPanel(!showLeftPanel);
+      }}>
+        {showLeftPanel ? <PanelLeftClose size={16} /> : <PanelLeft size={16} />}
+      </div>
+    </div>
+    <div style={{ height: 'calc(100% - 3rem)' }} className="overflow-auto">
+      {props.children}
+    </div>
+  </div >
+}
 interface RouteItem {
   id: string;
   path?: string;
@@ -37,7 +59,7 @@ interface RouteItem {
 }
 
 export const App = () => {
-  const { routes, getRouteList, run } = useStudioStore();
+  const { routes, getRouteList, run, loading } = useStudioStore();
   const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());
   const [visibleIds, setVisibleIds] = useState<Set<string>>(new Set());
 
@@ -68,7 +90,8 @@ export const App = () => {
 
   return (
     <div className="max-w-5xl mx-auto p-6 h-full overflow-auto">
-      <div className="space-y-1">
+      {loading && <div className="text-center text-gray-500 mb-4">加载中...</div>}
+      <div className={`space-y-1 ${loading ? "opacity-50 pointer-events-none" : ""}`}>
         {routes.map((route: RouteItem) => {
           const isExpanded = expandedIds.has(route.id);
           const isIdVisible = visibleIds.has(route.id);
@@ -77,7 +100,7 @@ export const App = () => {
           return (
             <div
               key={route.id}
-              className="px-4 py-3 border-b border-gray-100 hover:bg-gray-50/50 transition-all duration-200"
+              className="px-4 py-3 border-b border-gray-100 hover:bg-gray-50/50 transition-all duration-200 animate-in fade-in slide-in-from-top-1 duration-400"
             >
               <div className="flex flex-col gap-2.5">
                 {/* ID and Path/Key in one line */}
@@ -120,7 +143,7 @@ export const App = () => {
                     className="cursor-pointer group"
                   >
                     <div
-                      className={`text-gray-700 transition-colors duration-200 cursor-pointer ${isExpanded ? 'text-gray-900' : 'group-hover:text-gray-900'
+                      className={`text-gray-700 transition-colors duration-200 cursor-pointer overflow-hidden ${isExpanded ? 'text-gray-900 animate-expand-in' : 'group-hover:text-gray-900 max-h-0 opacity-0'
                         }`}
                     >
                       {isExpanded ? (

web/src/apps/studio/store.ts

@@ -4,7 +4,13 @@ import { query } from '@/modules/query.ts'
 import { toast } from 'react-toastify';
 import { use } from '@kevisual/context'
 import { MyCache } from '@kevisual/cache'
+import { persist } from 'zustand/middleware';
 
+const historyReplace = (url: string) => {
+  if (window.history.replaceState) {
+    window.history.replaceState(null, '', url);
+  }
+}
 type RouteItem = {
   id: string;
   path?: string;
@@ -16,8 +22,10 @@ type RouteItem = {
 type RouteViewList = Array<RouterViewData>;
 
 interface StudioState {
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
   routes: Array<RouteItem>;
-  getRouteList: () => Promise<void>;
+  getRouteList: (viewId?: string) => Promise<void>;
   run: (route: RouteItem) => Promise<void>;
   queryProxy?: QueryProxy;
   init: (force?: boolean) => Promise<{ queryProxy: QueryProxy }>;
@@ -27,20 +35,40 @@ interface StudioState {
   updateRouteView: (view: RouterViewData) => Promise<void>;
   deleteRouteView: (id: string) => Promise<void>;
   currentView?: RouterViewData;
+  setCurrentView: (view?: RouterViewData) => Promise<void>;
+  showLeftPanel: boolean;
+  setShowLeftPanel: (show: boolean) => void;
 }
 const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-export const useStudioStore = create<StudioState>((set, get) => ({
+
+export const useStudioStore = create<StudioState>()(
+  persist(
+    (set, get) => ({
+      loading: false,
+      setLoading: (loading: boolean) => set({ loading }),
       routes: [],
       getRouteList: async () => {
         await get().getCurrentView();
         const state = await get().init();
-
+        let currentView: RouterViewData | undefined = get().currentView;
         let queryProxy = state.queryProxy;
-    const url = new URL(window.location.href);
+        const viewId = currentView?.viewId ?? ''
-    const viewId = url.searchParams.get('viewId') || 'default';
         const routes: any[] = await queryProxy.listRoutes(() => true, { viewId });
         set({ routes });
-    get().getViewList();
+      },
+      setCurrentView: async (view?: RouterViewData) => {
+        const beforeView = get().currentView;
+        set({ currentView: view, routes: [] });
+        const viewId = view?.viewId || '';
+        const url = new URL(window.location.href);
+        if (viewId) {
+          url.searchParams.set('viewId', viewId);
+        } else {
+          url.searchParams.delete('viewId');
+        }
+        historyReplace(url.toString());
+        await get().init(beforeView?.id !== view?.id);
+        await get().getRouteList();
       },
       getViewList: async () => {
         const res = await query.post({ path: 'views', key: 'list' });
@@ -58,6 +86,7 @@ export const useStudioStore = create<StudioState>((set, get) => ({
         const res = await query.post({ path: 'views', key: 'current', data: { viewId: viewId } });
         if (res.code === 200) {
           const view = res.data as RouterViewData;
+          view.viewId = viewId;
           set({ currentView: view });
         } else {
           set({ currentView: undefined });
@@ -96,36 +125,54 @@ export const useStudioStore = create<StudioState>((set, get) => ({
       queryProxy: undefined,
       router: undefined,
       init: async (force?: boolean) => {
-    // let _url = 'http://localhost:52002/api/router';
+        // let _url = 'http://localhost:52002/api/router';  // Github starred
-    let _url = 'http://localhost:52000/api/router';
+        // let _url = 'http://localhost:52000/api/router'; // 浏览器
         // let _url = '/api/router';
         let queryProxy = get().queryProxy;
         if (queryProxy && !force) {
           return { queryProxy };
         }
         let currentView: RouterViewData | undefined = get().currentView;
-    console.log('currentView in init', currentView);
         const routerViewData: RouterViewData = currentView || {
           views: [{
-        id: 'default',
+            id: '',
             title: '默认视图',
-        query: `WHERE path = 'file' `
+            query: ``
           }],
           data: {
-        items: []
+            items: [
-      },
+              {
-      viewId: 'default',
+                title: '默认路由',
+                id: '',
+                description: '',
+                type: 'api',
+                api: {
+                  url: '/api/router'
+                }
+              }
+            ]
+          },
+          viewId: '',
         }
-    console.log('initializing query proxy with view', routerViewData);
         queryProxy = new QueryProxy({
           routerViewData
         });
+        set({ loading: true });
         await queryProxy.init();
         await sleep(500);
+        set({ loading: false });
         set({ queryProxy });
         return { queryProxy }
       },
-}));
+      showLeftPanel: false,
+      setShowLeftPanel: (show: boolean) => set({ showLeftPanel: show }),
+    }),
+    {
+      name: 'studio-storage',
+      partialize: (state) => ({ showLeftPanel: state.showLeftPanel }),
+    }
+  )
+);
 
 use('studioStore', () => {
   return useStudioStore.getState();

web/src/apps/view/components/DataItemForm.tsx

@@ -95,7 +95,7 @@ export const DataItemForm = ({ item, onChange, onRemove }: DataItemFormProps) =>
   }
 
   return (
-    <div className="border rounded-lg p-4 mb-4 space-y-4">
+    <div className="border border-gray-300 rounded-lg p-4 mb-4 space-y-4">
       <div className="flex justify-between items-center">
         <h3 className="font-medium">数据项配置</h3>
         <button

web/src/apps/view/components/ViewEditor.tsx

@@ -81,7 +81,7 @@ export const ViewEditor = ({ open, onOpenChange, data, onSave }: ViewEditorProps
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="">
         <DialogHeader>
           <DialogTitle>{isUpdate ? '编辑视图' : '新增视图'}</DialogTitle>
         </DialogHeader>

web/src/apps/view/components/ViewFormItem.tsx

@@ -1,5 +1,6 @@
 import { Label } from "@/components/ui/label"
 import { Input } from "@/components/ui/input"
+import { toast } from "react-toastify"
 
 interface ViewFormProps {
   view: any
@@ -11,9 +12,16 @@ export const ViewFormItem = ({ view, onChange, onRemove }: ViewFormProps) => {
   const handleChange = (field: string, value: any) => {
     onChange({ ...view, [field]: value })
   }
-
+  const handleCopyId = async (id: string) => {
+    try {
+      await navigator.clipboard.writeText(id);
+      toast.success('已复制到剪贴板', { autoClose: 1000 });
+    } catch (err) {
+      console.error('复制失败', err);
+    }
+  }
   return (
-    <div className="border rounded-lg p-4 mb-4 space-y-4">
+    <div className="border border-gray-300 rounded-lg p-4 mb-4 space-y-4">
       <div className="flex justify-between items-center">
         <h3 className="font-medium">视图配置</h3>
         <button
@@ -26,7 +34,7 @@ export const ViewFormItem = ({ view, onChange, onRemove }: ViewFormProps) => {
       </div>
 
       <div className="grid grid-cols-2 gap-4">
-        <div className="space-y-2">
+        <div className="space-y-2" onClick={() => handleCopyId(view.id)}>
           <Label>ID</Label>
           <Input
             value={view.id || ''}

web/src/apps/view/list.tsx

@@ -1,21 +1,81 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useStudioStore } from '../studio/store.ts';
 import { Search, RotateCw, Plus, MoreHorizontal, Layout, Edit2, Trash2 } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import {
-  Table,
+  DropdownMenu,
-  TableBody,
+  DropdownMenuContent,
-  TableCell,
+  DropdownMenuItem,
-  TableHead,
+  DropdownMenuTrigger,
-  TableHeader,
+} from "@/components/ui/dropdown-menu";
-  TableRow,
-} from "@/components/ui/table";
 import { ViewEditor } from "@/apps/view/components/ViewEditor.tsx";
+import { toast } from "react-toastify";
 
+const ViewItem = ({ view, onEdit, onDelete }: { view: any; onEdit: (view: any) => void; onDelete: (id: string) => void }) => {
+  const [expanded, setExpanded] = useState(false);
+  const studioStore = useStudioStore();
+  useEffect(() => {
+    const currentViewId = studioStore.currentView?.viewId;
+    if (view.views.some((v: any) => v.id === currentViewId)) {
+      setExpanded(true);
+    }
+  }, [studioStore.currentView?.viewId]);
+  const ShowViews = (props: { views: { id: string, title: string }[] }) => {
+    const studioStore = useStudioStore();
+    const currentViewId = studioStore.currentView?.viewId;
+    const isActiveView = (viewId: string) => {
+      return viewId === currentViewId;
+    }
+    return <div className="mt-2 ml-4 w-full border-l-2 border-l-gray-300 border-gray-300 pl-3 space-y-1">
+      {props.views.map(v => (
+        <div key={v.id} className={`text-sm px-2 py-1 rounded cursor-pointer transition-colors ${isActiveView(v.id) ? 'text-black bg-gray-100' : 'text-gray-600 hover:text-black hover:bg-gray-100'}`} onClick={(e) => {
+          studioStore.setCurrentView({ ...view, viewId: v.id })
+        }}>
+          {v.title || '未命名视图'}
+        </div>
+      ))}
+    </div>
+  }
+  return <div
+    key={view.id}
+    className="flex flex-col items-center py-3 px-4 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors"
+  >
+    <div className="w-full flex justify-between" onClick={() => setExpanded(!expanded)}>
+      <div className="flex items-center cursor-pointer"  >
+        <Layout className="h-4 w-4 mr-2 text-gray-500" />
+        {view.title || '未命名视图'}
+      </div>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="border-gray-300">
+          <DropdownMenuItem className="cursor-pointer" onClick={() => onEdit(view)}>
+            <Edit2 className="h-4 w-4 mr-2" />
+            编辑
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => onDelete(view.id)}
+            className="cursor-pointer text-red-600 focus:text-red-600"
+          >
+            <Trash2 className="h-4 w-4 mr-2" />
+            删除
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    {expanded &&
+      <ShowViews views={view.views} />
+    }
+  </div>
+}
 export const ViewList = () => {
-  const { routeViewList, updateRouteView, deleteRouteView } = useStudioStore();
+  const { routeViewList, updateRouteView, deleteRouteView, getViewList } = useStudioStore();
-  const [selectedItems, setSelectedItems] = useState<string[]>([]);
   const [searchTerm, setSearchTerm] = useState("");
   const [editorOpen, setEditorOpen] = useState(false);
   const [editingView, setEditingView] = useState<any>(null);
@@ -24,10 +84,14 @@ export const ViewList = () => {
     (view.title || '未命名视图').toLowerCase().includes(searchTerm.toLowerCase()) ||
     (view.description || '').toLowerCase().includes(searchTerm.toLowerCase())
   );
+  useEffect(() => {
+    getViewList();
+  }, [])
 
-
+  const handleRefresh = async () => {
-  const handleRefresh = () => {
+    const toastId = toast.loading('正在刷新视图列表...');
-    // 刷新逻辑
+    await getViewList();
+    toast.update(toastId, { render: '视图列表已刷新', type: 'success', isLoading: false, autoClose: 1000 });
   };
 
   const handleAdd = () => {
@@ -50,7 +114,7 @@ export const ViewList = () => {
   };
 
   return (
-    <div className="w-full h-full max-w-4xl p-4 border rounded-md shadow-sm">
+    <div className="w-full h-full max-w-4xl p-4 border border-gray-200 rounded-md shadow-sm">
       <div className="flex items-center space-x-2 mb-4">
         <div className="relative flex-1">
           <Input
@@ -61,62 +125,30 @@ export const ViewList = () => {
           />
           <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
         </div>
-        <Button variant="outline" size="icon" className="h-10 w-10" onClick={handleRefresh}>
+        <Button variant="outline" size="icon" className="h-10 w-10 cursor-pointer border-gray-300" onClick={handleRefresh}>
           <RotateCw className="h-4 w-4" />
         </Button>
-        <Button variant="outline" size="icon" className="h-10 w-10" onClick={handleAdd}>
+        <Button variant="outline" size="icon" className="h-10 w-10 cursor-pointer border-gray-300" onClick={handleAdd}>
           <Plus className="h-4 w-4" />
         </Button>
       </div>
 
-      <Table>
+      <div className="flex flex-col">
-        <TableHeader>
-          <TableRow>
-            <TableHead className="font-medium">视图名称</TableHead>
-            <TableHead className="w-10"></TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
         {filteredViews.length === 0 ? (
-            <TableRow>
+          <div className="text-center py-4 text-gray-500">
-              <TableCell colSpan={4} className="text-center py-4 text-gray-500">
             {searchTerm ? '未找到匹配的视图' : '暂无视图'}
-              </TableCell>
+          </div>
-            </TableRow>
         ) : (
           filteredViews.map((view) => (
-              <TableRow key={view.id} className={selectedItems.includes(view.id) ? "bg-gray-100" : ""}>
+            <ViewItem
-                <TableCell className="font-medium">
+              key={view.id}
-                  <div className="flex items-center">
+              view={view}
-                    <Layout className="h-4 w-4 mr-2 text-gray-500" />
+              onEdit={handleEdit}
-                    {view.title || '未命名视图'}
+              onDelete={handleDelete}
-                  </div>
+            />
-                </TableCell>
-                <TableCell>
-                  <div className="flex items-center space-x-1">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8"
-                      onClick={() => handleEdit(view)}
-                    >
-                      <Edit2 className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 text-red-500 hover:text-red-700"
-                      onClick={() => handleDelete(view.id)}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
-                </TableCell>
-              </TableRow>
           ))
         )}
-        </TableBody>
+      </div>
-      </Table>
 
       <ViewEditor
         open={editorOpen}

web/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}