ntropi 1.0.0 → 1.0.1

package/src/frontend/src/components/DatasetEditor.jsx

@@ -1,1124 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { Edit2, Plus, Type, Hash, ToggleLeft, Calendar, FileDigit, GripVertical, Trash2, Box, List, Copy, Check, ChevronUp, ChevronDown, Trash, HelpCircle, X } from 'lucide-react'
-// eslint-disable-next-line no-unused-vars
-import { motion, AnimatePresence } from 'framer-motion'
-
-function JsonTreeNode({
-	label,
-	value,
-	depth = 0,
-	path = [],
-	onUpdateNode,
-	onDuplicateNode,
-	onDeleteNode,
-	onReorderNode,
-	isParentEditing = false,
-}) {
-	const isArray = Array.isArray(value)
-	const isObject = value !== null && typeof value === 'object' && !isArray
-	const [isEditingNode, setIsEditingNode] = useState(false)
-	const [isExpanded, setIsExpanded] = useState(depth < 1)
-	const [repeatCount, setRepeatCount] = useState('1')
-	const [isEditingRepeatCount, setIsEditingRepeatCount] = useState(false)
-	const [newArrayItemValue, setNewArrayItemValue] = useState('')
-	const [newObjectKey, setNewObjectKey] = useState('')
-	const [newObjectValue, setNewObjectValue] = useState('')
-	const primitiveEditorRef = useRef(null)
-	const repeatCountInputRef = useRef(null)
-
-	// Reset duplication controls whenever node value changes using render phase derivative state.
-	const [prevValue, setPrevValue] = useState(value)
-	if (value !== prevValue) {
-		setPrevValue(value)
-		setRepeatCount('1')
-		setIsEditingRepeatCount(false)
-	}
-
-	useEffect(() => {
-		if (isEditingRepeatCount && repeatCountInputRef.current) {
-			repeatCountInputRef.current.focus()
-			repeatCountInputRef.current.select()
-		}
-	}, [isEditingRepeatCount])
-
-	const primitiveValue = typeof value === 'string' ? `"${value}"` : String(value)
-
-	useEffect(() => {
-		if (isArray || isObject || !primitiveEditorRef.current) {
-			return
-		}
-
-		if (document.activeElement !== primitiveEditorRef.current) {
-			primitiveEditorRef.current.textContent = primitiveValue
-		}
-	}, [primitiveValue, isArray, isObject])
-
-	if (!isArray && !isObject) {
-		const handlePrimitiveBlur = (event) => {
-			if (!isParentEditing) {
-				return
-			}
-
-			const rawValue = event.currentTarget.textContent ?? ''
-			const trimmedValue = rawValue.trim()
-
-			if (!trimmedValue) {
-				onUpdateNode(path, '')
-				return
-			}
-
-			try {
-				onUpdateNode(path, JSON.parse(trimmedValue))
-			} catch {
-				onUpdateNode(path, rawValue)
-			}
-		}
-
-		const handlePrimitiveKeyDown = (event) => {
-			if (event.key === 'Enter') {
-				event.preventDefault()
-				event.currentTarget.blur()
-				return
-			}
-
-			if (event.key === 'Escape') {
-				event.preventDefault()
-				event.currentTarget.textContent = primitiveValue
-				event.currentTarget.blur()
-			}
-		}
-
-		return (
-			<div className={`flex items-center ${depth > 0 ? 'ml-1' : ''}`}>
-				<span className="text-[13px] font-mono text-cyan-400">
-					{label !== null ? `"${label}"` : ''}
-				</span>
-				<span className="text-[13px] font-mono text-neutral-500 mx-1">
-					{label !== null ? ':' : ''}
-				</span>
-				{isParentEditing ? (
-					<span
-						ref={primitiveEditorRef}
-						contentEditable
-						suppressContentEditableWarning
-						onBlur={handlePrimitiveBlur}
-						onKeyDown={handlePrimitiveKeyDown}
-						className="text-[13px] font-mono text-emerald-400 outline-none hover:bg-white/5 px-1 rounded transition-colors"
-					>
-						{primitiveValue}
-					</span>
-				) : (
-					<span className="text-[13px] font-mono text-emerald-400">{primitiveValue}</span>
-				)}
-			</div>
-		)
-	}
-
-	const entries = isArray ? value.map((item, index) => [index, item]) : Object.entries(value)
-	const closedTypeLabel = isArray ? `[${value.length}]` : `{${entries.length}}`
-
-	const handleStartNodeEdit = (event) => {
-		event.preventDefault()
-		event.stopPropagation()
-		setIsEditingNode((previous) => !previous)
-	}
-
-	const handleCancelNodeEdit = () => {
-		setIsEditingNode(false)
-	}
-
-	const handleDetailsToggle = (event) => {
-		const nextOpen = event.currentTarget.open
-		setIsExpanded(nextOpen)
-
-		if (!nextOpen) {
-			handleCancelNodeEdit()
-			setIsEditingRepeatCount(false)
-		}
-	}
-
-	const handleApplyRepeatCount = () => {
-		const parsedCount = Number.parseInt(repeatCount, 10)
-		if (!Number.isInteger(parsedCount) || parsedCount < 1) {
-			setRepeatCount('1')
-			setIsEditingRepeatCount(false)
-			return
-		}
-
-		if (parsedCount === 1) {
-			setIsEditingRepeatCount(false)
-			return
-		}
-
-		onDuplicateNode(path, parsedCount)
-		setRepeatCount('1')
-		setIsEditingRepeatCount(false)
-	}
-
-	const handleRepeatCountKeyDown = (event) => {
-		if (event.key === 'Enter') {
-			event.preventDefault()
-			handleApplyRepeatCount()
-		}
-
-		if (event.key === 'Escape') {
-			event.preventDefault()
-			setRepeatCount('1')
-			setIsEditingRepeatCount(false)
-		}
-	}
-
-	const handleStartRepeatCountEdit = (event) => {
-		event.preventDefault()
-		event.stopPropagation()
-		setIsEditingRepeatCount(true)
-	}
-
-	const handleDeleteNode = (event) => {
-		event.preventDefault()
-		event.stopPropagation()
-		onDeleteNode(path)
-	}
-
-	const handleReorderEntry = (event, entryKey, direction) => {
-		event.preventDefault()
-		event.stopPropagation()
-		onReorderNode([...path, entryKey], direction)
-	}
-
-	const handleDeleteEntry = (event, entryKey) => {
-		event.preventDefault()
-		event.stopPropagation()
-		onDeleteNode([...path, entryKey])
-	}
-
-	const parseInlineValue = (rawValue) => {
-		const trimmedValue = rawValue.trim()
-		if (!trimmedValue) {
-			return ''
-		}
-
-		try {
-			return JSON.parse(trimmedValue)
-		} catch {
-			return rawValue
-		}
-	}
-
-	const handleAddArrayItem = (event) => {
-		event.preventDefault()
-		event.stopPropagation()
-
-		onUpdateNode(path, [...value, parseInlineValue(newArrayItemValue)])
-		setNewArrayItemValue('')
-	}
-
-	const handleAddObjectEntry = (event) => {
-		event.preventDefault()
-		event.stopPropagation()
-
-		const key = newObjectKey.trim()
-		if (!key) {
-			return
-		}
-
-		onUpdateNode(path, {
-			...value,
-			[key]: parseInlineValue(newObjectValue),
-		})
-
-		setNewObjectKey('')
-		setNewObjectValue('')
-	}
-
-	const handleAddInputKeyDown = (event, type) => {
-		if (event.key !== 'Enter') {
-			return
-		}
-
-		if (type === 'array') {
-			handleAddArrayItem(event)
-			return
-		}
-
-		handleAddObjectEntry(event)
-	}
-
-	const handleQuickAddContainer = (event, containerType) => {
-		event.preventDefault()
-		event.stopPropagation()
-
-		const nextContainer = containerType === 'array' ? [] : {}
-
-		if (isArray) {
-			onUpdateNode(path, [...value, nextContainer])
-			return
-		}
-
-		if (isObject) {
-			const baseKey = containerType === 'array' ? 'newArray' : 'newObject'
-			let nextKey = baseKey
-			let index = 1
-
-			while (Object.prototype.hasOwnProperty.call(value, nextKey)) {
-				nextKey = `${baseKey}_${index}`
-				index += 1
-			}
-
-			onUpdateNode(path, {
-				...value,
-				[nextKey]: nextContainer,
-			})
-		}
-	}
-
-	const getPresetValue = (presetType) => {
-		switch (presetType) {
-			case 'name':
-				return '$name'
-			case 'string':
-				return '$string(8)'
-			case 'int':
-				return '$int(1-10)'
-			case 'float':
-				return '$float(1.0-5.0)'
-			case 'bool':
-				return '$bool'
-			case 'uuid':
-				return '$uuid'
-			case 'date':
-				return '$date(DD-MM-YYYY)'
-			default:
-				return ''
-		}
-	}
-
-	const getPresetObjectKey = (existingObject, presetType) => {
-		const baseKey = presetType
-		let nextKey = baseKey
-		let index = 1
-
-		while (Object.prototype.hasOwnProperty.call(existingObject, nextKey)) {
-			nextKey = `${baseKey}_${index}`
-			index += 1
-		}
-
-		return nextKey
-	}
-
-	const handleQuickAddPreset = (event, presetType) => {
-		event.preventDefault()
-		event.stopPropagation()
-
-		const presetValue = getPresetValue(presetType)
-
-		if (isArray) {
-			onUpdateNode(path, [...value, presetValue])
-			return
-		}
-
-		if (isObject) {
-			const nextKey = getPresetObjectKey(value, presetType)
-			onUpdateNode(path, {
-				...value,
-				[nextKey]: presetValue,
-			})
-		}
-	}
-
-	return (
-		<details
-			open={isExpanded}
-			onToggle={handleDetailsToggle}
-			className={depth > 0 ? 'ml-1' : ''}
-		>
-			<summary className="cursor-pointer select-none text-[13px] font-mono text-neutral-300 marker:text-neutral-500 hover:text-white transition-colors">
-				{label !== null ? <span className="text-cyan-400">"{label}"</span> : ''}
-				{label !== null ? <span className="text-neutral-500 mx-1">:</span> : ''}
-				{isArray ? (
-					<span className="text-neutral-400">{isExpanded ? '[' : closedTypeLabel}</span>
-				) : (
-					<span className="text-neutral-400">{isExpanded ? '{' : closedTypeLabel}</span>
-				)}
-				{isExpanded && (
-					<div className="inline-flex items-center ml-3 opacity-0 group-open:opacity-100 group-hover:opacity-100 transition-opacity hover:opacity-100" onClick={(e) => e.preventDefault()}>
-						<div className="flex items-center gap-0.5 rounded-lg border border-white/5 bg-[#0A0A0A] px-1 py-0.5 shadow-md">
-							<button
-								type="button"
-								aria-label="Edit node"
-								title={isEditingNode ? 'Stop editing' : 'Edit'}
-								onMouseDown={(event) => {
-									event.preventDefault()
-									event.stopPropagation()
-								}}
-								onClick={handleStartNodeEdit}
-								className={`flex h-6 w-6 items-center justify-center rounded-md transition-colors ${isEditingNode ? 'bg-indigo-500/20 text-indigo-400' : 'text-neutral-500 hover:bg-white/10 hover:text-neutral-200'}`}
-							>
-								<Edit2 size={13} />
-							</button>
-							<div className="h-3 w-px bg-white/10 mx-0.5"></div>
-							<button
-								type="button"
-								aria-label="Add array"
-								title="Add Array []"
-								onMouseDown={(event) => {
-									event.preventDefault()
-									event.stopPropagation()
-								}}
-								onClick={(event) => handleQuickAddContainer(event, 'array')}
-								className="flex h-6 w-6 items-center justify-center rounded-md text-emerald-500/70 transition-colors hover:bg-emerald-500/10 hover:text-emerald-400"
-							>
-								<List size={14} />
-							</button>
-							<button
-								type="button"
-								aria-label="Add object"
-								title="Add Object {}"
-								onMouseDown={(event) => {
-									event.preventDefault()
-									event.stopPropagation()
-								}}
-								onClick={(event) => handleQuickAddContainer(event, 'object')}
-								className="flex h-6 w-6 items-center justify-center rounded-md text-blue-500/70 transition-colors hover:bg-blue-500/10 hover:text-blue-400"
-							>
-								<Box size={13} />
-							</button>
-							
-							<div className="h-3 w-px bg-white/10 mx-0.5"></div>
-							
-							<button
-								type="button"
-								title="Add Name"
-								onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
-								onClick={(e) => handleQuickAddPreset(e, 'name')}
-								className="flex h-6 w-6 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-amber-400"
-							>
-								<Type size={13} />
-							</button>
-							<button
-								type="button"
-								title="Add String"
-								onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
-								onClick={(e) => handleQuickAddPreset(e, 'string')}
-								className="flex h-6 w-6 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-amber-400"
-							>
-								<Type size={13} />
-							</button>
-							<button
-								type="button"
-								title="Add Integer"
-								onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
-								onClick={(e) => handleQuickAddPreset(e, 'int')}
-								className="flex h-6 w-6 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-purple-400"
-							>
-								<Hash size={13} />
-							</button>
-							<button
-								type="button"
-								title="Add Float"
-								onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
-								onClick={(e) => handleQuickAddPreset(e, 'float')}
-								className="flex h-6 w-6 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-fuchsia-400"
-							>
-								<FileDigit size={13} />
-							</button>
-							<button
-								type="button"
-								title="Add Boolean"
-								onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
-								onClick={(e) => handleQuickAddPreset(e, 'bool')}
-								className="flex h-6 w-6 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-rose-400"
-							>
-								<ToggleLeft size={13} />
-							</button>
-							<button
-								type="button"
-								title="Add UUID"
-								onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
-								onClick={(e) => handleQuickAddPreset(e, 'uuid')}
-								className="flex h-6 w-6 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-indigo-400"
-							>
-								<FileDigit size={13} />
-							</button>
-							<button
-								type="button"
-								title="Add Date"
-								onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); }}
-								onClick={(e) => handleQuickAddPreset(e, 'date')}
-								className="flex h-6 w-6 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-teal-400"
-							>
-								<Calendar size={13} />
-							</button>
-						</div>
-					</div>
-				)}
-			</summary>
-
-			<div className="mt-1.5 text-[13px] text-neutral-300 font-mono">
-				{(isEditingNode || isParentEditing) && (
-					<div
-						className="mb-3 ml-3 flex max-w-105 flex-wrap items-center gap-2 rounded-md border border-white/5 bg-white/5 px-2.5 py-2 shadow-sm"
-						onMouseDown={(event) => event.stopPropagation()}
-					>
-						{isArray ? (
-							<>
-								<input
-									type="text"
-									value={newArrayItemValue}
-									onChange={(event) => setNewArrayItemValue(event.target.value)}
-									onKeyDown={(event) => handleAddInputKeyDown(event, 'array')}
-									placeholder="add value"
-									className="flex-1 bg-transparent text-[13px] text-neutral-300 placeholder:text-neutral-600 focus:outline-none min-w-30"
-								/>
-								<button
-									type="button"
-									onClick={handleAddArrayItem}
-									className="inline-flex h-6 w-6 items-center justify-center rounded border border-white/10 bg-white/5 text-neutral-400 transition-colors hover:border-indigo-500/50 hover:bg-indigo-500/10 hover:text-indigo-400"
-								>
-									<Plus size={14} />
-								</button>
-							</>
-						) : (
-							<>
-								<input
-									type="text"
-									value={newObjectKey}
-									onChange={(event) => setNewObjectKey(event.target.value)}
-									onKeyDown={(event) => handleAddInputKeyDown(event, 'object')}
-									placeholder="key"
-									className="w-24 bg-transparent text-[13px] text-neutral-300 placeholder:text-neutral-600 focus:outline-none"
-								/>
-								<span className="text-neutral-600">:</span>
-								<input
-									type="text"
-									value={newObjectValue}
-									onChange={(event) => setNewObjectValue(event.target.value)}
-									onKeyDown={(event) => handleAddInputKeyDown(event, 'object')}
-									placeholder="value"
-									className="flex-1 bg-transparent text-[13px] text-neutral-300 placeholder:text-neutral-600 focus:outline-none min-w-20"
-								/>
-								<button
-									type="button"
-									onClick={handleAddObjectEntry}
-									className="inline-flex h-6 w-6 items-center justify-center rounded border border-white/10 bg-white/5 text-neutral-400 transition-colors hover:border-indigo-500/50 hover:bg-indigo-500/10 hover:text-indigo-400"
-								>
-									<Plus size={14} />
-								</button>
-							</>
-						)}
-					</div>
-				)}
-
-				{entries.length === 0 ? (
-					<div className="ml-3 text-[13px] text-neutral-600 font-mono italic">(empty)</div>
-				) : (
-					<div className="ml-3.5 border-l border-white/10 pl-3">
-						{entries.map(([entryKey, entryValue], entryIndex) => (
-							<div key={`${depth}-${String(entryKey)}`} className="group flex items-start gap-1.5 py-0.5">
-								{isExpanded && (isEditingNode || isParentEditing) && (
-									<div className="mt-1 flex flex-row gap-0.5 opacity-0 transition-opacity group-hover:opacity-100 items-start">
-										<button
-											type="button"
-											aria-label="Move up"
-											title="Move up"
-											disabled={entryIndex === 0}
-											onMouseDown={(event) => {
-												event.preventDefault()
-												event.stopPropagation()
-											}}
-											onClick={(event) => handleReorderEntry(event, entryKey, 'up')}
-											className="h-5 w-5 rounded border border-white/5 bg-transparent text-neutral-500 transition-colors disabled:opacity-30 disabled:hover:border-white/5 disabled:hover:text-neutral-500 hover:border-white/20 hover:bg-white/5 hover:text-white flex items-center justify-center"
-										>
-											<ChevronUp size={12} />
-										</button>
-										<button
-											type="button"
-											aria-label="Move down"
-											title="Move down"
-											disabled={entryIndex === entries.length - 1}
-											onMouseDown={(event) => {
-												event.preventDefault()
-												event.stopPropagation()
-											}}
-											onClick={(event) => handleReorderEntry(event, entryKey, 'down')}
-											className="h-5 w-5 rounded border border-white/5 bg-transparent text-neutral-500 transition-colors disabled:opacity-30 disabled:hover:border-white/5 disabled:hover:text-neutral-500 hover:border-white/20 hover:bg-white/5 hover:text-white flex items-center justify-center"
-										>
-											<ChevronDown size={12} />
-										</button>
-										<button
-											type="button"
-											aria-label="Delete item"
-											title="Delete item"
-											onMouseDown={(event) => {
-												event.preventDefault()
-												event.stopPropagation()
-											}}
-											onClick={(event) => handleDeleteEntry(event, entryKey)}
-											className="h-5 w-5 rounded border border-red-500/20 bg-transparent text-red-500/70 transition-colors hover:border-red-500/40 hover:bg-red-500/10 hover:text-red-400 flex items-center justify-center ml-0.5"
-										>
-											<Trash2 size={11} />
-										</button>
-									</div>
-								)}
-								<div className="flex-1 min-w-0">
-									<JsonTreeNode
-										label={isArray ? null : String(entryKey)}
-										value={entryValue}
-										depth={depth + 1}
-										path={[...path, entryKey]}
-										onUpdateNode={onUpdateNode}
-										onDuplicateNode={onDuplicateNode}
-										onDeleteNode={onDeleteNode}
-										onReorderNode={onReorderNode}
-										isParentEditing={isParentEditing || isEditingNode}
-									/>
-								</div>
-							</div>
-						))}
-					</div>
-				)}
-
-				<div className="ml-1 mt-0.5 flex items-center text-neutral-500 font-mono">
-					{isArray ? ']' : '}'}
-					{path.length > 0 && (
-						<div className="ml-3 flex items-center gap-2 opacity-70 transition-opacity hover:opacity-100">
-							<span className="text-[11px] text-neutral-500 font-sans tracking-wide">Multiply Dataset:</span>
-							<div className="flex items-center rounded-md border border-white/10 bg-[#0A0A0A] overflow-hidden focus-within:border-indigo-500/50 focus-within:ring-1 focus-within:ring-indigo-500/50 transition-all">
-								<div className="flex items-center justify-center bg-white/5 px-2 py-1 border-r border-white/5 select-none" title="Repeat count">
-									<span className="text-[12px] leading-none text-neutral-500">×</span>
-								</div>
-								<input
-									ref={repeatCountInputRef}
-									type="text"
-									value={repeatCount}
-									onChange={(event) =>
-										setRepeatCount(event.target.value.replace(/[^0-9]/g, ''))
-									}
-									onBlur={handleApplyRepeatCount}
-									onKeyDown={handleRepeatCountKeyDown}
-									onMouseDown={(event) => {
-										event.stopPropagation()
-									}}
-									onClick={(event) => event.stopPropagation()}
-									placeholder="1"
-									className="w-10 bg-transparent px-2 py-1 text-[12px] font-mono leading-none text-neutral-300 focus:outline-none"
-									title="Number of times to duplicate this node"
-								/>
-							</div>
-							<button
-								type="button"
-								aria-label="Delete node"
-								title="Delete"
-								onMouseDown={(event) => {
-									event.preventDefault()
-									event.stopPropagation()
-								}}
-								onClick={handleDeleteNode}
-								className="flex h-6 w-6 items-center justify-center rounded-md border border-red-500/20 bg-transparent text-red-500/70 transition-colors hover:border-red-500/40 hover:bg-red-500/10 hover:text-red-400 cursor-pointer"
-							>
-								<Trash2 size={13} />
-							</button>
-						</div>
-					)}
-				</div>
-			</div>
-		</details>
-	)
-}
-
-export default function DatasetEditor({ isOpen, endpoint, endpointIndex, onClose, onSaveField }) {
-	const [editingField, setEditingField] = useState(null)
-	const [editorValue, setEditorValue] = useState('')
-	const [showHelp, setShowHelp] = useState(false)
-	const editorRef = useRef(null)
-
-	useEffect(() => {
-		if (!editorRef.current || !editingField) {
-			return
-		}
-
-		const editorElement = editorRef.current
-		editorElement.style.height = 'auto'
-
-		const maxHeight = window.innerHeight * 0.5
-		const nextHeight = Math.min(editorElement.scrollHeight, maxHeight)
-		editorElement.style.height = `${nextHeight}px`
-		editorElement.style.overflowY = 'hidden'
-	}, [editorValue, editingField])
-
-	const formatEndpointValue = (value) => {
-		if (typeof value === 'string') {
-			return value
-		}
-
-		return JSON.stringify(value, null, 2)
-	}
-
-	const parseEditorValue = (value) => {
-		const trimmedValue = value.trim()
-
-		if (!trimmedValue) {
-			return ''
-		}
-
-		try {
-			return JSON.parse(trimmedValue)
-		} catch {
-			return value
-		}
-	}
-
-	const handleStartFieldEdit = (field) => {
-		if (!endpoint) {
-			return
-		}
-
-		setEditingField(field)
-		setEditorValue(formatEndpointValue(endpoint[field]))
-	}
-
-	const getPreviewClassName = () => {
-		return 'max-h-[50vh] cursor-text overflow-y-auto whitespace-pre-wrap wrap-break-word rounded-xl border border-white/5 bg-[#0c0c0c] p-4 text-[13px] font-mono text-neutral-300'
-	}
-
-	const getEditorClassName = () => {
-		return 'max-h-[50vh] w-full resize-none overflow-hidden rounded-xl border border-white/10 bg-[#0c0c0c] p-4 text-[13px] font-mono text-neutral-300 focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 focus:outline-none transition-all'
-	}
-
-	const handleCancelFieldEdit = () => {
-		setEditingField(null)
-		setEditorValue('')
-	}
-
-	const handleCloseDrawer = () => {
-		handleCancelFieldEdit()
-		onClose()
-	}
-
-	const handleSaveFieldEdit = () => {
-		if (!editingField || endpointIndex === null) {
-			return
-		}
-
-		onSaveField(endpointIndex, editingField, parseEditorValue(editorValue))
-		handleCancelFieldEdit()
-	}
-
-	const handleEditorKeyDown = (event) => {
-		if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
-			event.preventDefault()
-			handleSaveFieldEdit()
-			return
-		}
-
-		if (event.key === 'Escape') {
-			event.preventDefault()
-			handleCancelFieldEdit()
-		}
-	}
-
-	const parseDataForViewer = (value) => {
-		if (typeof value === 'string') {
-			try {
-				return JSON.parse(value)
-			} catch {
-				return null
-			}
-		}
-
-		return value
-	}
-
-	const updateDataAtPath = (source, path, nextValue) => {
-		if (path.length === 0) {
-			return nextValue
-		}
-
-		const [segment, ...restPath] = path
-
-		if (Array.isArray(source)) {
-			const nextArray = [...source]
-			nextArray[segment] = updateDataAtPath(nextArray[segment], restPath, nextValue)
-			return nextArray
-		}
-
-		if (source !== null && typeof source === 'object') {
-			return {
-				...source,
-				[segment]: updateDataAtPath(source[segment], restPath, nextValue),
-			}
-		}
-
-		return source
-	}
-
-	const handleUpdateDataNode = (path, nextValue) => {
-		if (endpointIndex === null || endpoint.data === undefined) {
-			return
-		}
-
-		const currentData = parseDataForViewer(endpoint.data)
-		if (currentData === null) {
-			return
-		}
-
-		const updatedData = updateDataAtPath(currentData, path, nextValue)
-		onSaveField(endpointIndex, 'data', updatedData)
-	}
-
-	const deepClone = (value) => {
-		if (typeof structuredClone === 'function') {
-			return structuredClone(value)
-		}
-
-		return JSON.parse(JSON.stringify(value))
-	}
-
-	const getValueAtPath = (source, path) => {
-		let currentValue = source
-
-		for (const segment of path) {
-			if (currentValue === null || typeof currentValue !== 'object') {
-				return undefined
-			}
-
-			currentValue = currentValue[segment]
-		}
-
-		return currentValue
-	}
-
-	const buildDuplicatedObject = (parentObject, key, count, targetValue) => {
-		const nextObject = {}
-
-		for (const [entryKey, entryValue] of Object.entries(parentObject)) {
-			nextObject[entryKey] = entryValue
-
-			if (entryKey === key) {
-				for (let index = 2; index <= count; index += 1) {
-					let duplicateKey = `${key}_${index}`
-					let suffix = 1
-
-					while (Object.prototype.hasOwnProperty.call(nextObject, duplicateKey)) {
-						duplicateKey = `${key}_${index}_${suffix}`
-						suffix += 1
-					}
-
-					nextObject[duplicateKey] = deepClone(targetValue)
-				}
-			}
-		}
-
-		return nextObject
-	}
-
-	const handleDuplicateDataNode = (path, count) => {
-		if (endpointIndex === null || endpoint.data === undefined || count <= 1) {
-			return
-		}
-
-		const currentData = parseDataForViewer(endpoint.data)
-		if (currentData === null) {
-			return
-		}
-
-		if (path.length === 0) {
-			const duplicatedRoot = Array.from({ length: count }, () => deepClone(currentData))
-			onSaveField(endpointIndex, 'data', duplicatedRoot)
-			return
-		}
-
-		const parentPath = path.slice(0, -1)
-		const segment = path[path.length - 1]
-		const parentValue = getValueAtPath(currentData, parentPath)
-
-		if (Array.isArray(parentValue)) {
-			const targetIndex = Number(segment)
-			if (!Number.isInteger(targetIndex) || targetIndex < 0 || targetIndex >= parentValue.length) {
-				return
-			}
-
-			const targetValue = parentValue[targetIndex]
-			const duplicatedValues = Array.from({ length: count }, () => deepClone(targetValue))
-			const nextParentArray = [
-				...parentValue.slice(0, targetIndex),
-				...duplicatedValues,
-				...parentValue.slice(targetIndex + 1),
-			]
-			const updatedData = updateDataAtPath(currentData, parentPath, nextParentArray)
-			onSaveField(endpointIndex, 'data', updatedData)
-			return
-		}
-
-		if (parentValue !== null && typeof parentValue === 'object') {
-			const targetKey = String(segment)
-			if (!Object.prototype.hasOwnProperty.call(parentValue, targetKey)) {
-				return
-			}
-
-			const targetValue = parentValue[targetKey]
-			const nextParentObject = buildDuplicatedObject(parentValue, targetKey, count, targetValue)
-			const updatedData = updateDataAtPath(currentData, parentPath, nextParentObject)
-			onSaveField(endpointIndex, 'data', updatedData)
-		}
-	}
-
-	const handleDeleteDataNode = (path) => {
-		if (endpointIndex === null || endpoint.data === undefined || path.length === 0) {
-			return
-		}
-
-		const currentData = parseDataForViewer(endpoint.data)
-		if (currentData === null) {
-			return
-		}
-
-		const parentPath = path.slice(0, -1)
-		const segment = path[path.length - 1]
-		const parentValue = getValueAtPath(currentData, parentPath)
-
-		if (Array.isArray(parentValue)) {
-			const targetIndex = Number(segment)
-			if (!Number.isInteger(targetIndex) || targetIndex < 0 || targetIndex >= parentValue.length) {
-				return
-			}
-
-			const nextParentArray = parentValue.filter((_, index) => index !== targetIndex)
-			const updatedData = updateDataAtPath(currentData, parentPath, nextParentArray)
-			onSaveField(endpointIndex, 'data', updatedData)
-			return
-		}
-
-		if (parentValue !== null && typeof parentValue === 'object') {
-			const targetKey = String(segment)
-			if (!Object.prototype.hasOwnProperty.call(parentValue, targetKey)) {
-				return
-			}
-
-			const nextParentObject = { ...parentValue }
-			delete nextParentObject[targetKey]
-			const updatedData = updateDataAtPath(currentData, parentPath, nextParentObject)
-			onSaveField(endpointIndex, 'data', updatedData)
-		}
-	}
-
-	const handleReorderDataNode = (path, direction) => {
-		if (endpointIndex === null || endpoint.data === undefined || path.length === 0) {
-			return
-		}
-
-		const currentData = parseDataForViewer(endpoint.data)
-		if (currentData === null) {
-			return
-		}
-
-		const parentPath = path.slice(0, -1)
-		const segment = path[path.length - 1]
-		const parentValue = getValueAtPath(currentData, parentPath)
-
-		if (Array.isArray(parentValue)) {
-			const currentIndex = Number(segment)
-			if (!Number.isInteger(currentIndex)) {
-				return
-			}
-
-			const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1
-			if (targetIndex < 0 || targetIndex >= parentValue.length) {
-				return
-			}
-
-			const nextParentArray = [...parentValue]
-			const tempValue = nextParentArray[currentIndex]
-			nextParentArray[currentIndex] = nextParentArray[targetIndex]
-			nextParentArray[targetIndex] = tempValue
-
-			const updatedData = updateDataAtPath(currentData, parentPath, nextParentArray)
-			onSaveField(endpointIndex, 'data', updatedData)
-			return
-		}
-
-		if (parentValue !== null && typeof parentValue === 'object') {
-			const keys = Object.keys(parentValue)
-			const currentIndex = keys.indexOf(String(segment))
-			if (currentIndex === -1) {
-				return
-			}
-
-			const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1
-			if (targetIndex < 0 || targetIndex >= keys.length) {
-				return
-			}
-
-			const nextKeys = [...keys]
-			const tempKey = nextKeys[currentIndex]
-			nextKeys[currentIndex] = nextKeys[targetIndex]
-			nextKeys[targetIndex] = tempKey
-
-			const nextParentObject = {}
-			for (const key of nextKeys) {
-				nextParentObject[key] = parentValue[key]
-			}
-
-			const updatedData = updateDataAtPath(currentData, parentPath, nextParentObject)
-			onSaveField(endpointIndex, 'data', updatedData)
-		}
-	}
-
-	if (!isOpen || endpointIndex === null || !endpoint) {
-		return null
-	}
-
-	const parsedDataForViewer = endpoint.data !== undefined ? parseDataForViewer(endpoint.data) : null
-	const modalContent = (
-		<>
-			<div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-[2px]" onClick={handleCloseDrawer} />
-			<div className="fixed inset-0 z-50 grid place-items-center p-3 md:p-6">
-				<aside className="w-[94vw] max-w-5xl">
-					<div className="flex h-[min(86vh,920px)] w-full flex-col rounded-xl border border-white/10 bg-[#0A0A0A] shadow-2xl overflow-hidden">
-						<div className="flex items-center justify-between border-b border-white/5 bg-white/5 px-4 py-3">
-							<div className="flex items-center gap-2">
-								<h2 className="text-sm font-medium text-neutral-200">Dataset Configuration</h2>
-							</div>
-							<div className="flex items-center gap-2">
-								<button
-									onClick={() => setShowHelp(true)}
-									className="flex items-center gap-2 rounded-lg p-1.5 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
-									title="Help Guide"
-								>
-									<span className="text-xs">How to Use</span>
-									<HelpCircle className="h-4 w-4" />
-								</button>
-								<button
-									onClick={handleCloseDrawer}
-									className="rounded-lg p-1.5 text-neutral-400 transition-colors hover:bg-white/10 hover:text-white"
-								>
-									<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-								</button>
-							</div>
-						</div>
-
-						<div className="min-h-0 flex-1 overflow-y-auto p-6 bg-[#0c0c0c]">
-							<div className="mb-6 inline-flex rounded border border-indigo-500/20 bg-indigo-500/10 px-3 py-1.5 text-xs font-mono text-indigo-400">
-								{endpoint.method} {endpoint.path}
-							</div>
-
-							{endpoint.data !== undefined && (
-								<div className="mb-6">
-									<h3 className="mb-3 text-[11px] font-semibold uppercase tracking-wider text-neutral-500 flex items-center gap-2">
-										<svg className="h-3.5 w-3.5 text-indigo-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
-										Response Data
-									</h3>
-									<div className={getPreviewClassName()} title="JSON dataset preview">
-										{parsedDataForViewer === null ? (
-											<div>
-												<p className="mb-2 text-sm text-red-400">Data is not valid JSON.</p>
-												<pre className="whitespace-pre-wrap wrap-break-word font-mono text-sm text-neutral-200">
-													{String(endpoint.data)}
-												</pre>
-											</div>
-										) : (
-											<JsonTreeNode
-												label={null}
-												value={parsedDataForViewer}
-												path={[]}
-												onUpdateNode={handleUpdateDataNode}
-												onDuplicateNode={handleDuplicateDataNode}
-												onDeleteNode={handleDeleteDataNode}
-												onReorderNode={handleReorderDataNode}
-											/>
-										)}
-									</div>
-								</div>
-							)}
-
-							{endpoint.template !== undefined && (
-								<div className="mb-6">
-									<h3 className="mb-3 text-[11px] font-semibold uppercase tracking-wider text-neutral-500 flex items-center gap-2">
-										<svg className="h-3.5 w-3.5 text-emerald-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
-										Template Editor
-									</h3>
-									{editingField === 'template' ? (
-										<textarea
-											ref={editorRef}
-											autoFocus
-											value={editorValue}
-											onChange={(event) => setEditorValue(event.target.value)}
-											onBlur={handleSaveFieldEdit}
-											onKeyDown={handleEditorKeyDown}
-											className={getEditorClassName()}
-										/>
-									) : (
-										<pre
-											onDoubleClick={() => handleStartFieldEdit('template')}
-											className={getPreviewClassName() + ' hover:border-white/10 hover:bg-white/5 transition-colors'}
-											title="Double-click to edit"
-										>
-											{typeof endpoint.template === 'string'
-												? endpoint.template
-												: JSON.stringify(endpoint.template, null, 2)}
-										</pre>
-									)}
-								</div>
-							)}
-
-							{endpoint.data === undefined && endpoint.template === undefined && (
-								<div className="flex flex-col items-center justify-center py-12 text-center border border-dashed border-white/10 rounded-xl bg-white/5">
-									<svg className="h-8 w-8 text-neutral-500 mb-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
-									<p className="text-sm font-medium text-neutral-300">No data configured</p>
-									<p className="text-xs text-neutral-500 mt-1">This endpoint has no data or template configuration.</p>
-								</div>
-							)}
-						</div>
-					</div>
-				</aside>
-
-				<AnimatePresence>
-					{showHelp && (
-						<motion.div
-							initial={{ opacity: 0, scale: 0.95, y: 20 }}
-							animate={{ opacity: 1, scale: 1, y: 0 }}
-							exit={{ opacity: 0, scale: 0.95, y: 20 }}
-							transition={{ duration: 0.2 }}
-							className="absolute top-20 right-6 z-60 w-80 rounded-xl border border-white/10 bg-[#111] shadow-2xl p-5"
-						>
-							<div className="flex items-center justify-between mb-4">
-								<h3 className="text-sm font-semibold text-neutral-200">Dataset Editor Guide</h3>
-								<button
-									onClick={() => setShowHelp(false)}
-									className="text-neutral-500 hover:text-white transition-colors"
-								>
-									<X size={16} />
-								</button>
-							</div>
-
-							<div className="space-y-4 text-[13px] text-neutral-400">
-								<div>
-									<h4 className="text-indigo-400 font-medium mb-1">Repetition Syntax</h4>
-									<p>Hover over any array or object closing bracket (<code className="text-neutral-300">]</code> or <code className="text-neutral-300">{`}`}</code>) to reveal the duplicate multiplier and multiply your mock data items seamlessly.</p>
-								</div>
-
-								<div>
-									<h4 className="text-indigo-400 font-medium mb-1">Quick Add</h4>
-									<p>Hover over the opening bracket of an object to add new arrays/objects or quickly insert preset mock tokens like <code className="text-neutral-300">$name</code> or <code className="text-neutral-300">$uuid</code>.</p>
-								</div>
-
-								<div>
-									<h4 className="text-indigo-400 font-medium mb-1">Edit Keys & Values</h4>
-									<p>Click on any key or straight-value inline to quickly edit them. Hit Enter or blur to save your changes immediately.</p>
-								</div>
-
-								<div>
-									<h4 className="text-indigo-400 font-medium mb-1">Reversing Changes</h4>
-									<p>Hit the <code className="text-neutral-300">Edit</code> button to start modifying a large block or revert any unwanted items natively without restarting.</p>
-								</div>
-							</div>
-						</motion.div>
-					)}
-				</AnimatePresence>
-			</div>
-		</>
-	)
-
-	return createPortal(modalContent, document.body)
-}