Fix #272 split generator page

src/app/components/ErrorPanel.tsx

@@ -1,3 +1,4 @@
+import type { ComponentChildren } from 'preact'
 import { getCurrentUrl } from 'preact-router'
 import { useEffect, useMemo, useState } from 'preact/hooks'
 import { useVersion } from '../contexts/Version.jsx'
@@ -8,9 +9,11 @@ import { Octicon } from './index.js'
 
 type ErrorPanelProps = {
 	error: string | Error,
+	reportable?: boolean,
 	onDismiss?: () => unknown,
+	children?: ComponentChildren,
 }
-export function ErrorPanel({ error, onDismiss }: ErrorPanelProps) {
+export function ErrorPanel({ error, reportable, onDismiss, children }: ErrorPanelProps) {
 	const { version } = useVersion()
 	const [stackVisible, setStackVisible] = useState(false)
 	const [stack, setStack] = useState<string | undefined>(undefined)
@@ -64,6 +67,7 @@ export function ErrorPanel({ error, onDismiss }: ErrorPanelProps) {
 			</span>}
 		</h3>
 		{stack && stackVisible && <pre>{stack}</pre>}
-		<p>If you think this is a bug, you can report it <a href={url} target="_blank">on GitHub</a></p>
+		{reportable !== false && <p>If you think this is a bug, you can report it <a href={url} target="_blank">on GitHub</a></p>}
+		{children}
 	</div>
 }

src/app/components/generator/SchemaGenerator.tsx

@@ -0,0 +1,365 @@
+import { DataModel, Path } from '@mcschema/core'
+import { route } from 'preact-router'
+import { useCallback, useEffect, useErrorBoundary, useMemo, useRef, useState } from 'preact/hooks'
+import { Analytics } from '../../Analytics.js'
+import type { ConfigGenerator } from '../../Config.js'
+import config from '../../Config.js'
+import { DRAFT_PROJECT, useLocale, useProject, useVersion } from '../../contexts/index.js'
+import { AsyncCancel, useActiveTimeout, useAsync, useModel, useSearchParam } from '../../hooks/index.js'
+import { getOutput } from '../../schema/transformOutput.js'
+import type { VersionId } from '../../services/index.js'
+import { checkVersion, fetchPreset, getBlockStates, getCollections, getModel, getSnippet, shareSnippet } from '../../services/index.js'
+import { Store } from '../../Store.js'
+import { cleanUrl, deepEqual } from '../../Utils.js'
+import { Ad, Btn, BtnMenu, ErrorPanel, FileCreation, FileRenaming, Footer, HasPreview, Octicon, PreviewPanel, ProjectCreation, ProjectDeletion, ProjectPanel, SearchList, SourcePanel, TextInput, Tree, VersionSwitcher } from '../index.js'
+
+export const SHARE_KEY = 'share'
+
+interface Props {
+	gen: ConfigGenerator
+	allowedVersions: VersionId[],
+}
+export function SchemaGenerator({ gen, allowedVersions }: Props) {
+	const { locale } = useLocale()
+	const { version, changeVersion, changeTargetVersion } = useVersion()
+	const { projects, project, file, updateProject, updateFile } = useProject()
+	const [error, setError] = useState<Error | string | null>(null)
+	const [errorBoundary, errorRetry] = useErrorBoundary()
+	if (errorBoundary) {
+		errorBoundary.message = `Something went wrong rendering the generator: ${errorBoundary.message}`
+		return <main><ErrorPanel error={errorBoundary} onDismiss={errorRetry} /></main>
+	}
+
+	useEffect(() => Store.visitGenerator(gen.id), [gen.id])
+
+	const [currentPreset, setCurrentPreset] = useSearchParam('preset')
+	const [sharedSnippetId, setSharedSnippetId] = useSearchParam(SHARE_KEY)
+	const ignoreChange = useRef(false)
+	const backup = useMemo(() => Store.getBackup(gen.id), [gen.id])
+
+	const loadBackup = () => {
+		if (backup !== undefined) {
+			model?.reset(DataModel.wrapLists(backup), false)
+		}
+	}
+
+	const { value } = useAsync(async () => {
+		let data: unknown = undefined
+		if (currentPreset && sharedSnippetId) {
+			setSharedSnippetId(undefined)
+			return AsyncCancel
+		}
+		if (currentPreset) {
+			data = await loadPreset(currentPreset)
+		} else if (sharedSnippetId) {
+			const snippet = await getSnippet(sharedSnippetId)
+			let cancel = false
+			if (snippet.version && snippet.version !== version) {
+				changeVersion(snippet.version, false)
+				cancel = true
+			}
+			if (snippet.type && snippet.type !== gen.id) {
+				const snippetGen = config.generators.find(g => g.id === snippet.type)
+				if (snippetGen) {
+					route(`${cleanUrl(snippetGen.url)}?${SHARE_KEY}=${snippet.id}`)
+					cancel = true
+				}
+			}
+			if (cancel) {
+				return AsyncCancel
+			}
+			if (snippet.show_preview && !previewShown) {
+				setPreviewShown(true)
+				setSourceShown(false)
+			}
+			Analytics.openSnippet(gen.id, sharedSnippetId, version)
+			data = snippet.data
+		} else if (file) {
+			if (project.version && project.version !== version) {
+				changeVersion(project.version, false)
+				return AsyncCancel
+			}
+			data = file.data
+		}
+		const [model, blockStates] = await Promise.all([
+			getModel(version, gen.id),
+			getBlockStates(version),
+		])
+		if (data) {
+			ignoreChange.current = true
+			model.reset(DataModel.wrapLists(data), false)
+		}
+		Analytics.setGenerator(gen.id)
+		return { model, blockStates }
+	}, [gen.id, version, sharedSnippetId, currentPreset, project.name, file?.id])
+
+	const model = value?.model
+	const blockStates = value?.blockStates
+
+	useModel(model, model => {
+		if (!ignoreChange.current) {
+			setCurrentPreset(undefined, true)
+			setSharedSnippetId(undefined, true)
+		}
+		if (file && model && blockStates) {
+			const data = getOutput(model, blockStates)
+			updateFile(gen.id, file.id, { id: file.id, data })
+		}
+		ignoreChange.current = false
+		Store.setBackup(gen.id, DataModel.unwrapLists(model.data))
+		setError(null)
+	}, [gen.id, setCurrentPreset, setSharedSnippetId, blockStates, file?.id])
+
+	const reset = () => {
+		Analytics.resetGenerator(gen.id, model?.historyIndex ?? 1, 'menu')
+		model?.reset(DataModel.wrapLists(model.schema.default()), true)
+	}
+	const undo = (e: MouseEvent) => {
+		e.stopPropagation()
+		Analytics.undoGenerator(gen.id, model?.historyIndex ?? 1, 'menu')
+		model?.undo()
+	}
+	const redo = (e: MouseEvent) => {
+		e.stopPropagation()
+		Analytics.redoGenerator(gen.id, model?.historyIndex ?? 1, 'menu')
+		model?.redo()
+	}
+
+	const onKeyUp = (e: KeyboardEvent) => {
+		if (e.ctrlKey && e.key === 'z') {
+			Analytics.undoGenerator(gen.id, model?.historyIndex ?? 1, 'hotkey')
+			model?.undo()
+		} else if (e.ctrlKey && e.key === 'y') {
+			Analytics.redoGenerator(gen.id, model?.historyIndex ?? 1, 'hotkey')
+			model?.redo()
+		}
+	}
+	const onKeyDown = (e: KeyboardEvent) => {
+		if (e.ctrlKey && e.key === 's') {
+			setFileSaving('hotkey')
+			e.preventDefault()
+			e.stopPropagation()
+		}
+	}
+	useEffect(() => {
+		document.addEventListener('keyup', onKeyUp)
+		document.addEventListener('keydown', onKeyDown)
+		return () => {
+			document.removeEventListener('keyup', onKeyUp)
+			document.removeEventListener('keydown', onKeyDown)
+		}
+	}, [model, blockStates, file])
+
+	const [presets, setPresets] = useState<string[]>([])
+	useEffect(() => {
+		getCollections(version).then(collections => {
+			setPresets(collections.get(gen.id).map(p => p.startsWith('minecraft:') ? p.slice(10) : p))
+		})
+			.catch(e => { console.error(e); setError(e) })
+	}, [version, gen.id])
+
+	const selectPreset = (id: string) => {
+		Analytics.loadPreset(gen.id, id)
+		setSharedSnippetId(undefined, true)
+		changeTargetVersion(version, true)
+		setCurrentPreset(id)
+	}
+
+	const loadPreset = async (id: string) => {
+		try {
+			const preset = await fetchPreset(version, gen.path ?? gen.id, id)
+			const seed = model?.get(new Path(['generator', 'seed']))
+			if (preset?.generator?.seed !== undefined && seed !== undefined) {
+				preset.generator.seed = seed
+				if (preset.generator.biome_source?.seed !== undefined) {
+					preset.generator.biome_source.seed = seed
+				}
+			}
+			return preset
+		} catch (e) {
+			setError(`Cannot load preset ${id} in ${version}`)
+			setCurrentPreset(undefined, true)
+		}
+	}
+
+	const selectVersion = (version: VersionId) => {
+		setSharedSnippetId(undefined, true)
+		changeVersion(version)
+		if (project.name !== DRAFT_PROJECT.name && project.version !== version) {
+			updateProject({ version })
+		}
+	}
+
+	const [shareUrl, setShareUrl] = useState<string | undefined>(undefined)
+	const [shareShown, setShareShown] = useState(false)
+	const [shareCopyActive, shareCopySuccess] = useActiveTimeout({ cooldown: 3000 })
+	const share = () => {
+		if (shareShown) {
+			setShareShown(false)
+			return
+		}
+		if (currentPreset) {
+			setShareUrl(`${location.origin}/${gen.url}/?version=${version}&preset=${currentPreset}`)
+			setShareShown(true)
+			copySharedId()
+		} else if (model && blockStates) {
+			const output = getOutput(model, blockStates)
+			if (deepEqual(output, model.schema.default())) {
+				setShareUrl(`${location.origin}/${gen.url}/?version=${version}`)
+				setShareShown(true)
+			} else {
+				shareSnippet(gen.id, version, output, previewShown)
+					.then(({ id, length, compressed, rate }) => {
+						Analytics.createSnippet(gen.id, id, version, length, compressed, rate)
+						const url = `${location.origin}/${gen.url}/?${SHARE_KEY}=${id}`
+						setShareUrl(url)
+						setShareShown(true)
+					})
+					.catch(e => {
+						if (e instanceof Error) {
+							setError(e)
+						}
+					})
+			}
+		}
+	}
+	const copySharedId = () => {
+		navigator.clipboard.writeText(shareUrl ?? '')
+		shareCopySuccess()
+	}
+	useEffect(() => {
+		if (!shareCopyActive) {
+			setShareUrl(undefined)
+			setShareShown(false)
+		}
+	}, [shareCopyActive])
+
+	const [sourceShown, setSourceShown] = useState(window.innerWidth > 820)
+	const [doCopy, setCopy] = useState(0)
+	const [doDownload, setDownload] = useState(0)
+	const [doImport, setImport] = useState(0)
+
+	const copySource = () => {
+		Analytics.copyOutput(gen.id, 'menu')
+		setCopy(doCopy + 1)
+	}
+	const downloadSource = () => {
+		Analytics.downloadOutput(gen.id, 'menu')
+		setDownload(doDownload + 1)
+	}
+	const importSource = () => {
+		Analytics.generatorEvent('import')
+		setSourceShown(true)
+		setImport(doImport + 1)
+	}
+	const toggleSource = () => {
+		if (sourceShown) {
+			Analytics.hideOutput(gen.id, 'menu')
+		} else {
+			Analytics.showOutput(gen.id, 'menu')
+		}
+		setSourceShown(!sourceShown)
+		setCopy(0)
+		setDownload(0)
+		setImport(0)
+	}
+
+	const [copyActive, copySuccess] = useActiveTimeout()
+
+	const [previewShown, setPreviewShown] = useState(Store.getPreviewPanelOpen() ?? window.innerWidth > 800)
+	const hasPreview = HasPreview.includes(gen.id) && !(gen.id === 'worldgen/configured_feature' && checkVersion(version, '1.18'))
+	if (previewShown && !hasPreview) setPreviewShown(false)
+	let actionsShown = 2
+	if (hasPreview) actionsShown += 1
+	if (sourceShown) actionsShown += 2
+
+	const togglePreview = () => {
+		if (sourceShown) {
+			Analytics.hidePreview(gen.id, 'menu')
+		} else {
+			Analytics.showPreview(gen.id, 'menu')
+		}
+		setPreviewShown(!previewShown)
+		if (!previewShown && sourceShown) {
+			setSourceShown(false)
+		}
+	}
+
+	const [projectShown, setProjectShown] = useState(Store.getProjectPanelOpen() ?? window.innerWidth > 1000)
+	const toggleProjectShown = useCallback(() => {
+		if (projectShown) {
+			Analytics.hideProject(gen.id, projects.length, project.files.length, 'menu')
+		} else {
+			Analytics.showProject(gen.id, projects.length, project.files.length, 'menu')
+		}
+		Store.setProjectPanelOpen(!projectShown)
+		setProjectShown(!projectShown)
+	}, [projectShown])
+
+	const [projectCreating, setProjectCreating] = useState(false)
+	const [projectDeleting, setprojectDeleting] = useState(false)
+	const [fileSaving, setFileSaving] = useState<string | undefined>(undefined)
+	const [fileRenaming, setFileRenaming] = useState<{ type: string, id: string } | undefined>(undefined)
+
+	return <>
+		<main class={`generator${previewShown ? ' has-preview' : ''}${projectShown ? ' has-project' : ''}`}>
+			{!gen.partner && <Ad id="data-pack-generator" type="text" />}
+			<div class="controls generator-controls">
+				<Btn icon="upload" label={locale('import')} onClick={importSource} />
+				<BtnMenu icon="archive" label={locale('presets')} relative={false}>
+					<SearchList searchPlaceholder={locale('search')} noResults={locale('no_presets')} values={presets} onSelect={selectPreset}/>
+				</BtnMenu>
+				<VersionSwitcher value={version} onChange={selectVersion} allowed={allowedVersions} />
+				<BtnMenu icon="kebab_horizontal" tooltip={locale('more')}>
+					<Btn icon="history" label={locale('reset_default')} onClick={reset} />
+					{backup !== undefined && <Btn icon="history" label={locale('restore_backup')} onClick={loadBackup} />}
+					<Btn icon="arrow_left" label={locale('undo')} onClick={undo} />
+					<Btn icon="arrow_right" label={locale('redo')} onClick={redo} />
+					<Btn icon="file" label={locale('project.save')} onClick={() => setFileSaving('menu')} />
+				</BtnMenu>
+			</div>
+			{error && <ErrorPanel error={error} onDismiss={() => setError(null)} />}
+			<Tree {...{model, version, blockStates}} onError={setError} />
+			<Footer donate={!gen.partner} />
+		</main>
+		<div class="popup-actions right-actions" style={`--offset: -${8 + actionsShown * 50}px;`}>
+			<div class={`popup-action action-preview${hasPreview ? ' shown' : ''} tooltipped tip-nw`} aria-label={locale(previewShown ? 'hide_preview' : 'show_preview')} onClick={togglePreview}>
+				{previewShown ? Octicon.x_circle : Octicon.play}
+			</div>
+			<div class={'popup-action action-share shown tooltipped tip-nw'} aria-label={locale('share')} onClick={share}>
+				{Octicon.link}
+			</div>
+			<div class={`popup-action action-download${sourceShown ? ' shown' : ''} tooltipped tip-nw`} aria-label={locale('download')} onClick={downloadSource}>
+				{Octicon.download}
+			</div>
+			<div class={`popup-action action-copy${sourceShown ? ' shown' : ''}${copyActive ? ' active' : ''} tooltipped tip-nw`} aria-label={locale(copyActive ? 'copied' : 'copy')} onClick={copySource}>
+				{copyActive ? Octicon.check : Octicon.clippy}
+			</div>
+			<div class={'popup-action action-code shown tooltipped tip-nw'} aria-label={locale(sourceShown ? 'hide_output' : 'show_output')} onClick={toggleSource}>
+				{sourceShown ? Octicon.chevron_right : Octicon.code}
+			</div>
+		</div>
+		<div class={`popup-preview${previewShown ? ' shown' : ''}`}>
+			<PreviewPanel {...{model, version, id: gen.id}} shown={previewShown} onError={setError} />
+		</div>
+		<div class={`popup-source${sourceShown ? ' shown' : ''}`}>
+			<SourcePanel {...{model, blockStates, doCopy, doDownload, doImport}} name={gen.schema ?? 'data'} copySuccess={copySuccess} onError={setError} />
+		</div>
+		<div class={`popup-share${shareShown ? ' shown' : ''}`}>
+			<TextInput value={shareUrl} readonly />
+			<Btn icon={shareCopyActive ? 'check' : 'clippy'} onClick={copySharedId} tooltip={locale(shareCopyActive ? 'copied' : 'copy_share')} tooltipLoc="nw" active={shareCopyActive} />
+		</div>
+		<div class="popup-actions left-actions" style="--offset: 50px;">
+			<div class={'popup-action action-project shown tooltipped tip-ne'} aria-label={locale(projectShown ? 'hide_project' : 'show_project')} onClick={toggleProjectShown}>
+				{projectShown ? Octicon.chevron_left : Octicon.repo}
+			</div>
+		</div>
+		<div class={`popup-project${projectShown ? ' shown' : ''}`}>
+			<ProjectPanel {...{model, version, id: gen.id}} onError={setError} onDeleteProject={() => setprojectDeleting(true)} onRename={setFileRenaming} onCreate={() => setProjectCreating(true)} />
+		</div>
+		{projectCreating && <ProjectCreation onClose={() => setProjectCreating(false)} />}
+		{projectDeleting && <ProjectDeletion onClose={() => setprojectDeleting(false)} />}
+		{model && fileSaving && <FileCreation id={gen.id} model={model} method={fileSaving} onClose={() => setFileSaving(undefined)} />}
+		{fileRenaming && <FileRenaming id={fileRenaming.type } name={fileRenaming.id} onClose={() => setFileRenaming(undefined)} />}
+	</>
+}

src/app/pages/Generator.tsx

@@ -1,16 +1,12 @@
-import { DataModel, Path } from '@mcschema/core'
 import { getCurrentUrl, route } from 'preact-router'
-import { useCallback, useEffect, useErrorBoundary, useMemo, useRef, useState } from 'preact/hooks'
+import { useMemo } from 'preact/hooks'
-import { Analytics } from '../Analytics.js'
+import { SchemaGenerator } from '../components/generator/SchemaGenerator.jsx'
-import { Ad, Btn, BtnMenu, ErrorPanel, FileCreation, FileRenaming, Footer, HasPreview, Octicon, PreviewPanel, ProjectCreation, ProjectDeletion, ProjectPanel, SearchList, SourcePanel, TextInput, Tree, VersionSwitcher } from '../components/index.js'
+import { ErrorPanel, Octicon } from '../components/index.js'
 import config from '../Config.js'
-import { DRAFT_PROJECT, useLocale, useProject, useTitle, useVersion } from '../contexts/index.js'
+import { useLocale, useTitle, useVersion } from '../contexts/index.js'
-import { AsyncCancel, useActiveTimeout, useAsync, useModel, useSearchParam } from '../hooks/index.js'
-import { getOutput } from '../schema/transformOutput.js'
 import type { VersionId } from '../services/index.js'
-import { checkVersion, fetchPreset, getBlockStates, getCollections, getModel, getSnippet, shareSnippet } from '../services/index.js'
+import { checkVersion } from '../services/index.js'
-import { Store } from '../Store.js'
+import { getGenerator } from '../Utils.js'
-import { cleanUrl, deepEqual, getGenerator } from '../Utils.js'
 
 export const SHARE_KEY = 'share'
 
@@ -19,18 +15,11 @@ interface Props {
 }
 export function Generator({}: Props) {
 	const { locale } = useLocale()
-	const { version, changeVersion, changeTargetVersion } = useVersion()
+	const { version, changeVersion } = useVersion()
-	const { projects, project, file, updateProject, updateFile } = useProject()
-	const [error, setError] = useState<Error | string | null>(null)
-	const [errorBoundary, errorRetry] = useErrorBoundary()
-	if (errorBoundary) {
-		errorBoundary.message = `Something went wrong rendering the generator: ${errorBoundary.message}`
-		return <main><ErrorPanel error={errorBoundary} onDismiss={errorRetry} /></main>
-	}
 
 	const gen = getGenerator(getCurrentUrl())
 	if (!gen) {
-		return <main><ErrorPanel error={`Cannot find generator "${getCurrentUrl()}"`} /></main>
+		return <main><ErrorPanel error={locale('generator.not_found', getCurrentUrl())} /></main>
 	}
 
 	const allowedVersions = useMemo(() => {
@@ -42,343 +31,21 @@ export function Generator({}: Props) {
 
 	useTitle(locale('title.generator', locale(gen.partner ? `partner.${gen.partner}.${gen.id}` : gen.id)), allowedVersions)
 
-	if (!checkVersion(version, gen.minVersion)) {
+	if (!checkVersion(version, gen.minVersion, gen.maxVersion)) {
-		setError(`The minimum version for this generator is ${gen.minVersion}`)
+		const lower = !checkVersion(version, gen.minVersion)
-	}
+		const proposedVersion = (lower ? gen.minVersion : gen.maxVersion) as VersionId
-	if (!checkVersion(version, undefined, gen.maxVersion)) {
+		return <main>
-		setError(`This generator is not available in versions above ${gen.maxVersion}`)
+			<ErrorPanel error={locale(`generator.error_${lower ? 'min' : 'max'}_version`, proposedVersion)} reportable={false}>
-	}
+				<div class="error-actions">
-
+					<div class="error-action" onClick={() => changeVersion(proposedVersion)}>
-	useEffect(() => Store.visitGenerator(gen.id), [gen.id])
+						{locale('generator.switch_version', proposedVersion)} {Octicon.arrow_right}
-
+					</div>
-	const [currentPreset, setCurrentPreset] = useSearchParam('preset')
+					<div class="error-action" onClick={() => route('/generators')}>
-	const [sharedSnippetId, setSharedSnippetId] = useSearchParam(SHARE_KEY)
+						{locale('generator.browse_available', version)} {Octicon.arrow_right}
-	const ignoreChange = useRef(false)
+					</div>
-	const backup = useMemo(() => Store.getBackup(gen.id), [gen.id])
+				</div>
-
+			</ErrorPanel>
-	const loadBackup = () => {
-		if (backup !== undefined) {
-			model?.reset(DataModel.wrapLists(backup), false)
-		}
-	}
-
-	const { value } = useAsync(async () => {
-		let data: unknown = undefined
-		if (currentPreset && sharedSnippetId) {
-			setSharedSnippetId(undefined)
-			return AsyncCancel
-		}
-		if (currentPreset) {
-			data = await loadPreset(currentPreset)
-		} else if (sharedSnippetId) {
-			const snippet = await getSnippet(sharedSnippetId)
-			let cancel = false
-			if (snippet.version && snippet.version !== version) {
-				changeVersion(snippet.version, false)
-				cancel = true
-			}
-			if (snippet.type && snippet.type !== gen.id) {
-				const snippetGen = config.generators.find(g => g.id === snippet.type)
-				if (snippetGen) {
-					route(`${cleanUrl(snippetGen.url)}?${SHARE_KEY}=${snippet.id}`)
-					cancel = true
-				}
-			}
-			if (cancel) {
-				return AsyncCancel
-			}
-			if (snippet.show_preview && !previewShown) {
-				setPreviewShown(true)
-				setSourceShown(false)
-			}
-			Analytics.openSnippet(gen.id, sharedSnippetId, version)
-			data = snippet.data
-		} else if (file) {
-			if (project.version && project.version !== version) {
-				changeVersion(project.version, false)
-				return AsyncCancel
-			}
-			data = file.data
-		}
-		const [model, blockStates] = await Promise.all([
-			getModel(version, gen.id),
-			getBlockStates(version),
-		])
-		if (data) {
-			ignoreChange.current = true
-			model.reset(DataModel.wrapLists(data), false)
-		}
-		Analytics.setGenerator(gen.id)
-		return { model, blockStates }
-	}, [gen.id, version, sharedSnippetId, currentPreset, project.name, file?.id])
-
-	const model = value?.model
-	const blockStates = value?.blockStates
-
-	useModel(model, model => {
-		if (!ignoreChange.current) {
-			setCurrentPreset(undefined, true)
-			setSharedSnippetId(undefined, true)
-		}
-		if (file && model && blockStates) {
-			const data = getOutput(model, blockStates)
-			updateFile(gen.id, file.id, { id: file.id, data })
-		}
-		ignoreChange.current = false
-		Store.setBackup(gen.id, DataModel.unwrapLists(model.data))
-		setError(null)
-	}, [gen.id, setCurrentPreset, setSharedSnippetId, blockStates, file?.id])
-
-	const reset = () => {
-		Analytics.resetGenerator(gen.id, model?.historyIndex ?? 1, 'menu')
-		model?.reset(DataModel.wrapLists(model.schema.default()), true)
-	}
-	const undo = (e: MouseEvent) => {
-		e.stopPropagation()
-		Analytics.undoGenerator(gen.id, model?.historyIndex ?? 1, 'menu')
-		model?.undo()
-	}
-	const redo = (e: MouseEvent) => {
-		e.stopPropagation()
-		Analytics.redoGenerator(gen.id, model?.historyIndex ?? 1, 'menu')
-		model?.redo()
-	}
-
-	const onKeyUp = (e: KeyboardEvent) => {
-		if (e.ctrlKey && e.key === 'z') {
-			Analytics.undoGenerator(gen.id, model?.historyIndex ?? 1, 'hotkey')
-			model?.undo()
-		} else if (e.ctrlKey && e.key === 'y') {
-			Analytics.redoGenerator(gen.id, model?.historyIndex ?? 1, 'hotkey')
-			model?.redo()
-		}
-	}
-	const onKeyDown = (e: KeyboardEvent) => {
-		if (e.ctrlKey && e.key === 's') {
-			setFileSaving('hotkey')
-			e.preventDefault()
-			e.stopPropagation()
-		}
-	}
-	useEffect(() => {
-		document.addEventListener('keyup', onKeyUp)
-		document.addEventListener('keydown', onKeyDown)
-		return () => {
-			document.removeEventListener('keyup', onKeyUp)
-			document.removeEventListener('keydown', onKeyDown)
-		}
-	}, [model, blockStates, file])
-
-	const [presets, setPresets] = useState<string[]>([])
-	useEffect(() => {
-		getCollections(version).then(collections => {
-			setPresets(collections.get(gen.id).map(p => p.startsWith('minecraft:') ? p.slice(10) : p))
-		})
-			.catch(e => { console.error(e); setError(e) })
-	}, [version, gen.id])
-
-	const selectPreset = (id: string) => {
-		Analytics.loadPreset(gen.id, id)
-		setSharedSnippetId(undefined, true)
-		changeTargetVersion(version, true)
-		setCurrentPreset(id)
-	}
-
-	const loadPreset = async (id: string) => {
-		try {
-			const preset = await fetchPreset(version, gen.path ?? gen.id, id)
-			const seed = model?.get(new Path(['generator', 'seed']))
-			if (preset?.generator?.seed !== undefined && seed !== undefined) {
-				preset.generator.seed = seed
-				if (preset.generator.biome_source?.seed !== undefined) {
-					preset.generator.biome_source.seed = seed
-				}
-			}
-			return preset
-		} catch (e) {
-			setError(`Cannot load preset ${id} in ${version}`)
-			setCurrentPreset(undefined, true)
-		}
-	}
-
-	const selectVersion = (version: VersionId) => {
-		setSharedSnippetId(undefined, true)
-		changeVersion(version)
-		if (project.name !== DRAFT_PROJECT.name && project.version !== version) {
-			updateProject({ version })
-		}
-	}
-
-	const [shareUrl, setShareUrl] = useState<string | undefined>(undefined)
-	const [shareShown, setShareShown] = useState(false)
-	const [shareCopyActive, shareCopySuccess] = useActiveTimeout({ cooldown: 3000 })
-	const share = () => {
-		if (shareShown) {
-			setShareShown(false)
-			return
-		}
-		if (currentPreset) {
-			setShareUrl(`${location.origin}/${gen.url}/?version=${version}&preset=${currentPreset}`)
-			setShareShown(true)
-			copySharedId()
-		} else if (model && blockStates) {
-			const output = getOutput(model, blockStates)
-			if (deepEqual(output, model.schema.default())) {
-				setShareUrl(`${location.origin}/${gen.url}/?version=${version}`)
-				setShareShown(true)
-			} else {
-				shareSnippet(gen.id, version, output, previewShown)
-					.then(({ id, length, compressed, rate }) => {
-						Analytics.createSnippet(gen.id, id, version, length, compressed, rate)
-						const url = `${location.origin}/${gen.url}/?${SHARE_KEY}=${id}`
-						setShareUrl(url)
-						setShareShown(true)
-					})
-					.catch(e => {
-						if (e instanceof Error) {
-							setError(e)
-						}
-					})
-			}
-		}
-	}
-	const copySharedId = () => {
-		navigator.clipboard.writeText(shareUrl ?? '')
-		shareCopySuccess()
-	}
-	useEffect(() => {
-		if (!shareCopyActive) {
-			setShareUrl(undefined)
-			setShareShown(false)
-		}
-	}, [shareCopyActive])
-
-	const [sourceShown, setSourceShown] = useState(window.innerWidth > 820)
-	const [doCopy, setCopy] = useState(0)
-	const [doDownload, setDownload] = useState(0)
-	const [doImport, setImport] = useState(0)
-
-	const copySource = () => {
-		Analytics.copyOutput(gen.id, 'menu')
-		setCopy(doCopy + 1)
-	}
-	const downloadSource = () => {
-		Analytics.downloadOutput(gen.id, 'menu')
-		setDownload(doDownload + 1)
-	}
-	const importSource = () => {
-		Analytics.generatorEvent('import')
-		setSourceShown(true)
-		setImport(doImport + 1)
-	}
-	const toggleSource = () => {
-		if (sourceShown) {
-			Analytics.hideOutput(gen.id, 'menu')
-		} else {
-			Analytics.showOutput(gen.id, 'menu')
-		}
-		setSourceShown(!sourceShown)
-		setCopy(0)
-		setDownload(0)
-		setImport(0)
-	}
-
-	const [copyActive, copySuccess] = useActiveTimeout()
-
-	const [previewShown, setPreviewShown] = useState(Store.getPreviewPanelOpen() ?? window.innerWidth > 800)
-	const hasPreview = HasPreview.includes(gen.id) && !(gen.id === 'worldgen/configured_feature' && checkVersion(version, '1.18'))
-	if (previewShown && !hasPreview) setPreviewShown(false)
-	let actionsShown = 2
-	if (hasPreview) actionsShown += 1
-	if (sourceShown) actionsShown += 2
-
-	const togglePreview = () => {
-		if (sourceShown) {
-			Analytics.hidePreview(gen.id, 'menu')
-		} else {
-			Analytics.showPreview(gen.id, 'menu')
-		}
-		setPreviewShown(!previewShown)
-		if (!previewShown && sourceShown) {
-			setSourceShown(false)
-		}
-	}
-
-	const [projectShown, setProjectShown] = useState(Store.getProjectPanelOpen() ?? window.innerWidth > 1000)
-	const toggleProjectShown = useCallback(() => {
-		if (projectShown) {
-			Analytics.hideProject(gen.id, projects.length, project.files.length, 'menu')
-		} else {
-			Analytics.showProject(gen.id, projects.length, project.files.length, 'menu')
-		}
-		Store.setProjectPanelOpen(!projectShown)
-		setProjectShown(!projectShown)
-	}, [projectShown])
-
-	const [projectCreating, setProjectCreating] = useState(false)
-	const [projectDeleting, setprojectDeleting] = useState(false)
-	const [fileSaving, setFileSaving] = useState<string | undefined>(undefined)
-	const [fileRenaming, setFileRenaming] = useState<{ type: string, id: string } | undefined>(undefined)
-
-	return <>
-		<main class={`generator${previewShown ? ' has-preview' : ''}${projectShown ? ' has-project' : ''}`}>
-			{!gen.partner && <Ad id="data-pack-generator" type="text" />}
-			<div class="controls generator-controls">
-				<Btn icon="upload" label={locale('import')} onClick={importSource} />
-				<BtnMenu icon="archive" label={locale('presets')} relative={false}>
-					<SearchList searchPlaceholder={locale('search')} noResults={locale('no_presets')} values={presets} onSelect={selectPreset}/>
-				</BtnMenu>
-				<VersionSwitcher value={version} onChange={selectVersion} allowed={allowedVersions} />
-				<BtnMenu icon="kebab_horizontal" tooltip={locale('more')}>
-					<Btn icon="history" label={locale('reset_default')} onClick={reset} />
-					{backup !== undefined && <Btn icon="history" label={locale('restore_backup')} onClick={loadBackup} />}
-					<Btn icon="arrow_left" label={locale('undo')} onClick={undo} />
-					<Btn icon="arrow_right" label={locale('redo')} onClick={redo} />
-					<Btn icon="file" label={locale('project.save')} onClick={() => setFileSaving('menu')} />
-				</BtnMenu>
-			</div>
-			{error && <ErrorPanel error={error} onDismiss={() => setError(null)} />}
-			<Tree {...{model, version, blockStates}} onError={setError} />
-			<Footer donate={!gen.partner} />
 		</main>
-		<div class="popup-actions right-actions" style={`--offset: -${8 + actionsShown * 50}px;`}>
+	}
-			<div class={`popup-action action-preview${hasPreview ? ' shown' : ''} tooltipped tip-nw`} aria-label={locale(previewShown ? 'hide_preview' : 'show_preview')} onClick={togglePreview}>
+	return <SchemaGenerator gen={gen} allowedVersions={allowedVersions} />
-				{previewShown ? Octicon.x_circle : Octicon.play}
-			</div>
-			<div class={'popup-action action-share shown tooltipped tip-nw'} aria-label={locale('share')} onClick={share}>
-				{Octicon.link}
-			</div>
-			<div class={`popup-action action-download${sourceShown ? ' shown' : ''} tooltipped tip-nw`} aria-label={locale('download')} onClick={downloadSource}>
-				{Octicon.download}
-			</div>
-			<div class={`popup-action action-copy${sourceShown ? ' shown' : ''}${copyActive ? ' active' : ''} tooltipped tip-nw`} aria-label={locale(copyActive ? 'copied' : 'copy')} onClick={copySource}>
-				{copyActive ? Octicon.check : Octicon.clippy}
-			</div>
-			<div class={'popup-action action-code shown tooltipped tip-nw'} aria-label={locale(sourceShown ? 'hide_output' : 'show_output')} onClick={toggleSource}>
-				{sourceShown ? Octicon.chevron_right : Octicon.code}
-			</div>
-		</div>
-		<div class={`popup-preview${previewShown ? ' shown' : ''}`}>
-			<PreviewPanel {...{model, version, id: gen.id}} shown={previewShown} onError={setError} />
-		</div>
-		<div class={`popup-source${sourceShown ? ' shown' : ''}`}>
-			<SourcePanel {...{model, blockStates, doCopy, doDownload, doImport}} name={gen.schema ?? 'data'} copySuccess={copySuccess} onError={setError} />
-		</div>
-		<div class={`popup-share${shareShown ? ' shown' : ''}`}>
-			<TextInput value={shareUrl} readonly />
-			<Btn icon={shareCopyActive ? 'check' : 'clippy'} onClick={copySharedId} tooltip={locale(shareCopyActive ? 'copied' : 'copy_share')} tooltipLoc="nw" active={shareCopyActive} />
-		</div>
-		<div class="popup-actions left-actions" style="--offset: 50px;">
-			<div class={'popup-action action-project shown tooltipped tip-ne'} aria-label={locale(projectShown ? 'hide_project' : 'show_project')} onClick={toggleProjectShown}>
-				{projectShown ? Octicon.chevron_left : Octicon.repo}
-			</div>
-		</div>
-		<div class={`popup-project${projectShown ? ' shown' : ''}`}>
-			<ProjectPanel {...{model, version, id: gen.id}} onError={setError} onDeleteProject={() => setprojectDeleting(true)} onRename={setFileRenaming} onCreate={() => setProjectCreating(true)} />
-		</div>
-		{projectCreating && <ProjectCreation onClose={() => setProjectCreating(false)} />}
-		{projectDeleting && <ProjectDeletion onClose={() => setprojectDeleting(false)} />}
-		{model && fileSaving && <FileCreation id={gen.id} model={model} method={fileSaving} onClose={() => setFileSaving(undefined)} />}
-		{fileRenaming && <FileRenaming id={fileRenaming.type } name={fileRenaming.id} onClose={() => setFileRenaming(undefined)} />}
-	</>
 }

src/locales/en.json

@@ -48,6 +48,11 @@
   "fields": "Fields",
   "generate_new_seed": "Generate new seed",
   "generate_new_uuid": "Generate new UUID",
+  "generator.not_found": "Cannot find generator \"%0%\"",
+  "generator.error_min_version": "The minimum version for this generator is %0%",
+  "generator.error_max_version": "This generator is not available in versions above %0%",
+  "generator.switch_version": "Switch to %0%",
+  "generator.browse_available": "Browse available generators for %0%",
   "generators.all": "All generators",
   "generators.popular": "Popular Generators",
   "generators.recent": "Recently Used Generators",

src/styles/global.css

@@ -25,7 +25,8 @@
 	--nav-faded-hover: #6e6e6e;
 	--selection: #445a9599;
 	--errors-background: #62190f;
-	--errors-background-hover: #57140b;
+	--errors-background-2: #471610;
+	--errors-background-3: #3f140f;
 	--errors-text: #ffffffcc;
   --invalid-text: #fd7951;
 	--text-saturation: 60%;
@@ -63,6 +64,8 @@
 	--nav-faded-hover: #bcbfc3;
 	--selection: #6786dd99;
 	--errors-background: #f66653;
+	--errors-background-2: #c13b29;
+	--errors-background-3: #d8503e;
 	--errors-text: #000000cc;
   --invalid-text: #a32600;
 	--text-saturation: 100%;
@@ -101,10 +104,12 @@
 		--nav-faded-hover: #bcbfc3;
 		--selection: #6786dd99;
 		--errors-background: #f66653;
+		--errors-background-2: #c13b29;
+		--errors-background-3: #d8503e;
 		--errors-text: #000000cc;
 		--invalid-text: #a32600;
 		--text-saturation: 100%;
-		--text-lightness: 35%;
+		--text-lightness: 30%;
 		--editor-variable: #0451A5;
 		--editor-string: #A31515;
 		--editor-constant: #0000FF;
@@ -814,7 +819,7 @@ main.has-project {
 }
 
 .btn.danger:not(.btn-input):not(.disabled):hover {
-	background-color: var(--errors-background-hover);
+	background-color: var(--errors-background-2);
 }
 
 .btn-menu .result-list {
@@ -1081,6 +1086,25 @@ main.has-project {
 	color: var(--text-1)
 }
 
+.error-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+
+.error-action {
+	display: flex;
+	align-items: center;
+	background-color: var(--errors-background-2);
+	padding: 8px 12px;
+	border-radius: 6px;
+	cursor: pointer;
+}
+
+.error-action:hover {
+	background-color: var(--errors-background-3);
+}
+
 .modal {
 	position: fixed;
 	top: 50%;