feat(wikibase-schema-editor): create drag-and-drop context types and utilities (#70)

Author: DaxServer

.kiro/specs/wikibase-schema-editor/tasks.md

@@ -6,7 +6,7 @@
   - Implement TypeScript interfaces for schema mapping
   - _Requirements: 1.2_
 
-- [ ] 2. Create drag-and-drop context types and utilities
+- [x] 2. Create drag-and-drop context types and utilities
   - Write tests for drag-and-drop context state management
   - Write tests for drop target validation logic
   - Implement drag-and-drop context types and utilities

.kiro/steering/tech.md

@@ -27,6 +27,9 @@
 - **Auto-imports**: Automatic imports for Vue composables and PrimeVue components
 - **TypeScript**: Strict type checking across the stack
 
+## Coding Standards
+- **Function Declarations**: Always use arrow functions (`const fn = () => {}`) instead of function declarations (`function fn() {}`)
+
 ## Auto-Import Configuration (Frontend)
 
 The frontend uses `unplugin-auto-import` and `unplugin-vue-components` for automatic imports:

frontend/.eslintrc-auto-import.json

@@ -73,6 +73,7 @@
     "controlledComputed": true,
     "controlledRef": true,
     "createApp": true,
+    "createDropZoneConfig": true,
     "createEventHook": true,
     "createGlobalState": true,
     "createInjectionState": true,
@@ -229,6 +230,7 @@
     "useDevicesList": true,
     "useDisplayMedia": true,
     "useDocumentVisibility": true,
+    "useDragDropContext": true,
     "useDraggable": true,
     "useDropZone": true,
     "useElementBounding": true,

frontend/auto-imports.d.ts

@@ -24,6 +24,7 @@ declare global {
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
   const createApp: typeof import('vue')['createApp']
+  const createDropZoneConfig: typeof import('./src/composables/useDragDropContext')['createDropZoneConfig']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
@@ -189,6 +190,7 @@ declare global {
   const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDragDropContext: typeof import('./src/composables/useDragDropContext')['useDragDropContext']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
   const useDropZone: typeof import('@vueuse/core')['useDropZone']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
@@ -382,6 +384,7 @@ declare module 'vue' {
     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly createDropZoneConfig: UnwrapRef<typeof import('./src/composables/useDragDropContext')['createDropZoneConfig']>
     readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
@@ -538,6 +541,7 @@ declare module 'vue' {
     readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
     readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
     readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
+    readonly useDragDropContext: UnwrapRef<typeof import('./src/composables/useDragDropContext')['useDragDropContext']>
     readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
     readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
     readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>