+ 
+
+
+}
+
+function DialogTitle({ title }: { title: any }) {
+ // TODO: add warning button tooltip
+ return
+
+
+
+
+
+
+
+
+}
+
+function DialogBody({ body }: { body: any }) {
+ if (!body) {
+ body = []
+ } else if (!Array.isArray(body)) {
+ body = [body]
+ }
+ return <>
+ {body?.map((b: any) => {
+ const type = b.type?.replace(/^minecraft:/, '')
+ if (type === 'plain_message') {
+ // TODO: make this text wrap
+ return
+
+ }
+ if (type == 'item') {
+ // TODO: add item components
+ const item = new ItemStack(Identifier.parse(b.item?.id ?? 'air'), b.show_decorations ? (b.item?.count ?? 1) : 1)
+ console.log(item)
+ return
+
+ }
+ return <>
+ })}
+
+}
+
+function DialogContent({ dialog }: { dialog: any }) {
+ const type = dialog.type?.replace(/^minecraft:/, '')
+
+ if (type === 'dialog_list') {
+ let dialogs = []
+ if (Array.isArray(dialog.dialogs)) {
+ dialogs = dialog.dialogs
+ } else if (typeof dialog.dialogs === 'string') {
+ dialogs = [dialog.dialogs]
+ }
+ return
+
+ {b.description &&
+
}
+
+
+
+
+ }
+
+ if (type === 'dialog_list') {
+ return
+ }
+
+ if (type === 'multi_action') {
+ return
+ }
+
+ if (type === 'notice') {
+ return
+
+
+ }
+
+ if (type === 'server_links') {
+ return
+ }
+
+ if (type === 'simple_input_form') {
+ return
+
+
+ }
+
+ return <>
+}
+
+interface ColumnsGridProps {
+ columns: number
+ children: ComponentChild[]
+}
+function ColumnsGrid({ columns, children }: ColumnsGridProps) {
+ const totalCount = children.length
+ const gridCount = Math.floor(totalCount / columns) * columns
+ return
+ {children.slice(0, gridCount)}
+ {totalCount > gridCount &&
+}
+
+interface ButtonProps {
+ label: any
+ width: number
+ tooltip?: any
+}
+function Button({ label, width }: ButtonProps) {
+ // TODO: add tooltip
+ return
+}
+
+function InputControl({ input }: { input: any }) {
+ const type = input.type?.replace(/^minecraft:/, '')
+
+ if (type === 'boolean') {
+ return
+ {children.slice(gridCount)}
+
}
+
+
+
+ }
+
+ if (type === 'number_range') {
+ // TODO: use label_format
+ const label = {translate: 'options.generic_value', with: [input.label, input.start ?? 0]}
+ return
+ }
+
+ if (type === 'single_option') {
+ const firstOption = input.options?.find((o: any) => o.initial) ?? input.options?.[0]
+ const optionLabel = firstOption?.display ?? firstOption?.id ?? ''
+ const label = input.label_visible === false ? optionLabel : {translate: 'options.generic_value', with: [input.label ?? '', optionLabel]}
+ return
+ }
+
+ if (type === 'text') {
+ return
+ {input.label_visible !== false &&
+ }
+
+ return <>
+}
+
+function px(n: number) {
+ return `calc(var(--dialog-px) * ${n})`
+}
diff --git a/src/app/components/previews/index.ts b/src/app/components/previews/index.ts
index 3aa6615b..fe4370d3 100644
--- a/src/app/components/previews/index.ts
+++ b/src/app/components/previews/index.ts
@@ -4,6 +4,7 @@ export * from './BiomeSourcePreview.js'
export * from './BlockStatePreview.jsx'
export * from './DecoratorPreview.js'
export * from './DensityFunctionPreview.js'
+export * from './DialogPreview.js'
export * from './ItemModelPreview.jsx'
export * from './LootTablePreview.jsx'
export * from './ModelPreview.jsx'
diff --git a/src/styles/global.css b/src/styles/global.css
index d54d1121..c80eb75a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1876,6 +1876,116 @@ hr {
content: '\200b';
}
+.dialog-preview {
+ cursor: default;
+}
+
+.dialog-preview * {
+ flex-shrink: 0;
+}
+
+.dialog-preview .text-component {
+ font-size: calc(var(--dialog-px) * 12);
+}
+
+.dialog-preview .text-component > .text-foreground {
+ left: calc(var(--dialog-px) * -1.2);
+ top: calc(var(--dialog-px) * -1.2);
+}
+
+.dialog-button,
+.dialog-edit-box,
+.dialog-checkbox,
+.dialog-slider-track,
+.dialog-slider-handle {
+ image-rendering: -moz-crisp-edges;
+ image-rendering: -webkit-crisp-edges;
+ image-rendering: crisp-edges;
+ image-rendering: pixelated;
+}
+
+.dialog-warning-button {
+ flex-shrink: 0;
+ background-image: url(/images/dialog/warning_button.png);
+ background-size: contain;
+}
+
+.dialog-warning-button:hover {
+ background-image: url(/images/dialog/warning_button_highlighted.png);
+}
+
+.dialog-button {
+ border: solid calc(var(--dialog-px)*2) #000;
+ border-bottom-width: calc(var(--dialog-px)*3);
+ border-image-source: url(/images/dialog/button.png);
+ border-image-slice: 2 2 3 2 fill;
+ border-image-repeat: repeat;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+}
+
+.dialog-button:hover {
+ border-image-source: url(/images/dialog/button_highlighted.png);
+}
+
+.dialog-edit-box {
+ border: solid calc(var(--dialog-px) * 1) #000;
+ border-image-source: url(/images/dialog/text_field.png);
+ border-image-slice: 1 fill;
+ border-image-repeat: repeat;
+ display: flex;
+ align-items: center;
+ padding-left: calc(var(--dialog-px) * 4);
+}
+
+.dialog-checkbox {
+ background-image: url(/images/dialog/checkbox.png);
+ background-size: contain;
+}
+
+.dialog-checkbox.dialog-selected {
+ background-image: url(/images/dialog/checkbox_selected.png);
+}
+
+.dialog-slider {
+ position: relative;
+}
+
+.dialog-slider-track {
+ border: solid calc(var(--dialog-px) * 1) #000;
+ border-image-source: url(/images/dialog/slider.png);
+ border-image-slice: 1 fill;
+ border-image-repeat: repeat;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.dialog-slider-handle {
+ background-image: url(/images/dialog/slider_handle.png);
+ background-size: contain;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: calc(var(--dialog-px) * 8);
+ height: 100%;
+}
+
+.dialog-slider-text {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
.project-files {
background-color: var(--background-2);
color: var(--text-2);
+ {input.initial &&
+