+68

package-lock.json

Reviewed

··· 11 11 "@atproto/api": "^0.14.7", 12 12 "@number-flow/svelte": "^0.3.3", 13 13 "@sveltejs/adapter-static": "^3.0.8", 14 14 + "@thisux/sveltednd": "^0.0.20", 14 15 "@threlte/core": "^8.0.1", 15 16 "@threlte/extras": "^9.0.1", 16 17 "@types/three": "^0.173.0", 17 18 "bits-ui": "^1.3.4", 18 19 "hls.js": "^1.5.20", 19 20 "layerchart": "^1.0.0", 21 21 + "paneforge": "^0.0.6", 20 22 "plyr": "^3.7.8", 21 23 "svelte-sonner": "^0.3.28", 22 24 "tailwind-variants": "^0.3.1", ··· 2042 2044 "peerDependencies": { 2043 2045 "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" 2044 2046 } 2047 2047 + }, 2048 2048 + "node_modules/@thisux/sveltednd": { 2049 2049 + "version": "0.0.20", 2050 2050 + "resolved": "https://registry.npmjs.org/@thisux/sveltednd/-/sveltednd-0.0.20.tgz", 2051 2051 + "integrity": "sha512-VE0HopIlHIvNOfSZ1SsiIzl1AmTU0VSd2Nz2Q2nIdqIUsT/UP4hiLw2ed2jFqTKTbqC+kbCYL9vuBpkYnEw+Kw==", 2052 2052 + "dependencies": { 2053 2053 + "@thisux/sveltednd": "^0.0.18" 2054 2054 + }, 2055 2055 + "peerDependencies": { 2056 2056 + "svelte": "^5.0.0" 2057 2057 + } 2058 2058 + }, 2059 2059 + "node_modules/@thisux/sveltednd/node_modules/@thisux/sveltednd": { 2060 2060 + "version": "0.0.18", 2061 2061 + "resolved": "https://registry.npmjs.org/@thisux/sveltednd/-/sveltednd-0.0.18.tgz", 2062 2062 + "integrity": "sha512-MO+iR9ZRHApvtwgWujmqwUbhv9mKs0jLOmeG4tn98GmU1/9wVOi02jrNqeggKg3c8dXz6pMmUHfOfmcq7WwYZg==", 2063 2063 + "dependencies": { 2064 2064 + "@thisux/sveltednd": "^0.0.17" 2065 2065 + }, 2066 2066 + "peerDependencies": { 2067 2067 + "svelte": "^5.0.0" 2068 2068 + } 2069 2069 + }, 2070 2070 + "node_modules/@thisux/sveltednd/node_modules/@thisux/sveltednd/node_modules/@thisux/sveltednd": { 2071 2071 + "version": "0.0.17", 2072 2072 + "resolved": "https://registry.npmjs.org/@thisux/sveltednd/-/sveltednd-0.0.17.tgz", 2073 2073 + "integrity": "sha512-lRninjw439phhA8xAHqCpMAX0hnwFMdbXW4M0XJgAdnGxeum+QsLiIC4P3HnkNXAygsVKUqxRcbS84CxDZ9hPw==", 2074 2074 + "dependencies": { 2075 2075 + "@thisux/sveltednd": "^0.0.14" 2076 2076 + }, 2077 2077 + "peerDependencies": { 2078 2078 + "svelte": "^5.0.0" 2079 2079 + } 2080 2080 + }, 2081 2081 + "node_modules/@thisux/sveltednd/node_modules/@thisux/sveltednd/node_modules/@thisux/sveltednd/node_modules/@thisux/sveltednd": { 2082 2082 + "version": "0.0.14", 2083 2083 + "resolved": "https://registry.npmjs.org/@thisux/sveltednd/-/sveltednd-0.0.14.tgz", 2084 2084 + "integrity": "sha512-Vbq69SU3HUomPg6oCXtb89OG89hka0YIkdaErYibn3waK7tYE66IcQxD/Fzg8YNW3EVsXoA9kc7kW5EUBCSQGg==" 2045 2085 }, 2046 2086 "node_modules/@threejs-kit/instanced-sprite-mesh": { 2047 2087 "version": "2.5.0", ··· 4494 4534 "version": "1.0.1", 4495 4535 "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", 4496 4536 "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==" 4537 4537 + }, 4538 4538 + "node_modules/paneforge": { 4539 4539 + "version": "0.0.6", 4540 4540 + "resolved": "https://registry.npmjs.org/paneforge/-/paneforge-0.0.6.tgz", 4541 4541 + "integrity": "sha512-jYeN/wdREihja5c6nK3S5jritDQ+EbCqC5NrDo97qCZzZ9GkmEcN5C0ZCjF4nmhBwkDKr6tLIgz4QUKWxLXjAw==", 4542 4542 + "dependencies": { 4543 4543 + "nanoid": "^5.0.4" 4544 4544 + }, 4545 4545 + "peerDependencies": { 4546 4546 + "svelte": "^4.0.0 || ^5.0.0-next.1" 4547 4547 + } 4548 4548 + }, 4549 4549 + "node_modules/paneforge/node_modules/nanoid": { 4550 4550 + "version": "5.1.2", 4551 4551 + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.2.tgz", 4552 4552 + "integrity": "sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==", 4553 4553 + "funding": [ 4554 4554 + { 4555 4555 + "type": "github", 4556 4556 + "url": "https://github.com/sponsors/ai" 4557 4557 + } 4558 4558 + ], 4559 4559 + "bin": { 4560 4560 + "nanoid": "bin/nanoid.js" 4561 4561 + }, 4562 4562 + "engines": { 4563 4563 + "node": "^18 || >=20" 4564 4564 + } 4497 4565 }, 4498 4566 "node_modules/parent-module": { 4499 4567 "version": "1.0.1",

+2

package.json

Reviewed

··· 41 41 "@atproto/api": "^0.14.7", 42 42 "@number-flow/svelte": "^0.3.3", 43 43 "@sveltejs/adapter-static": "^3.0.8", 44 44 + "@thisux/sveltednd": "^0.0.20", 44 45 "@threlte/core": "^8.0.1", 45 46 "@threlte/extras": "^9.0.1", 46 47 "@types/three": "^0.173.0", 47 48 "bits-ui": "^1.3.4", 48 49 "hls.js": "^1.5.20", 49 50 "layerchart": "^1.0.0", 51 51 + "paneforge": "^0.0.6", 50 52 "plyr": "^3.7.8", 51 53 "svelte-sonner": "^0.3.28", 52 54 "tailwind-variants": "^0.3.1",

+142

src/lib/sections/resizable/Resizable.svelte

Reviewed

··· 1 1 + <script lang="ts"> 2 2 + import { Portal } from 'bits-ui'; 3 3 + import { PaneGroup, Pane, PaneResizer } from 'paneforge'; 4 4 + import { draggable, droppable, type DragDropState } from './dragndrop'; 5 5 + 6 6 + import TimerPreview from '$lib/preview/TimerPreview.svelte'; 7 7 + import WaveformAudioPlayerPreview from '$lib/preview/WaveformAudioPlayerPreview.svelte'; 8 8 + import NumberInputPreview from '$lib/preview/NumberInputPreview.svelte'; 9 9 + import ThemeToggle from '$lib/components/theme-toggle/ThemeToggle.svelte'; 10 10 + import SelectTheme from '$lib/preview/SelectTheme.svelte'; 11 11 + 12 12 + let contentToPanes = $state({ 13 13 + first: '#pane1', 14 14 + second: '#pane2', 15 15 + third: '#pane3' 16 16 + }); 17 17 + 18 18 + let paneToContent = $state({ 19 19 + '#pane1': 'first', 20 20 + '#pane2': 'second', 21 21 + '#pane3': 'third' 22 22 + }); 23 23 + 24 24 + function handleDrop(event: DragDropState) { 25 25 + const { sourceContainer, targetContainer } = event; 26 26 + 27 27 + if (!sourceContainer || !targetContainer) return; 28 28 + 29 29 + const targetPane = targetContainer; 30 30 + const sourcePane = contentToPanes[sourceContainer as keyof typeof contentToPanes]; 31 31 + 32 32 + // get current content of target container 33 33 + const targetContent = paneToContent[targetContainer as keyof typeof paneToContent]; 34 34 + const sourceContent = sourceContainer; 35 35 + 36 36 + contentToPanes[targetContent as keyof typeof contentToPanes] = sourcePane; 37 37 + contentToPanes[sourceContent as keyof typeof contentToPanes] = targetPane; 38 38 + 39 39 + paneToContent[sourcePane as keyof typeof paneToContent] = targetContent; 40 40 + paneToContent[targetPane as keyof typeof paneToContent] = sourceContent; 41 41 + } 42 42 + 43 43 + let background = 'bg-base-100 dark:bg-base-900 border border-base-200 dark:border-base-800 relative overflow-hidden rounded-2xl p-6 pt-10 h-full w-full flex flex-col gap-4'; 44 44 + let accentBackground = 45 45 + 'bg-accent-500/5 dark:bg-accent-500/5 border border-accent-500/20 dark:border-accent-500/20'; 46 46 + </script> 47 47 + 48 48 + <div class="h-screen w-screen"> 49 49 + <PaneGroup direction="horizontal" class="p-6"> 50 50 + <Pane defaultSize={50} id="pane1" class="h-full p-2"> 51 51 + <div 52 52 + id="pane1" 53 53 + use:droppable={{ container: '#pane1', callbacks: { onDrop: handleDrop } }} 54 54 + class="h-full w-full rounded-2xl" 55 55 + ></div> 56 56 + </Pane> 57 57 + <PaneResizer 58 58 + class="bg-accent-200 dark:bg-accent-900 h-full w-1 rounded-full opacity-0 hover:opacity-100" 59 59 + /> 60 60 + <Pane defaultSize={50} class=""> 61 61 + <PaneGroup direction="vertical"> 62 62 + <Pane defaultSize={50} class="p-2"> 63 63 + <div 64 64 + use:droppable={{ container: '#pane2', callbacks: { onDrop: handleDrop } }} 65 65 + id="pane2" 66 66 + class="h-full w-full rounded-2xl" 67 67 + ></div> 68 68 + </Pane> 69 69 + <PaneResizer 70 70 + class="bg-accent-200 dark:bg-accent-900 h-1 w-full rounded-full opacity-0 hover:opacity-100" 71 71 + /> 72 72 + <Pane defaultSize={50} class="p-2"> 73 73 + <div 74 74 + id="pane3" 75 75 + use:droppable={{ container: '#pane3', callbacks: { onDrop: handleDrop } }} 76 76 + class="h-full w-full rounded-2xl" 77 77 + ></div> 78 78 + </Pane> 79 79 + </PaneGroup> 80 80 + </Pane> 81 81 + </PaneGroup> 82 82 + </div> 83 83 + 84 84 + <Portal to={contentToPanes.first}> 85 85 + <div 86 86 + class="h-full w-full" 87 87 + use:draggable={{ 88 88 + container: 'first', 89 89 + dragData: { id: 'first' }, 90 90 + handle: '.handle' 91 91 + }} 92 92 + > 93 93 + <div 94 94 + class={background} 95 95 + > 96 96 + <button class="handle bg-base-500/5 absolute top-0 right-0 left-0 h-5 w-full cursor-grab"> 97 97 + <span class="sr-only">drag</span> 98 98 + </button> 99 99 + 100 100 + <ThemeToggle class="absolute top-6 right-2" /> 101 101 + 102 102 + <SelectTheme /> 103 103 + 104 104 + </div> 105 105 + </div> 106 106 + </Portal> 107 107 + 108 108 + <Portal to={contentToPanes.second}> 109 109 + <div 110 110 + class="h-full w-full" 111 111 + use:draggable={{ container: 'second', dragData: { id: 'second' }, handle: '.handle' }} 112 112 + > 113 113 + <div 114 114 + class={background} 115 115 + > 116 116 + <button class="handle bg-base-500/5 absolute top-0 right-0 left-0 h-5 w-full cursor-grab"> 117 117 + <span class="sr-only">drag</span> 118 118 + </button> 119 119 + 120 120 + <NumberInputPreview /> 121 121 + 122 122 + <WaveformAudioPlayerPreview /> 123 123 + </div> 124 124 + </div> 125 125 + </Portal> 126 126 + 127 127 + <Portal to={contentToPanes.third}> 128 128 + <div 129 129 + class="h-full w-full" 130 130 + use:draggable={{ container: 'third', dragData: { id: 'third' }, handle: '.handle' }} 131 131 + > 132 132 + <div 133 133 + class={background} 134 134 + > 135 135 + <button class="handle bg-base-500/5 absolute top-0 right-0 left-0 h-5 w-full cursor-grab"> 136 136 + <span class="sr-only">drag</span> 137 137 + </button> 138 138 + 139 139 + <TimerPreview /> 140 140 + </div> 141 141 + </div> 142 142 + </Portal>

+6

src/routes/sections/resizable/+page.svelte

Reviewed

··· 1 1 + <script> 2 2 + import Resizable from "$lib/sections/resizable/Resizable.svelte"; 3 3 + 4 4 + </script> 5 5 + 6 6 + <Resizable />

+13

src/lib/sections/resizable/dragndrop/index.ts

Reviewed

··· 1 1 + // adapted from https://github.com/thisuxhq/sveltednd 2 2 + 3 3 + // Actions 4 4 + export { draggable, droppable } from './actions/index.js'; 5 5 + 6 6 + // Store 7 7 + export { dndState } from './stores/dnd.svelte.js'; 8 8 + 9 9 + // Types 10 10 + export type * from './types/index.js'; 11 11 + 12 12 + // Styles 13 13 + import './styles/dnd.css';

+148

src/lib/sections/resizable/dragndrop/actions/draggable.ts

Reviewed

··· 1 1 + import { dndState } from '../stores/dnd.svelte.js'; 2 2 + import type { DragDropOptions, DragDropState } from '../types'; 3 3 + 4 4 + const DEFAULT_DRAGGING_CLASS = 'dragging'; 5 5 + 6 6 + interface DraggableOptions<T> extends DragDropOptions<T> { 7 7 + // Add new option for interactive selectors 8 8 + interactive?: string[]; 9 9 + 10 10 + handle?: string; 11 11 + } 12 12 + 13 13 + export function draggable<T>(node: HTMLElement, options: DraggableOptions<T>) { 14 14 + const draggingClass = (options.attributes?.draggingClass || DEFAULT_DRAGGING_CLASS).split(' '); 15 15 + let initialX: number; 16 16 + let initialY: number; 17 17 + 18 18 + function isInteractiveElement(target: HTMLElement): boolean { 19 19 + if (!options.interactive) return false; 20 20 + 21 21 + // Check if the target or its parents match any of the interactive selectors 22 22 + return options.interactive.some( 23 23 + (selector) => target.matches(selector) || target.closest(selector) 24 24 + ); 25 25 + } 26 26 + 27 27 + function handleDragStart(event: DragEvent) { 28 28 + if (!node.draggable) return; 29 29 + 30 30 + console.log('drag start', event); 31 31 + 32 32 + dndState.isDragging = true; 33 33 + dndState.draggedItem = options.dragData; 34 34 + dndState.sourceContainer = options.container; 35 35 + dndState.targetContainer = null; 36 36 + 37 37 + if (event.dataTransfer) { 38 38 + event.dataTransfer.effectAllowed = 'move'; 39 39 + event.dataTransfer.setData('text/plain', JSON.stringify(options.dragData)); 40 40 + } 41 41 + 42 42 + node.classList.add(...draggingClass); 43 43 + options.callbacks?.onDragStart?.(dndState as DragDropState<T>); 44 44 + 45 45 + // **Dispatch the custom event that bubbles up to the container** 46 46 + const customEvent = new CustomEvent('dragstart-on-container', { bubbles: true }); 47 47 + node.dispatchEvent(customEvent); 48 48 + } 49 49 + 50 50 + function handleDragEnd() { 51 51 + node.classList.remove(...draggingClass); 52 52 + options.callbacks?.onDragEnd?.(dndState as DragDropState<T>); 53 53 + 54 54 + // Reset state 55 55 + dndState.isDragging = false; 56 56 + dndState.draggedItem = null; 57 57 + dndState.sourceContainer = ''; 58 58 + dndState.targetContainer = null; 59 59 + } 60 60 + 61 61 + function handlePointerDown(event: PointerEvent) { 62 62 + if (!node.draggable) return; 63 63 + 64 64 + // If the target is an interactive element, don't start dragging 65 65 + if (isInteractiveElement(event.target as HTMLElement)) { 66 66 + return; 67 67 + } 68 68 + 69 69 + // Store initial pointer position 70 70 + initialX = event.clientX; 71 71 + initialY = event.clientY; 72 72 + 73 73 + dndState.isDragging = true; 74 74 + dndState.draggedItem = options.dragData; 75 75 + dndState.sourceContainer = options.container; 76 76 + dndState.targetContainer = null; 77 77 + 78 78 + node.setPointerCapture(event.pointerId); 79 79 + node.classList.add(...draggingClass); 80 80 + options.callbacks?.onDragStart?.(dndState as DragDropState<T>); 81 81 + } 82 82 + 83 83 + function handlePointerMove(event: PointerEvent) { 84 84 + if (!dndState.isDragging) return; 85 85 + 86 86 + // Optional: Update visual feedback or position 87 87 + } 88 88 + 89 89 + function handlePointerUp(event: PointerEvent) { 90 90 + if (!dndState.isDragging) return; 91 91 + 92 92 + node.releasePointerCapture(event.pointerId); 93 93 + node.classList.remove(...draggingClass); 94 94 + options.callbacks?.onDragEnd?.(dndState as DragDropState<T>); 95 95 + 96 96 + // Reset state 97 97 + dndState.isDragging = false; 98 98 + dndState.draggedItem = null; 99 99 + dndState.sourceContainer = ''; 100 100 + dndState.targetContainer = null; 101 101 + } 102 102 + 103 103 + function handlePointerDownOnHandle(event: PointerEvent) { 104 104 + node.draggable = !options.disabled; 105 105 + } 106 106 + 107 107 + function handlePointerUpOnHandle(event: PointerEvent) { 108 108 + node.draggable = false; 109 109 + } 110 110 + 111 111 + // if handles are provided, add event listeners for each handle 112 112 + if (options.handle) { 113 113 + // handles are selectors, so we need to get the elements 114 114 + const handle = node.querySelector(options.handle) as HTMLElement; 115 115 + 116 116 + handle.addEventListener('pointerdown', handlePointerDownOnHandle); 117 117 + handle.addEventListener('pointerup', handlePointerUpOnHandle); 118 118 + } 119 119 + 120 120 + node.draggable = !options.disabled && !options.handle; 121 121 + 122 122 + node.addEventListener('dragstart', handleDragStart); 123 123 + node.addEventListener('dragend', handleDragEnd); 124 124 + node.addEventListener('pointerdown', handlePointerDown); 125 125 + node.addEventListener('pointermove', handlePointerMove); 126 126 + node.addEventListener('pointerup', handlePointerUp); 127 127 + 128 128 + return { 129 129 + update(newOptions: DraggableOptions<T>) { 130 130 + options = newOptions; 131 131 + 132 132 + node.draggable = !options.disabled && !options.handle; 133 133 + }, 134 134 + 135 135 + destroy() { 136 136 + if (options.handle) { 137 137 + const handle = node.querySelector(options.handle) as HTMLElement; 138 138 + handle.removeEventListener('pointerdown', handlePointerDownOnHandle); 139 139 + handle.removeEventListener('pointerup', handlePointerUpOnHandle); 140 140 + } 141 141 + 142 142 + node.removeEventListener('dragstart', handleDragStart); 143 143 + node.removeEventListener('dragend', handleDragEnd); 144 144 + node.removeEventListener('pointerdown', handlePointerDown); 145 145 + node.removeEventListener('pointermove', handlePointerMove); 146 146 + } 147 147 + }; 148 148 + }

+136

src/lib/sections/resizable/dragndrop/actions/droppable.ts

Reviewed

··· 1 1 + import { dndState } from '../stores/dnd.svelte.js'; 2 2 + import type { DragDropOptions, DragDropState } from '../types/index.js'; 3 3 + 4 4 + const DEFAULT_DRAG_OVER_CLASS = 5 5 + 'outline-2 outline-offset-4 outline-accent-500 rounded-2xl outline-dashed'; 6 6 + 7 7 + export function droppable<T>(node: HTMLElement, options: DragDropOptions<T>) { 8 8 + const dragOverClass = (options.attributes?.draggingClass || DEFAULT_DRAG_OVER_CLASS).split(' '); 9 9 + let dragEnterCounter = 0; // Initialize the counter 10 10 + 11 11 + function handleDragEnter(event: DragEvent) { 12 12 + if (options.disabled) return; 13 13 + event.preventDefault(); 14 14 + 15 15 + dragEnterCounter++; 16 16 + 17 17 + dndState.targetContainer = options.container; 18 18 + dndState.targetElement = event.target as HTMLElement; 19 19 + 20 20 + if (dragEnterCounter === 0) return; 21 21 + 22 22 + node.classList.add(...dragOverClass); 23 23 + options.callbacks?.onDragEnter?.(dndState as DragDropState<T>); 24 24 + } 25 25 + 26 26 + function handleDragLeave(event: DragEvent) { 27 27 + if (options.disabled) return; 28 28 + 29 29 + dragEnterCounter--; 30 30 + 31 31 + // check if element is still being dragged over 32 32 + if (dragEnterCounter > 0) return; 33 33 + 34 34 + node.classList.remove(...dragOverClass); 35 35 + 36 36 + options.callbacks?.onDragLeave?.(dndState as DragDropState<T>); 37 37 + 38 38 + if (dndState.targetContainer === options.container && dndState.targetElement === event.target) { 39 39 + dndState.targetContainer = null; 40 40 + dndState.targetElement = null; 41 41 + } 42 42 + } 43 43 + 44 44 + function handleDragOver(event: DragEvent) { 45 45 + if (options.disabled) return; 46 46 + event.preventDefault(); 47 47 + 48 48 + if (event.dataTransfer) { 49 49 + event.dataTransfer.dropEffect = 'move'; 50 50 + } 51 51 + 52 52 + options.callbacks?.onDragOver?.(dndState as DragDropState<T>); 53 53 + } 54 54 + 55 55 + async function handleDrop(event: DragEvent) { 56 56 + if (options.disabled) return; 57 57 + event.preventDefault(); 58 58 + 59 59 + dragEnterCounter = 0; // Reset the counter 60 60 + node.classList.remove(...dragOverClass); 61 61 + 62 62 + try { 63 63 + if (event.dataTransfer) { 64 64 + const dragData = JSON.parse(event.dataTransfer.getData('text/plain')) as T; 65 65 + dndState.draggedItem = dragData; 66 66 + } 67 67 + 68 68 + await options.callbacks?.onDrop?.(dndState as DragDropState<T>); 69 69 + } catch (error) { 70 70 + console.error('Drop handling failed:', error); 71 71 + } 72 72 + } 73 73 + 74 74 + function handleDragStartOnContainer(event: Event) { 75 75 + if (options.disabled) return; 76 76 + 77 77 + // Reset the counter and remove the class 78 78 + dragEnterCounter = 0; 79 79 + node.classList.remove(...dragOverClass); 80 80 + } 81 81 + 82 82 + function handlePointerOver(event: PointerEvent) { 83 83 + if (options.disabled || !dndState.isDragging) return; 84 84 + 85 85 + // console.log('handlePointerOver', dndState, dndState.isDragging); 86 86 + 87 87 + dndState.targetContainer = options.container; 88 88 + // node.classList.add(...dragOverClass); 89 89 + options.callbacks?.onDragEnter?.(dndState as DragDropState<T>); 90 90 + } 91 91 + 92 92 + function handlePointerOut(event: PointerEvent) { 93 93 + if (options.disabled || !dndState.isDragging) return; 94 94 + 95 95 + if (dndState.targetContainer === options.container) { 96 96 + dndState.targetContainer = null; 97 97 + } 98 98 + node.classList.remove(...dragOverClass); 99 99 + options.callbacks?.onDragLeave?.(dndState as DragDropState<T>); 100 100 + } 101 101 + 102 102 + function handlePointerUp(event: PointerEvent) { 103 103 + if (options.disabled || !dndState.isDragging) return; 104 104 + 105 105 + node.classList.remove(...dragOverClass); 106 106 + options.callbacks?.onDrop?.(dndState as DragDropState<T>); 107 107 + } 108 108 + 109 109 + node.addEventListener('dragenter', handleDragEnter); 110 110 + node.addEventListener('dragleave', handleDragLeave); 111 111 + node.addEventListener('dragover', handleDragOver); 112 112 + node.addEventListener('drop', handleDrop); 113 113 + node.addEventListener('dragstart-on-container', handleDragStartOnContainer); 114 114 + 115 115 + node.addEventListener('pointerover', handlePointerOver); 116 116 + node.addEventListener('pointerout', handlePointerOut); 117 117 + node.addEventListener('pointerup', handlePointerUp); 118 118 + 119 119 + return { 120 120 + update(newOptions: DragDropOptions<T>) { 121 121 + options = newOptions; 122 122 + }, 123 123 + 124 124 + destroy() { 125 125 + node.removeEventListener('dragenter', handleDragEnter); 126 126 + node.removeEventListener('dragleave', handleDragLeave); 127 127 + node.removeEventListener('dragover', handleDragOver); 128 128 + node.removeEventListener('drop', handleDrop); 129 129 + node.removeEventListener('dragstart-on-container', handleDragStartOnContainer); 130 130 + 131 131 + node.removeEventListener('pointerover', handlePointerOver); 132 132 + node.removeEventListener('pointerout', handlePointerOut); 133 133 + node.removeEventListener('pointerup', handlePointerUp); 134 134 + } 135 135 + }; 136 136 + }

+2

src/lib/sections/resizable/dragndrop/actions/index.ts

Reviewed

··· 1 1 + export { draggable } from './draggable.js'; 2 2 + export { droppable } from './droppable.js';

+11

src/lib/sections/resizable/dragndrop/stores/dnd.svelte.ts

Reviewed

··· 1 1 + import type { DragDropState } from '../types/index.js'; 2 2 + 3 3 + // Global DnD state using Svelte 5's state rune 4 4 + export const dndState = $state<DragDropState>({ 5 5 + isDragging: false, 6 6 + draggedItem: null, 7 7 + sourceContainer: '', 8 8 + targetContainer: null, 9 9 + targetElement: null, 10 10 + invalidDrop: false 11 11 + });

+48

src/lib/sections/resizable/dragndrop/styles/dnd.css

Reviewed

··· 1 1 + /* Base draggable styles */ 2 2 + .svelte-dnd-draggable { 3 3 + touch-action: none; /* Prevents touch scrolling while dragging */ 4 4 + user-select: none; /* Prevents text selection during drag */ 5 5 + } 6 6 + 7 7 + /* Active dragging state */ 8 8 + .svelte-dnd-dragging { 9 9 + opacity: 0.5; 10 10 + cursor: grabbing; 11 11 + } 12 12 + 13 13 + /* Draggable hover state */ 14 14 + .svelte-dnd-draggable:hover { 15 15 + cursor: grab; 16 16 + } 17 17 + 18 18 + /* Droppable area styles */ 19 19 + .svelte-dnd-droppable { 20 20 + position: relative; 21 21 + } 22 22 + 23 23 + /* Active drop target */ 24 24 + .svelte-dnd-drop-target { 25 25 + outline: 2px dashed #4caf50; 26 26 + } 27 27 + 28 28 + /* Invalid drop target */ 29 29 + .svelte-dnd-invalid-target { 30 30 + outline: 2px dashed #f44336; 31 31 + } 32 32 + 33 33 + /* Drop preview/placeholder */ 34 34 + .svelte-dnd-placeholder { 35 35 + border: 2px dashed #9e9e9e; 36 36 + } 37 37 + 38 38 + /* Media queries for responsive design */ 39 39 + @media (max-width: 600px) { 40 40 + .svelte-dnd-draggable { 41 41 + width: 100%; 42 42 + touch-action: none; /* Prevents scrolling during drag */ 43 43 + } 44 44 + 45 45 + .svelte-dnd-droppable { 46 46 + padding: 10px; 47 47 + } 48 48 + }

+30

src/lib/sections/resizable/dragndrop/types/index.ts

Reviewed

··· 1 1 + export interface DragDropState<T = unknown> { 2 2 + isDragging: boolean; 3 3 + draggedItem: T; 4 4 + sourceContainer: string; 5 5 + targetContainer: string | null; 6 6 + targetElement: HTMLElement | null; 7 7 + invalidDrop?: boolean; 8 8 + } 9 9 + 10 10 + export interface DragDropCallbacks<T = unknown> { 11 11 + onDragStart?: (state: DragDropState<T>) => void; 12 12 + onDragEnter?: (state: DragDropState<T>) => void; 13 13 + onDragLeave?: (state: DragDropState<T>) => void; 14 14 + onDragOver?: (state: DragDropState<T>) => void; 15 15 + onDrop?: (state: DragDropState<T>) => Promise<void> | void; 16 16 + onDragEnd?: (state: DragDropState<T>) => void; 17 17 + } 18 18 + 19 19 + export interface DragDropAttributes { 20 20 + draggingClass?: string; 21 21 + dragOverClass?: string; 22 22 + } 23 23 + 24 24 + export interface DragDropOptions<T = unknown> { 25 25 + dragData?: T; 26 26 + container: string; 27 27 + disabled?: boolean; 28 28 + callbacks?: DragDropCallbacks<T>; 29 29 + attributes?: DragDropAttributes; 30 30 + }