+
+ );
+ }
+
+ if (!dialogue) {
+ return (
+ Load a dialogue JSON file to get started
+
+
+ );
+ }
+
+ return (
+ Select a dialogue from the left panel
+
+
+ );
+}
diff --git a/dialogEditor/src/components/GraphPanel/GraphToolbar.module.css b/dialogEditor/src/components/GraphPanel/GraphToolbar.module.css
new file mode 100644
index 0000000..3c6c8ef
--- /dev/null
+++ b/dialogEditor/src/components/GraphPanel/GraphToolbar.module.css
@@ -0,0 +1,101 @@
+.toolbar {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 6px 10px;
+ background: #181825;
+ border-bottom: 1px solid #313244;
+ flex-wrap: wrap;
+ min-height: 40px;
+}
+
+.group {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.label {
+ font-size: 11px;
+ color: #6c7086;
+ margin-right: 2px;
+}
+
+.btn {
+ background: #313244;
+ color: #cdd6f4;
+ border: none;
+ border-radius: 4px;
+ padding: 4px 8px;
+ font-size: 11px;
+ cursor: pointer;
+ transition: background 0.15s;
+ white-space: nowrap;
+}
+
+.btn:hover {
+ background: #45475a;
+}
+
+.btnPlay {
+ background: #40a02b;
+ color: #fff;
+}
+
+.btnPlay:hover {
+ background: #37872b;
+}
+
+.separator {
+ width: 1px;
+ height: 20px;
+ background: #313244;
+ margin: 0 2px;
+}
+
+.toggle {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ cursor: pointer;
+ font-size: 12px;
+ color: #cdd6f4;
+}
+
+.toggle input {
+ cursor: pointer;
+}
+
+.mobileBanner {
+ background: #2a1f00;
+ color: #f9e2af;
+ font-size: 11px;
+ padding: 3px 10px;
+ border-radius: 4px;
+ border: 1px solid #f9e2af44;
+}
+
+.flagPill {
+ background: rgba(137, 180, 250, 0.15);
+ color: #89b4fa;
+ border-radius: 3px;
+ padding: 2px 6px;
+ font-size: 10px;
+ font-family: monospace;
+ white-space: nowrap;
+}
+
+.btnReset {
+ background: #45475a;
+ color: #f9e2af;
+ border: none;
+ border-radius: 4px;
+ padding: 4px 8px;
+ font-size: 11px;
+ cursor: pointer;
+ white-space: nowrap;
+}
+
+.btnReset:hover {
+ background: #585b70;
+}
diff --git a/dialogEditor/src/components/GraphPanel/GraphToolbar.tsx b/dialogEditor/src/components/GraphPanel/GraphToolbar.tsx
new file mode 100644
index 0000000..01e2100
--- /dev/null
+++ b/dialogEditor/src/components/GraphPanel/GraphToolbar.tsx
@@ -0,0 +1,104 @@
+import { useDialogueStore } from '../../store/dialogueStore';
+import { makeNodeId } from '../../utils/idGen';
+import { DialogueNode, NodeType } from '../../types/dialogue';
+import { MAIN_CHARACTER } from '../../constants/characters';
+import styles from './GraphToolbar.module.css';
+
+const NODE_DEFAULTS: Record
+
+ {
+ switch (n.type) {
+ case 'Line': return '#1e66f5';
+ case 'Choice': return '#df8e1d';
+ case 'Condition': return '#8839ef';
+ case 'SetFlag': return '#179299';
+ case 'CutsceneStart': return '#4a4a5a';
+ case 'End': return '#f38ba8';
+ default: return '#6c7086';
+ }
+ }}
+ style={{ background: '#181825', border: '1px solid #313244' }}
+ />
+
+
+
+
+ );
+}
diff --git a/dialogEditor/src/components/LeftPanel/LeftPanel.module.css b/dialogEditor/src/components/LeftPanel/LeftPanel.module.css
new file mode 100644
index 0000000..d0f8606
--- /dev/null
+++ b/dialogEditor/src/components/LeftPanel/LeftPanel.module.css
@@ -0,0 +1,185 @@
+.panel {
+ width: 220px;
+ min-width: 220px;
+ background: #181825;
+ border-right: 1px solid #313244;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+}
+
+.header {
+ padding: 12px 12px 6px;
+ border-bottom: 1px solid #313244;
+}
+
+.title {
+ font-size: 13px;
+ font-weight: 700;
+ color: #cdd6f4;
+ display: block;
+}
+
+.fileName {
+ font-size: 10px;
+ color: #6c7086;
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.fileButtons {
+ display: flex;
+ gap: 6px;
+ padding: 8px 10px;
+ border-bottom: 1px solid #313244;
+}
+
+.btn {
+ flex: 1;
+ background: #313244;
+ color: #cdd6f4;
+ border: none;
+ border-radius: 4px;
+ padding: 5px 8px;
+ font-size: 12px;
+ cursor: pointer;
+ transition: background 0.15s;
+}
+
+.btn:hover {
+ background: #45475a;
+}
+
+.btnSave {
+ background: #1e66f5;
+ color: #fff;
+}
+
+.btnSave:hover {
+ background: #2779e4;
+}
+
+.btnNew {
+ background: #40a02b;
+ color: #fff;
+}
+
+.btnNew:hover {
+ background: #37872b;
+}
+
+.errorMsg {
+ background: #2a0e14;
+ color: #f38ba8;
+ font-size: 11px;
+ padding: 6px 10px;
+ border-top: 1px solid #f38ba8;
+}
+
+.list {
+ flex: 1;
+ overflow-y: auto;
+ padding: 4px 0;
+}
+
+.emptyMsg {
+ padding: 16px 12px;
+ color: #6c7086;
+ font-size: 12px;
+ text-align: center;
+}
+
+.dialogueItem {
+ display: flex;
+ align-items: center;
+ padding: 6px 10px;
+ cursor: pointer;
+ border-radius: 4px;
+ margin: 1px 4px;
+ transition: background 0.1s;
+}
+
+.dialogueItem:hover {
+ background: #313244;
+}
+
+.dialogueItem.active {
+ background: #1e3a5f;
+}
+
+.dialogueId {
+ flex: 1;
+ font-size: 11px;
+ font-family: monospace;
+ color: #cdd6f4;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+
+.errDot { color: #f38ba8; font-size: 9px; }
+.warnDot { color: #f9e2af; font-size: 9px; }
+.mobileDot { font-size: 10px; }
+
+.copyBtn {
+ background: none;
+ border: none;
+ color: #6c7086;
+ cursor: pointer;
+ font-size: 13px;
+ line-height: 1;
+ padding: 0 2px;
+ flex-shrink: 0;
+}
+
+.copyBtn:hover {
+ color: #89b4fa;
+}
+
+.deleteBtn {
+ background: none;
+ border: none;
+ color: #6c7086;
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 1;
+ padding: 0 2px;
+ flex-shrink: 0;
+}
+
+.deleteBtn:hover {
+ color: #f38ba8;
+}
+
+.footer {
+ padding: 8px;
+ border-top: 1px solid #313244;
+}
+
+.createForm {
+ display: flex;
+ gap: 4px;
+}
+
+.createInput {
+ flex: 1;
+ background: #313244;
+ border: 1px solid #45475a;
+ border-radius: 4px;
+ color: #cdd6f4;
+ font-size: 11px;
+ padding: 4px 6px;
+ min-width: 0;
+ font-family: monospace;
+}
+
+.createInput:focus {
+ outline: none;
+ border-color: #89b4fa;
+}
diff --git a/dialogEditor/src/components/LeftPanel/LeftPanel.tsx b/dialogEditor/src/components/LeftPanel/LeftPanel.tsx
new file mode 100644
index 0000000..f6dd0ca
--- /dev/null
+++ b/dialogEditor/src/components/LeftPanel/LeftPanel.tsx
@@ -0,0 +1,156 @@
+import { useRef, useState } from 'react';
+import { useDialogueStore } from '../../store/dialogueStore';
+import { parseDialogueFile } from '../../utils/fileIO';
+import { useValidation } from '../../hooks/useValidation';
+import styles from './LeftPanel.module.css';
+
+export function LeftPanel() {
+ const { file, fileName, selectedDialogueId, loadFile, selectDialogue, createDialogue, deleteDialogue, duplicateDialogue, exportFile } = useDialogueStore();
+ const { issuesByNodeId } = useValidation();
+ const fileInputRef = useRef
+ Add:
+ {(['Line', 'Choice', 'Condition', 'SetFlag', 'CutsceneStart', 'End'] as NodeType[]).map(type => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {dialogue.mobileMode && (
+
+ Mobile mode — portraits will be overridden on export
+
+ )}
+ {Object.keys(persistentFlags).length > 0 && (
+ <>
+
+
+ 🚩 Flags:
+ {Object.entries(persistentFlags).map(([k, v]) => (
+ {k}={v}
+ ))}
+
+
+
+ )}
+
+
+ );
+}
diff --git a/dialogEditor/src/components/PlayMode/PlayModeOverlay.module.css b/dialogEditor/src/components/PlayMode/PlayModeOverlay.module.css
new file mode 100644
index 0000000..50b2d05
--- /dev/null
+++ b/dialogEditor/src/components/PlayMode/PlayModeOverlay.module.css
@@ -0,0 +1,244 @@
+.overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.75);
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.dialog {
+ background: #1e1e2e;
+ border: 1px solid #313244;
+ border-radius: 12px;
+ width: 520px;
+ max-width: 90vw;
+ padding: 24px;
+ position: relative;
+ box-shadow: 0 20px 60px rgba(0,0,0,0.7);
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.closeBtn {
+ position: absolute;
+ top: 12px;
+ right: 14px;
+ background: none;
+ border: none;
+ color: #6c7086;
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 1;
+ padding: 4px;
+}
+
+.closeBtn:hover {
+ color: #f38ba8;
+}
+
+.speakerRow {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+
+.portraitBox {
+ width: 52px;
+ height: 52px;
+ border-radius: 8px;
+ background: #313244;
+ overflow: hidden;
+ position: relative;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.portrait {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ inset: 0;
+}
+
+.portraitFallback {
+ font-size: 22px;
+ font-weight: 700;
+ color: #6c7086;
+ text-transform: uppercase;
+}
+
+.speakerName {
+ font-size: 15px;
+ font-weight: 700;
+ color: #89b4fa;
+}
+
+/* Main character (Бекзат) — blue tones */
+.speakerRowMain { border-left: 3px solid #1e66f5; padding-left: 10px; }
+.portraitMain { border: 2px solid #1e66f5; }
+.speakerMain { color: #89b4fa; }
+.textBoxMain { border-left: 3px solid #1e66f5; }
+
+/* Other speakers — green tones */
+.speakerRowOther { border-left: 3px solid #40a02b; padding-left: 10px; }
+.portraitOther { border: 2px solid #40a02b; }
+.speakerOther { color: #a6e3a1; }
+.textBoxOther { border-left: 3px solid #40a02b; }
+
+.textBox {
+ background: #11111b;
+ border-radius: 8px;
+ padding: 14px 16px;
+ font-size: 14px;
+ line-height: 1.6;
+ color: #cdd6f4;
+ min-height: 60px;
+}
+
+.nextBtn {
+ background: #1e66f5;
+ color: #fff;
+ border: none;
+ border-radius: 8px;
+ padding: 10px 24px;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ align-self: flex-end;
+ transition: background 0.15s;
+}
+
+.nextBtn:hover {
+ background: #2779e4;
+}
+
+.noNextWarning {
+ color: #f9e2af;
+ font-size: 12px;
+ text-align: right;
+}
+
+.choiceList {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.choiceBtn {
+ border: none;
+ border-radius: 8px;
+ padding: 11px 16px;
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ text-align: left;
+ transition: opacity 0.15s;
+}
+
+.choiceBtn:hover {
+ opacity: 0.85;
+}
+
+.choiceMain {
+ background: #1e66f5;
+ color: #fff;
+}
+
+.choiceOptional {
+ background: #313244;
+ color: #cdd6f4;
+ border: 1px solid #45475a;
+}
+
+.autoAdvance {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+ padding: 16px 0;
+}
+
+.conditionInfo {
+ color: #cba6f7;
+ font-size: 13px;
+}
+
+.conditionClauses {
+ display: flex;
+ gap: 6px;
+ flex-wrap: wrap;
+}
+
+.clausePill {
+ background: #313244;
+ color: #a6adc8;
+ font-size: 11px;
+ padding: 3px 8px;
+ border-radius: 4px;
+ font-family: monospace;
+}
+
+.cutsceneBox {
+ background: #11111b;
+ border-radius: 8px;
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+}
+
+.cutsceneLabel {
+ font-size: 11px;
+ color: #6c7086;
+ text-transform: uppercase;
+ font-weight: 700;
+ letter-spacing: 0.5px;
+}
+
+.cutsceneId {
+ font-size: 15px;
+ color: #a6adc8;
+ font-family: monospace;
+}
+
+.endBox {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ padding: 16px 0;
+}
+
+.endMsg {
+ font-size: 16px;
+ color: #6c7086;
+}
+
+.debugBar {
+ border-top: 1px solid #313244;
+ padding-top: 8px;
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+
+.debugLabel {
+ font-size: 10px;
+ color: #45475a;
+ font-family: monospace;
+}
+
+.debugFlagPill {
+ background: rgba(137, 180, 250, 0.12);
+ color: #6c7086;
+ border-radius: 3px;
+ padding: 1px 5px;
+ font-size: 10px;
+ font-family: monospace;
+}
diff --git a/dialogEditor/src/components/PlayMode/PlayModeOverlay.tsx b/dialogEditor/src/components/PlayMode/PlayModeOverlay.tsx
new file mode 100644
index 0000000..a5d971a
--- /dev/null
+++ b/dialogEditor/src/components/PlayMode/PlayModeOverlay.tsx
@@ -0,0 +1,170 @@
+import { useEffect } from 'react';
+import { useDialogueStore } from '../../store/dialogueStore';
+import { ConditionClause } from '../../types/dialogue';
+import { MAIN_CHARACTER } from '../../constants/characters';
+import styles from './PlayModeOverlay.module.css';
+
+function evalConditions(clauses: ConditionClause[], flags: Record
+ Dialogues
+ {file && {fileName}}
+
+
+
+
+
+ {file && (
+
+ )}
+
+
+ {error && {error}
}
+
+
+ {!file && (
+
+
+ Load a JSON file to start
+ )}
+ {file?.dialogues.map(d => {
+ const hasErr = dialogueHasErrors(d.id);
+ const hasWarn = !hasErr && dialogueHasIssues(d.id);
+ return (
+ selectDialogue(d.id)}
+ >
+
+ {hasErr && ●}
+ {hasWarn && ●}
+ {d.mobileMode && 📱}
+ {d.id}
+
+
+
+
+ );
+ })}
+
+ {creating ? (
+
+
+ setNewId(e.target.value)}
+ placeholder="dialogue_id"
+ onKeyDown={e => {
+ if (e.key === 'Enter') handleCreate();
+ if (e.key === 'Escape') { setCreating(false); setNewId(''); }
+ }}
+ autoFocus
+ />
+
+
+
+ ) : (
+ file && (
+
+ )
+ )}
+ e.stopPropagation()}>
+
+ );
+}
diff --git a/dialogEditor/src/components/RightPanel/RightPanel.module.css b/dialogEditor/src/components/RightPanel/RightPanel.module.css
new file mode 100644
index 0000000..d748030
--- /dev/null
+++ b/dialogEditor/src/components/RightPanel/RightPanel.module.css
@@ -0,0 +1,313 @@
+.panel {
+ width: 300px;
+ min-width: 300px;
+ background: #181825;
+ border-left: 1px solid #313244;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow-y: auto;
+}
+
+.emptyMsg {
+ padding: 24px 16px;
+ color: #6c7086;
+ font-size: 13px;
+ text-align: center;
+}
+
+.inspector {
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.inspectorHeader {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ margin-bottom: 4px;
+}
+
+.nodeTypeBadge {
+ font-size: 11px;
+ font-weight: 700;
+ padding: 3px 8px;
+ border-radius: 4px;
+ color: #fff;
+}
+
+.nodeIdLabel {
+ flex: 1;
+ font-size: 11px;
+ font-family: monospace;
+ color: #6c7086;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.deleteNodeBtn {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 16px;
+ padding: 2px;
+ color: #6c7086;
+ transition: color 0.15s;
+}
+
+.deleteNodeBtn:hover {
+ color: #f38ba8;
+}
+
+.label {
+ display: block;
+ font-size: 10px;
+ font-weight: 600;
+ color: #6c7086;
+ text-transform: uppercase;
+ letter-spacing: 0.5px;
+ margin-bottom: 3px;
+}
+
+.input {
+ width: 100%;
+ background: #1e1e2e;
+ border: 1px solid #313244;
+ border-radius: 4px;
+ color: #cdd6f4;
+ font-size: 12px;
+ padding: 5px 8px;
+ box-sizing: border-box;
+ font-family: inherit;
+ transition: border-color 0.15s;
+}
+
+.input:focus {
+ outline: none;
+ border-color: #89b4fa;
+}
+
+.textarea {
+ width: 100%;
+ background: #1e1e2e;
+ border: 1px solid #313244;
+ border-radius: 4px;
+ color: #cdd6f4;
+ font-size: 12px;
+ padding: 5px 8px;
+ box-sizing: border-box;
+ resize: vertical;
+ font-family: inherit;
+ line-height: 1.5;
+ transition: border-color 0.15s;
+}
+
+.textarea:focus {
+ outline: none;
+ border-color: #89b4fa;
+}
+
+.select {
+ width: 100%;
+ background: #1e1e2e;
+ border: 1px solid #313244;
+ border-radius: 4px;
+ color: #cdd6f4;
+ font-size: 12px;
+ padding: 5px 8px;
+ box-sizing: border-box;
+ cursor: pointer;
+}
+
+.select:focus {
+ outline: none;
+ border-color: #89b4fa;
+}
+
+.selectSmall {
+ background: #1e1e2e;
+ border: 1px solid #313244;
+ border-radius: 4px;
+ color: #cdd6f4;
+ font-size: 11px;
+ padding: 3px 6px;
+ cursor: pointer;
+ flex-shrink: 0;
+}
+
+.inputSmall {
+ flex: 1;
+ min-width: 0;
+ background: #1e1e2e;
+ border: 1px solid #313244;
+ border-radius: 4px;
+ color: #cdd6f4;
+ font-size: 11px;
+ padding: 3px 6px;
+ font-family: monospace;
+}
+
+.inputSmall:focus {
+ outline: none;
+ border-color: #89b4fa;
+}
+
+.advancedToggle {
+ background: none;
+ border: none;
+ color: #6c7086;
+ font-size: 11px;
+ cursor: pointer;
+ padding: 4px 0;
+ text-align: left;
+}
+
+.advancedToggle:hover {
+ color: #cdd6f4;
+}
+
+.advancedSection {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 8px;
+ background: #1e1e2e;
+ border-radius: 4px;
+ border: 1px solid #313244;
+}
+
+.issueList {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+.issueError {
+ background: #2a0e14;
+ color: #f38ba8;
+ font-size: 11px;
+ padding: 5px 8px;
+ border-radius: 4px;
+ border-left: 3px solid #f38ba8;
+}
+
+.issueWarning {
+ background: #2a1f00;
+ color: #f9e2af;
+ font-size: 11px;
+ padding: 5px 8px;
+ border-radius: 4px;
+ border-left: 3px solid #f9e2af;
+}
+
+/* Choice editor */
+.choiceEditorRow {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ padding: 8px;
+ background: #1e1e2e;
+ border-radius: 4px;
+ border: 1px solid #313244;
+ margin-top: 4px;
+}
+
+.choiceEditorHeader {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+}
+
+.choiceIdLabel {
+ flex: 1;
+ font-size: 10px;
+ color: #6c7086;
+}
+
+.sectionHeader {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 4px;
+}
+
+.addBtn {
+ background: #313244;
+ color: #cdd6f4;
+ border: none;
+ border-radius: 4px;
+ padding: 3px 8px;
+ font-size: 11px;
+ cursor: pointer;
+}
+
+.addBtn:hover {
+ background: #45475a;
+}
+
+.removeBtn {
+ background: none;
+ border: none;
+ color: #6c7086;
+ cursor: pointer;
+ font-size: 16px;
+ line-height: 1;
+ padding: 0 2px;
+}
+
+.removeBtn:hover {
+ color: #f38ba8;
+}
+
+/* Clause / effect rows */
+.clauseRow {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-top: 4px;
+}
+
+.eqLabel {
+ color: #cba6f7;
+ font-weight: 700;
+ font-size: 13px;
+}
+
+.emptyHint {
+ color: #6c7086;
+ font-size: 11px;
+ font-style: italic;
+ padding: 4px 0;
+}
+
+/* Dialogue meta panel */
+.dialogueMeta {
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.metaHeader {
+ font-size: 12px;
+ font-weight: 700;
+ color: #cdd6f4;
+ margin-bottom: 4px;
+}
+
+.statRow {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 4px;
+}
+
+.statPill {
+ background: #313244;
+ color: #a6adc8;
+ font-size: 10px;
+ padding: 2px 7px;
+ border-radius: 10px;
+}
diff --git a/dialogEditor/src/components/RightPanel/RightPanel.tsx b/dialogEditor/src/components/RightPanel/RightPanel.tsx
new file mode 100644
index 0000000..b1dab00
--- /dev/null
+++ b/dialogEditor/src/components/RightPanel/RightPanel.tsx
@@ -0,0 +1,102 @@
+import { useDialogueStore } from '../../store/dialogueStore';
+import { LineInspector } from './inspectors/LineInspector';
+import { ChoiceInspector } from './inspectors/ChoiceInspector';
+import { ConditionInspector } from './inspectors/ConditionInspector';
+import { SetFlagInspector } from './inspectors/SetFlagInspector';
+import { CutsceneStartInspector, EndInspector } from './inspectors/OtherInspectors';
+import { DialogueNode } from '../../types/dialogue';
+import styles from './RightPanel.module.css';
+
+// Helper to update start node ID
+function useUpdateStart() {
+ const store = useDialogueStore;
+ return (dialogueId: string, start: string) => {
+ store.setState(state => {
+ const d = state.file?.dialogues.find(x => x.id === dialogueId);
+ if (d) d.start = start;
+ });
+ };
+}
+
+export function RightPanel() {
+ const { file, selectedDialogueId, selectedNodeId } = useDialogueStore();
+ const updateStart = useUpdateStart();
+
+ const dialogue = file?.dialogues.find(d => d.id === selectedDialogueId);
+
+ if (!dialogue) {
+ return (
+
+
+
+ {node.type === 'Line' && (
+ <>
+
+
+
+
+ 
{ (e.target as HTMLImageElement).style.display = 'none'; }}
+ />
+ {node.speaker[0]}
+
+ {node.speaker}
+ {node.text}
+ {node.next ? (
+
+ ) : (
+ ⚠ No next node set
+ )}
+
+ )}
+
+ {node.type === 'Choice' && (
+ <>
+
+
+ {node.text &&
+ { (e.target as HTMLImageElement).style.display = 'none'; }}
+ />
+ {node.speaker[0]}
+
+ {node.speaker}
+ {node.text}
}
+
+ {node.choices.map(choice => (
+
+ ))}
+
+
+ )}
+
+ {node.type === 'Condition' && (
+
+
+ )}
+
+ {node.type === 'SetFlag' && (
+ Evaluating condition...
+
+ {node.conditions.map((c, i) => (
+ {c.flag} {c.op} {c.value}
+ ))}
+
+
+
+ )}
+
+ {node.type === 'CutsceneStart' && (
+ <>
+ Setting flags...
+
+ Cutscene:
+ {node.cutsceneId}
+
+
+
+ )}
+
+ {node.type === 'End' && (
+
+
+ )}
+
+ Dialogue ended.
+
+
+ node: {node.id}
+ {Object.entries(playState.flags).map(([k, v]) => (
+ {k}={v}
+ ))}
+
+
+
+ );
+ }
+
+ if (!selectedNodeId) {
+ return (
+ No dialogue selected
+
+
+ );
+ }
+
+ const node = dialogue.nodes.find(n => n.id === selectedNodeId);
+ if (!node) return null;
+
+ return (
+
+
+ Dialogue Properties
+
+
+
+
+
+
+ {
+ if (selectedDialogueId) updateStart(selectedDialogueId, e.target.value);
+ }}
+ list="startNodeList"
+ />
+
+
+
+ Click a node in the graph to inspect it.
+
+
+
+ Node Count
+
+ {(['Line', 'Choice', 'Condition', 'SetFlag', 'CutsceneStart', 'End'] as DialogueNode['type'][]).map(t => {
+ const count = dialogue.nodes.filter(n => n.type === t).length;
+ return count > 0 ? (
+ {t}: {count}
+ ) : null;
+ })}
+
+
+ {node.type === 'Line' && (
+
+ );
+}
diff --git a/dialogEditor/src/components/RightPanel/inspectors/ChoiceInspector.tsx b/dialogEditor/src/components/RightPanel/inspectors/ChoiceInspector.tsx
new file mode 100644
index 0000000..7a9ab3c
--- /dev/null
+++ b/dialogEditor/src/components/RightPanel/inspectors/ChoiceInspector.tsx
@@ -0,0 +1,110 @@
+import { ChoiceNode, ChoiceOption } from '../../../types/dialogue';
+import { useDialogueStore } from '../../../store/dialogueStore';
+import { SpeakerField } from '../shared/SpeakerField';
+import { useValidation } from '../../../hooks/useValidation';
+import styles from '../RightPanel.module.css';
+
+interface Props {
+ node: ChoiceNode;
+ dialogueId: string;
+}
+
+export function ChoiceInspector({ node, dialogueId }: Props) {
+ const { updateNode, deleteNode, file } = useDialogueStore();
+ const { issuesByNodeId } = useValidation();
+ const issues = issuesByNodeId[node.id] ?? [];
+
+ const dialogue = file?.dialogues.find(d => d.id === dialogueId);
+ const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];
+
+ function updateChoice(idx: number, patch: Partial
+ updateNode(dialogueId, node.id, { speaker: s, portrait: p })}
+ />
+
+
+ );
+}
diff --git a/dialogEditor/src/components/RightPanel/inspectors/ConditionInspector.tsx b/dialogEditor/src/components/RightPanel/inspectors/ConditionInspector.tsx
new file mode 100644
index 0000000..f16c477
--- /dev/null
+++ b/dialogEditor/src/components/RightPanel/inspectors/ConditionInspector.tsx
@@ -0,0 +1,120 @@
+import { ConditionNode, ConditionClause, ConditionOp } from '../../../types/dialogue';
+import { useDialogueStore } from '../../../store/dialogueStore';
+import { useValidation } from '../../../hooks/useValidation';
+import styles from '../RightPanel.module.css';
+
+const OPS: ConditionOp[] = ['Equals', 'NotEquals', 'GreaterThan', 'LessThan'];
+
+interface Props {
+ node: ConditionNode;
+ dialogueId: string;
+}
+
+export function ConditionInspector({ node, dialogueId }: Props) {
+ const { updateNode, deleteNode, file } = useDialogueStore();
+ const { issuesByNodeId } = useValidation();
+ const issues = issuesByNodeId[node.id] ?? [];
+
+ const dialogue = file?.dialogues.find(d => d.id === dialogueId);
+ const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];
+
+ function updateClause(idx: number, patch: Partial
+ Choice
+ {node.id}
+
+
+
+ {issues.length > 0 && (
+
+ {issues.map((issue, i) => (
+
+ )}
+
+
+ {issue.severity === 'error' ? '⚠' : '!'} {issue.message}
+
+ ))}
+
+
+
+
+
+
+
+
+ Choices
+
+
+
+ {node.choices.map((choice, idx) => (
+
+
+ ))}
+
+ {node.choices.length === 0 && (
+
+
+ #{idx + 1}
+
+
+ updateChoice(idx, { text: e.target.value })}
+ />
+ updateChoice(idx, { next: e.target.value })}
+ list={`nodelist-choice-${choice.id}`}
+ />
+
+ No choices yet. Click "+ Add".
+ )}
+
+
+ );
+}
diff --git a/dialogEditor/src/components/RightPanel/inspectors/LineInspector.tsx b/dialogEditor/src/components/RightPanel/inspectors/LineInspector.tsx
new file mode 100644
index 0000000..a6e33b7
--- /dev/null
+++ b/dialogEditor/src/components/RightPanel/inspectors/LineInspector.tsx
@@ -0,0 +1,114 @@
+import { useState } from 'react';
+import { LineNode } from '../../../types/dialogue';
+import { useDialogueStore } from '../../../store/dialogueStore';
+import { SpeakerField } from '../shared/SpeakerField';
+import { AutoSaveTextArea } from '../shared/TextArea';
+import { useValidation } from '../../../hooks/useValidation';
+import styles from '../RightPanel.module.css';
+
+interface Props {
+ node: LineNode;
+ dialogueId: string;
+}
+
+export function LineInspector({ node, dialogueId }: Props) {
+ const { updateNode, deleteNode, file } = useDialogueStore();
+ const { issuesByNodeId } = useValidation();
+ const [showAdvanced, setShowAdvanced] = useState(false);
+ const issues = issuesByNodeId[node.id] ?? [];
+
+ const dialogue = file?.dialogues.find(d => d.id === dialogueId);
+ const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];
+
+ function update(patch: Partial
+ Condition
+ {node.id}
+
+
+
+ {issues.length > 0 && (
+
+ {issues.map((issue, i) => (
+
+ )}
+
+
+ {issue.severity === 'error' ? '⚠' : '!'} {issue.message}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Conditions (ALL must pass)
+
+
+ {node.conditions.map((c, idx) => (
+
+ updateClause(idx, { flag: e.target.value })}
+ />
+
+ updateClause(idx, { value: isNaN(Number(e.target.value)) ? e.target.value : Number(e.target.value) })}
+ />
+
+
+ ))}
+ {node.conditions.length === 0 && No conditions. Always true.
}
+
+
+ updateNode(dialogueId, node.id, { trueNext: e.target.value })}
+ list={`nodelist-true-${node.id}`}
+ />
+
+
+
+
+
+ updateNode(dialogueId, node.id, { falseNext: e.target.value })}
+ list={`nodelist-false-${node.id}`}
+ />
+
+
+
+
+ update({ [key]: e.target.value } as Partial)}
+ list={key === 'next' ? `nodelist-${node.id}` : undefined}
+ />
+ {key === 'next' && (
+
+ )}
+
+ );
+ }
+
+ return (
+
+ update({ speaker: s, portrait: p })}
+ />
+ update({ text: v })}
+ />
+ {field('Next node', 'next', 'node_id')}
+
+ {dialogue?.mobileMode && (
+
+ );
+}
diff --git a/dialogEditor/src/components/RightPanel/inspectors/OtherInspectors.tsx b/dialogEditor/src/components/RightPanel/inspectors/OtherInspectors.tsx
new file mode 100644
index 0000000..ccbba72
--- /dev/null
+++ b/dialogEditor/src/components/RightPanel/inspectors/OtherInspectors.tsx
@@ -0,0 +1,76 @@
+import { CutsceneStartNode, EndNode } from '../../../types/dialogue';
+import { useDialogueStore } from '../../../store/dialogueStore';
+import styles from '../RightPanel.module.css';
+
+interface CutsceneProps {
+ node: CutsceneStartNode;
+ dialogueId: string;
+}
+
+export function CutsceneStartInspector({ node, dialogueId }: CutsceneProps) {
+ const { updateNode, deleteNode, file } = useDialogueStore();
+ const dialogue = file?.dialogues.find(d => d.id === dialogueId);
+ const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];
+
+ return (
+
+ Line
+ {node.id}
+
+
+
+ {issues.length > 0 && (
+
+ {issues.map((issue, i) => (
+
+ )}
+
+ {field('Node ID', 'id')}
+
+ {issue.severity === 'error' ? '⚠' : '!'} {issue.message}
+
+ ))}
+
+
+
+
+ )}
+
+
+
+ {showAdvanced && (
+
+ {field('questUnlock', 'questUnlock', 'quest_id')}
+ {field('objectiveComplete', 'objectiveComplete', 'group.objective')}
+ {field('objectiveVisible', 'objectiveVisible', 'group.objective')}
+ {field('questFail', 'questFail', 'quest_id')}
+ {field('questComplete', 'questComplete', 'quest_id')}
+ {field('luaCallback', 'luaCallback', 'on_event_name')}
+
+ )}
+
+
+ );
+}
+
+interface EndProps {
+ node: EndNode;
+ dialogueId: string;
+}
+
+export function EndInspector({ node, dialogueId }: EndProps) {
+ const { deleteNode } = useDialogueStore();
+
+ return (
+
+ CutsceneStart
+ {node.id}
+
+
+
+
+
+
+
+
+ updateNode(dialogueId, node.id, { cutsceneId: e.target.value })}
+ />
+
+
+
+ updateNode(dialogueId, node.id, { next: e.target.value })}
+ list={`nodelist-cs-${node.id}`}
+ />
+
+
+
+
+ );
+}
diff --git a/dialogEditor/src/components/RightPanel/inspectors/SetFlagInspector.tsx b/dialogEditor/src/components/RightPanel/inspectors/SetFlagInspector.tsx
new file mode 100644
index 0000000..46343c4
--- /dev/null
+++ b/dialogEditor/src/components/RightPanel/inspectors/SetFlagInspector.tsx
@@ -0,0 +1,98 @@
+import { SetFlagNode, FlagEffect } from '../../../types/dialogue';
+import { useDialogueStore } from '../../../store/dialogueStore';
+import { useValidation } from '../../../hooks/useValidation';
+import styles from '../RightPanel.module.css';
+
+interface Props {
+ node: SetFlagNode;
+ dialogueId: string;
+}
+
+export function SetFlagInspector({ node, dialogueId }: Props) {
+ const { updateNode, deleteNode, file } = useDialogueStore();
+ const { issuesByNodeId } = useValidation();
+ const issues = issuesByNodeId[node.id] ?? [];
+
+ const dialogue = file?.dialogues.find(d => d.id === dialogueId);
+ const nodeIds = dialogue?.nodes.map(n => n.id) ?? [];
+
+ function updateEffect(idx: number, patch: Partial
+ End
+ {node.id}
+
+
+
+
+
+
+
+ This is a terminal node. Dialogue ends here.
+
+
+
+ );
+}
diff --git a/dialogEditor/src/components/RightPanel/shared/SpeakerField.tsx b/dialogEditor/src/components/RightPanel/shared/SpeakerField.tsx
new file mode 100644
index 0000000..b8912e5
--- /dev/null
+++ b/dialogEditor/src/components/RightPanel/shared/SpeakerField.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { CHARACTER_PRESETS, CUSTOM_CHARACTER_LABEL } from '../../../constants/characters';
+import styles from '../RightPanel.module.css';
+
+interface Props {
+ speaker: string;
+ portrait: string;
+ onSpeakerChange: (speaker: string, portrait: string) => void;
+}
+
+export function SpeakerField({ speaker, portrait, onSpeakerChange }: Props) {
+ const isPreset = CHARACTER_PRESETS.some(p => p.label === speaker);
+ const [isCustom, setIsCustom] = useState(!isPreset);
+
+ function handleSelect(e: React.ChangeEvent
+ SetFlag
+ {node.id}
+
+
+
+ {issues.length > 0 && (
+
+ {issues.map((issue, i) => (
+
+ )}
+
+
+ {issue.severity === 'error' ? '⚠' : '!'} {issue.message}
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Flag Effects
+
+
+ {node.effects.map((e, idx) => (
+
+ updateEffect(idx, { flag: ev.target.value })}
+ />
+ =
+ updateEffect(idx, { value: isNaN(Number(ev.target.value)) ? ev.target.value : Number(ev.target.value) })}
+ />
+
+
+ ))}
+ {node.effects.length === 0 && No effects defined.
}
+
+
+ updateNode(dialogueId, node.id, { next: e.target.value })}
+ list={`nodelist-sf-${node.id}`}
+ />
+
+
+
+
+
+ {isCustom && (
+ onSpeakerChange(e.target.value, portrait)}
+ />
+ )}
+
+ onSpeakerChange(speaker, e.target.value)}
+ />
+
+ );
+}
diff --git a/dialogEditor/src/components/RightPanel/shared/TextArea.tsx b/dialogEditor/src/components/RightPanel/shared/TextArea.tsx
new file mode 100644
index 0000000..0e1ae59
--- /dev/null
+++ b/dialogEditor/src/components/RightPanel/shared/TextArea.tsx
@@ -0,0 +1,26 @@
+import { useAutoSave } from '../../../hooks/useAutoSave';
+import styles from '../RightPanel.module.css';
+
+interface Props {
+ value: string;
+ label: string;
+ placeholder?: string;
+ onSave: (value: string) => void;
+ rows?: number;
+}
+
+export function AutoSaveTextArea({ value, label, placeholder, onSave, rows = 4 }: Props) {
+ const [local, handleChange] = useAutoSave(value, onSave);
+ return (
+
+
+