first commit

src/components/ConfigVariablesEditor.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import type { NPCConfiguration, MoLangConfigVariable } from '../types/npc';
+
+interface ConfigVariablesEditorProps {
+  config: NPCConfiguration;
+  onChange: (config: NPCConfiguration) => void;
+}
+
+export const ConfigVariablesEditor: React.FC<ConfigVariablesEditorProps> = ({ config, onChange }) => {
+  const addVariable = () => {
+    const newVariable: MoLangConfigVariable = {
+      variableName: '',
+      displayName: '',
+      description: '',
+      type: 'TEXT',
+      defaultValue: ''
+    };
+
+    onChange({
+      ...config,
+      config: [...config.config, newVariable]
+    });
+  };
+
+  const removeVariable = (index: number) => {
+    onChange({
+      ...config,
+      config: config.config.filter((_, i) => i !== index)
+    });
+  };
+
+  const updateVariable = (index: number, field: keyof MoLangConfigVariable, value: any) => {
+    const newConfig = [...config.config];
+    newConfig[index] = { ...newConfig[index], [field]: value };
+    onChange({
+      ...config,
+      config: newConfig
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-gray-900">Configuration Variables</h2>
+        <button
+          type="button"
+          onClick={addVariable}
+          className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
+        >
+          <Plus className="h-4 w-4 mr-1" />
+          Add Variable
+        </button>
+      </div>
+
+      <p className="text-sm text-gray-600">
+        Configuration variables allow for customizable NPC behavior through MoLang expressions.
+        These variables can be referenced in dialogues, scripts, and other configurations.
+      </p>
+
+      {config.config.length === 0 ? (
+        <div className="text-center py-8 text-gray-500">
+          No configuration variables defined. Click "Add Variable" to create one.
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {config.config.map((variable, index) => (
+            <div key={index} className="border rounded-lg p-4 space-y-3">
+              <div className="flex justify-between items-center">
+                <h3 className="font-medium text-lg">Variable {index + 1}</h3>
+                <button
+                  type="button"
+                  onClick={() => removeVariable(index)}
+                  className="p-1 text-red-600 hover:text-red-800"
+                  title="Remove variable"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">Variable Name</label>
+                  <input
+                    type="text"
+                    value={variable.variableName}
+                    onChange={(e) => updateVariable(index, 'variableName', e.target.value)}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                    placeholder="challenge_cooldown"
+                  />
+                  <p className="text-xs text-gray-500 mt-1">Internal identifier for the variable</p>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">Display Name</label>
+                  <input
+                    type="text"
+                    value={variable.displayName}
+                    onChange={(e) => updateVariable(index, 'displayName', e.target.value)}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                    placeholder="Challenge Cooldown"
+                  />
+                  <p className="text-xs text-gray-500 mt-1">Human-readable name shown in UI</p>
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className="block text-sm font-medium text-gray-700">Description</label>
+                  <textarea
+                    value={variable.description}
+                    onChange={(e) => updateVariable(index, 'description', e.target.value)}
+                    rows={2}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                    placeholder="How long in ticks the NPC will be un-challengable from that player's last challenge."
+                  />
+                  <p className="text-xs text-gray-500 mt-1">Detailed description of what this variable controls</p>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">Type</label>
+                  <select
+                    value={variable.type}
+                    onChange={(e) => updateVariable(index, 'type', e.target.value as MoLangConfigVariable['type'])}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                  >
+                    <option value="TEXT">Text</option>
+                    <option value="NUMBER">Number</option>
+                    <option value="BOOLEAN">Boolean</option>
+                  </select>
+                  <p className="text-xs text-gray-500 mt-1">Data type for the variable</p>
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-gray-700">Default Value</label>
+                  {variable.type === 'BOOLEAN' ? (
+                    <select
+                      value={variable.defaultValue.toString()}
+                      onChange={(e) => updateVariable(index, 'defaultValue', e.target.value === 'true')}
+                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                    >
+                      <option value="false">False</option>
+                      <option value="true">True</option>
+                    </select>
+                  ) : variable.type === 'NUMBER' ? (
+                    <input
+                      type="number"
+                      value={String(variable.defaultValue)}
+                      onChange={(e) => updateVariable(index, 'defaultValue', e.target.value ? parseFloat(e.target.value) : 0)}
+                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                      placeholder="0"
+                    />
+                  ) : (
+                    <input
+                      type="text"
+                      value={String(variable.defaultValue)}
+                      onChange={(e) => updateVariable(index, 'defaultValue', e.target.value)}
+                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                      placeholder="Default text value"
+                    />
+                  )}
+                  <p className="text-xs text-gray-500 mt-1">Initial value for the variable</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/DialogueEditor.tsx

@@ -0,0 +1,414 @@
+import React, { useState } from 'react';
+import { Plus, Trash2, MessageCircle } from 'lucide-react';
+import type { DialogueConfiguration, DialoguePage, DialogueSpeaker } from '../types/npc';
+
+interface DialogueEditorProps {
+  dialogue: DialogueConfiguration | null;
+  onChange: (dialogue: DialogueConfiguration) => void;
+}
+
+export const DialogueEditor: React.FC<DialogueEditorProps> = ({ dialogue, onChange }) => {
+  const [selectedPageId, setSelectedPageId] = useState<string | null>(null);
+  const [speakerEditMode, setSpeakerEditMode] = useState(false);
+
+  const initializeDialogue = () => {
+    const newDialogue: DialogueConfiguration = {
+      speakers: {
+        npc: {
+          name: { type: 'expression', expression: 'q.npc.name' },
+          face: 'q.npc.face(false);'
+        },
+        player: {
+          name: { type: 'expression', expression: 'q.player.username' },
+          face: 'q.player.face();'
+        }
+      },
+      pages: [{
+        id: 'greeting',
+        speaker: 'npc',
+        lines: ['Hello there!'],
+        input: 'q.dialogue.close();'
+      }]
+    };
+    onChange(newDialogue);
+    setSelectedPageId('greeting');
+  };
+
+  if (!dialogue) {
+    return (
+      <div className="space-y-6">
+        <h2 className="text-xl font-semibold text-gray-900">Dialogue Editor</h2>
+        <div className="text-center py-8">
+          <MessageCircle className="mx-auto h-12 w-12 text-gray-400" />
+          <p className="mt-2 text-sm text-gray-500">No dialogue configured</p>
+          <button
+            type="button"
+            onClick={initializeDialogue}
+            className="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700"
+          >
+            Create Dialogue
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const addPage = () => {
+    const newPageId = `page_${Date.now()}`;
+    const newPage: DialoguePage = {
+      id: newPageId,
+      speaker: 'npc',
+      lines: ['New dialogue line'],
+      input: 'q.dialogue.close();'
+    };
+    
+    onChange({
+      ...dialogue,
+      pages: [...dialogue.pages, newPage]
+    });
+    setSelectedPageId(newPageId);
+  };
+
+  const updatePage = (pageId: string, updatedPage: DialoguePage) => {
+    onChange({
+      ...dialogue,
+      pages: dialogue.pages.map(page => 
+        page.id === pageId ? updatedPage : page
+      )
+    });
+  };
+
+  const deletePage = (pageId: string) => {
+    onChange({
+      ...dialogue,
+      pages: dialogue.pages.filter(page => page.id !== pageId)
+    });
+    if (selectedPageId === pageId) {
+      setSelectedPageId(dialogue.pages.length > 1 ? dialogue.pages[0].id : null);
+    }
+  };
+
+  const addSpeaker = () => {
+    const speakerName = `speaker_${Object.keys(dialogue.speakers).length + 1}`;
+    onChange({
+      ...dialogue,
+      speakers: {
+        ...dialogue.speakers,
+        [speakerName]: {
+          name: { type: 'expression', expression: `'${speakerName}'` },
+          face: ''
+        }
+      }
+    });
+  };
+
+  const updateSpeaker = (speakerId: string, speaker: DialogueSpeaker) => {
+    onChange({
+      ...dialogue,
+      speakers: {
+        ...dialogue.speakers,
+        [speakerId]: speaker
+      }
+    });
+  };
+
+  const deleteSpeaker = (speakerId: string) => {
+    const newSpeakers = { ...dialogue.speakers };
+    delete newSpeakers[speakerId];
+    onChange({
+      ...dialogue,
+      speakers: newSpeakers
+    });
+  };
+
+  const selectedPage = dialogue.pages.find(page => page.id === selectedPageId);
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-gray-900">Dialogue Editor</h2>
+
+      {/* Global Dialogue Settings */}
+      <div className="border rounded-lg p-4 space-y-3">
+        <h3 className="font-medium">Global Settings</h3>
+        <div className="grid grid-cols-1 gap-3">
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Initialization Action</label>
+            <input
+              type="text"
+              value={dialogue.initializationAction || ''}
+              onChange={(e) => onChange({ ...dialogue, initializationAction: e.target.value || undefined })}
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+              placeholder="q.dialogue.close();"
+            />
+            <p className="text-xs text-gray-500 mt-1">MoLang script executed when dialogue starts</p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Escape Action</label>
+            <input
+              type="text"
+              value={dialogue.escapeAction || ''}
+              onChange={(e) => onChange({ ...dialogue, escapeAction: e.target.value || undefined })}
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+              placeholder="q.dialogue.close();"
+            />
+            <p className="text-xs text-gray-500 mt-1">MoLang script executed when ESC is pressed</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Speakers Management */}
+      <div className="border rounded-lg p-4">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="font-medium">Speakers</h3>
+          <div className="space-x-2">
+            <button
+              type="button"
+              onClick={() => setSpeakerEditMode(!speakerEditMode)}
+              className="text-sm text-indigo-600 hover:text-indigo-800"
+            >
+              {speakerEditMode ? 'Done' : 'Edit Speakers'}
+            </button>
+            <button
+              type="button"
+              onClick={addSpeaker}
+              className="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              Add Speaker
+            </button>
+          </div>
+        </div>
+
+        {speakerEditMode ? (
+          <div className="space-y-3">
+            {Object.entries(dialogue.speakers).map(([speakerId, speaker]) => (
+              <div key={speakerId} className="border rounded p-3 space-y-2">
+                <div className="flex items-center justify-between">
+                  <strong className="text-sm">{speakerId}</strong>
+                  {!['npc', 'player'].includes(speakerId) && (
+                    <button
+                      type="button"
+                      onClick={() => deleteSpeaker(speakerId)}
+                      className="text-red-600 hover:text-red-800"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700">Name Expression</label>
+                    <input
+                      type="text"
+                      value={speaker.name.expression || ''}
+                      onChange={(e) => updateSpeaker(speakerId, {
+                        ...speaker,
+                        name: { ...speaker.name, expression: e.target.value }
+                      })}
+                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                      placeholder="q.npc.name"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700">Face Expression</label>
+                    <input
+                      type="text"
+                      value={speaker.face || ''}
+                      onChange={(e) => updateSpeaker(speakerId, {
+                        ...speaker,
+                        face: e.target.value
+                      })}
+                      className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                      placeholder="q.npc.face(false);"
+                    />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="flex flex-wrap gap-2">
+            {Object.keys(dialogue.speakers).map(speakerId => (
+              <span key={speakerId} className="px-2 py-1 bg-gray-100 rounded-md text-sm">
+                {speakerId}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Pages List */}
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <h3 className="font-medium">Pages</h3>
+            <button
+              type="button"
+              onClick={addPage}
+              className="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
+            >
+              <Plus className="h-3 w-3 mr-1" />
+              Add Page
+            </button>
+          </div>
+          
+          <div className="space-y-1 max-h-96 overflow-y-auto">
+            {dialogue.pages.map(page => (
+              <div
+                key={page.id}
+                className={`p-2 rounded cursor-pointer border ${
+                  selectedPageId === page.id
+                    ? 'border-indigo-500 bg-indigo-50'
+                    : 'border-gray-200 hover:bg-gray-50'
+                }`}
+                onClick={() => setSelectedPageId(page.id)}
+              >
+                <div className="flex items-center justify-between">
+                  <div>
+                    <div className="font-medium text-sm">{page.id}</div>
+                    <div className="text-xs text-gray-500">Speaker: {page.speaker}</div>
+                    <div className="text-xs text-gray-600 truncate">
+                      {Array.isArray(page.lines) 
+                        ? (typeof page.lines[0] === 'string' ? page.lines[0] : page.lines[0]?.text || 'Expression') 
+                        : (typeof page.lines === 'string' ? page.lines : page.lines?.text || 'Expression')}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      deletePage(page.id);
+                    }}
+                    className="text-red-600 hover:text-red-800 opacity-0 group-hover:opacity-100"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Page Editor */}
+        <div className="lg:col-span-2">
+          {selectedPage ? (
+            <PageEditor
+              page={selectedPage}
+              speakers={dialogue.speakers}
+              onChange={(updatedPage) => updatePage(selectedPage.id, updatedPage)}
+            />
+          ) : (
+            <div className="text-center py-8 text-gray-500">
+              Select a page to edit
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface PageEditorProps {
+  page: DialoguePage;
+  speakers: Record<string, DialogueSpeaker>;
+  onChange: (page: DialoguePage) => void;
+}
+
+const PageEditor: React.FC<PageEditorProps> = ({ page, speakers, onChange }) => {
+  const updatePage = (field: keyof DialoguePage, value: any) => {
+    onChange({ ...page, [field]: value });
+  };
+
+  const updateLine = (index: number, value: string) => {
+    const newLines = [...page.lines];
+    newLines[index] = value;
+    updatePage('lines', newLines);
+  };
+
+  const addLine = () => {
+    updatePage('lines', [...page.lines, '']);
+  };
+
+  const removeLine = (index: number) => {
+    updatePage('lines', page.lines.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="space-y-4 border rounded-lg p-4">
+      <h3 className="font-medium text-lg">Edit Page: {page.id}</h3>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Page ID</label>
+          <input
+            type="text"
+            value={page.id}
+            onChange={(e) => updatePage('id', e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Speaker</label>
+          <select
+            value={page.speaker}
+            onChange={(e) => updatePage('speaker', e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          >
+            {Object.keys(speakers).map(speakerId => (
+              <option key={speakerId} value={speakerId}>{speakerId}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <label className="block text-sm font-medium text-gray-700">Lines</label>
+          <button
+            type="button"
+            onClick={addLine}
+            className="inline-flex items-center px-2 py-1 text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            Add Line
+          </button>
+        </div>
+        
+        <div className="space-y-2">
+          {page.lines.map((line, index) => (
+            <div key={index} className="flex items-center space-x-2">
+              <input
+                type="text"
+                value={typeof line === 'string' ? line : line.expression || ''}
+                onChange={(e) => updateLine(index, e.target.value)}
+                className="flex-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                placeholder="Dialogue text or MoLang expression"
+              />
+              <button
+                type="button"
+                onClick={() => removeLine(index)}
+                className="text-red-600 hover:text-red-800"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700">Input/Action</label>
+        <textarea
+          value={typeof page.input === 'string' ? page.input : JSON.stringify(page.input, null, 2)}
+          onChange={(e) => updatePage('input', e.target.value)}
+          rows={3}
+          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm font-mono"
+          placeholder="q.dialogue.close(); or JSON for options"
+        />
+        <p className="text-xs text-gray-500 mt-1">
+          MoLang script or JSON for dialogue options
+        </p>
+      </div>
+    </div>
+  );
+};

src/components/ImportExport.tsx

@@ -0,0 +1,316 @@
+import React, { useRef } from 'react';
+import { Upload, Download, FileText, AlertTriangle } from 'lucide-react';
+import type { NPCConfiguration, DialogueConfiguration } from '../types/npc';
+
+interface ImportExportProps {
+  npcConfig: NPCConfiguration;
+  dialogueConfig: DialogueConfiguration | null;
+  onNPCConfigLoad: (config: NPCConfiguration) => void;
+  onDialogueConfigLoad: (config: DialogueConfiguration) => void;
+}
+
+export const ImportExport: React.FC<ImportExportProps> = ({
+  npcConfig,
+  dialogueConfig,
+  onNPCConfigLoad,
+  onDialogueConfigLoad
+}) => {
+  const npcFileInputRef = useRef<HTMLInputElement>(null);
+  const dialogueFileInputRef = useRef<HTMLInputElement>(null);
+  const [importError, setImportError] = React.useState<string | null>(null);
+  const [importSuccess, setImportSuccess] = React.useState<string | null>(null);
+
+  const handleFileRead = (
+    file: File,
+    onLoad: (config: any) => void,
+    configType: string
+  ) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const content = e.target?.result as string;
+        const config = JSON.parse(content);
+        
+        // Basic validation
+        if (configType === 'npc') {
+          if (!config.resourceIdentifier || !config.names) {
+            throw new Error('Invalid NPC configuration: missing required fields');
+          }
+        } else if (configType === 'dialogue') {
+          if (!config.pages || !config.speakers) {
+            throw new Error('Invalid dialogue configuration: missing required fields');
+          }
+        }
+        
+        onLoad(config);
+        setImportSuccess(`${configType} configuration loaded successfully!`);
+        setImportError(null);
+        setTimeout(() => setImportSuccess(null), 3000);
+      } catch (error) {
+        setImportError(`Error loading ${configType}: ${error instanceof Error ? error.message : 'Invalid JSON'}`);
+        setImportSuccess(null);
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  const handleNPCFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      handleFileRead(file, onNPCConfigLoad, 'npc');
+    }
+  };
+
+  const handleDialogueFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      handleFileRead(file, onDialogueConfigLoad, 'dialogue');
+    }
+  };
+
+  const exportExample = () => {
+    const exampleNPC: NPCConfiguration = {
+      hitbox: "player",
+      presets: [],
+      resourceIdentifier: "mymod:example_npc",
+      config: [
+        {
+          variableName: "greeting_message",
+          displayName: "Greeting Message",
+          description: "The message displayed when first talking to the NPC",
+          type: "TEXT",
+          defaultValue: "Hello, trainer!"
+        }
+      ],
+      isInvulnerable: true,
+      canDespawn: false,
+      names: ["Example NPC"],
+      interaction: {
+        type: "dialogue",
+        dialogue: "mymod:example_dialogue"
+      },
+      battleConfiguration: {
+        canChallenge: true
+      },
+      skill: 3,
+      party: {
+        type: "simple",
+        pokemon: [
+          "pikachu level=25 moves=thunderbolt,quick-attack",
+          "charmander level=24 moves=ember,scratch"
+        ]
+      }
+    };
+
+    const exampleDialogue: DialogueConfiguration = {
+      speakers: {
+        npc: {
+          name: { type: "expression", expression: "q.npc.name" },
+          face: "q.npc.face(false);"
+        },
+        player: {
+          name: { type: "expression", expression: "q.player.username" },
+          face: "q.player.face();"
+        }
+      },
+      pages: [
+        {
+          id: "greeting",
+          speaker: "npc",
+          lines: ["Hello there, trainer! Would you like to battle?"],
+          input: {
+            type: "option",
+            vertical: true,
+            options: [
+              {
+                text: "Yes, let's battle!",
+                value: "accept",
+                action: ["q.npc.start_battle(q.player, 'single');"]
+              },
+              {
+                text: "Maybe later.",
+                value: "decline",
+                action: ["q.dialogue.close();"]
+              }
+            ]
+          }
+        }
+      ]
+    };
+
+    // Download both files
+    const downloadFile = (content: string, filename: string) => {
+      const blob = new Blob([content], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    };
+
+    downloadFile(JSON.stringify(exampleNPC, null, 2), 'example_npc.json');
+    downloadFile(JSON.stringify(exampleDialogue, null, 2), 'example_dialogue.json');
+  };
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-gray-900">Import & Export</h2>
+
+      {/* Status Messages */}
+      {importError && (
+        <div className="bg-red-50 border border-red-200 rounded-md p-4">
+          <div className="flex">
+            <AlertTriangle className="h-5 w-5 text-red-400" />
+            <div className="ml-3">
+              <h3 className="text-sm font-medium text-red-800">Import Error</h3>
+              <p className="text-sm text-red-700">{importError}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {importSuccess && (
+        <div className="bg-green-50 border border-green-200 rounded-md p-4">
+          <div className="flex">
+            <FileText className="h-5 w-5 text-green-400" />
+            <div className="ml-3">
+              <p className="text-sm font-medium text-green-800">{importSuccess}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Import Section */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium text-gray-900">Import Configurations</h3>
+          
+          <div className="space-y-3">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Import NPC Configuration
+              </label>
+              <input
+                ref={npcFileInputRef}
+                type="file"
+                accept=".json"
+                onChange={handleNPCFileSelect}
+                className="hidden"
+              />
+              <button
+                type="button"
+                onClick={() => npcFileInputRef.current?.click()}
+                className="w-full inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm bg-white text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50"
+              >
+                <Upload className="h-4 w-4 mr-2" />
+                Choose NPC JSON File
+              </button>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Import Dialogue Configuration
+              </label>
+              <input
+                ref={dialogueFileInputRef}
+                type="file"
+                accept=".json"
+                onChange={handleDialogueFileSelect}
+                className="hidden"
+              />
+              <button
+                type="button"
+                onClick={() => dialogueFileInputRef.current?.click()}
+                className="w-full inline-flex items-center justify-center px-4 py-2 border border-gray-300 shadow-sm bg-white text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50"
+              >
+                <Upload className="h-4 w-4 mr-2" />
+                Choose Dialogue JSON File
+              </button>
+            </div>
+          </div>
+
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <h4 className="font-medium text-blue-900 text-sm">Import Tips</h4>
+            <ul className="mt-2 text-xs text-blue-800 space-y-1">
+              <li>• Files must be valid JSON format</li>
+              <li>• NPC configs require resourceIdentifier and names</li>
+              <li>• Dialogue configs require pages and speakers</li>
+              <li>• Import will override current configuration</li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Export/Examples Section */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-medium text-gray-900">Examples & Templates</h3>
+          
+          <div className="space-y-3">
+            <button
+              type="button"
+              onClick={exportExample}
+              className="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+            >
+              <Download className="h-4 w-4 mr-2" />
+              Download Example Files
+            </button>
+            
+            <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
+              <h4 className="font-medium text-gray-900 text-sm mb-2">Example Includes:</h4>
+              <ul className="text-xs text-gray-700 space-y-1">
+                <li>• Complete NPC with battle configuration</li>
+                <li>• Simple dialogue with options</li>
+                <li>• Configuration variables example</li>
+                <li>• Battle party setup</li>
+                <li>• MoLang expressions</li>
+              </ul>
+            </div>
+          </div>
+
+          <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+            <h4 className="font-medium text-yellow-800 text-sm">Quick Start</h4>
+            <p className="mt-1 text-xs text-yellow-700">
+              Download the example files to see a complete working NPC configuration. 
+              You can then import and modify them to create your own NPCs.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Current Configuration Summary */}
+      <div className="border-t pt-6">
+        <h3 className="text-lg font-medium text-gray-900 mb-3">Current Configuration Summary</h3>
+        <div className="bg-gray-50 rounded-lg p-4">
+          <dl className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+            <div>
+              <dt className="font-medium text-gray-900">NPC Name</dt>
+              <dd className="text-gray-700">{npcConfig.names[0] || 'Unnamed NPC'}</dd>
+            </div>
+            <div>
+              <dt className="font-medium text-gray-900">Resource ID</dt>
+              <dd className="text-gray-700 font-mono text-xs">{npcConfig.resourceIdentifier || 'Not set'}</dd>
+            </div>
+            <div>
+              <dt className="font-medium text-gray-900">Interaction</dt>
+              <dd className="text-gray-700 capitalize">{npcConfig.interaction.type}</dd>
+            </div>
+            <div>
+              <dt className="font-medium text-gray-900">Can Battle</dt>
+              <dd className="text-gray-700">{npcConfig.battleConfiguration?.canChallenge ? 'Yes' : 'No'}</dd>
+            </div>
+            <div>
+              <dt className="font-medium text-gray-900">Config Variables</dt>
+              <dd className="text-gray-700">{npcConfig.config.length}</dd>
+            </div>
+            <div>
+              <dt className="font-medium text-gray-900">Has Dialogue</dt>
+              <dd className="text-gray-700">{dialogueConfig ? 'Yes' : 'No'}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/JSONPreview.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { Download, Copy, Check } from 'lucide-react';
+import type { NPCConfiguration, DialogueConfiguration } from '../types/npc';
+import { ValidationPanel } from './ValidationPanel';
+
+interface JSONPreviewProps {
+  npcConfig: NPCConfiguration;
+  dialogueConfig: DialogueConfiguration | null;
+}
+
+export const JSONPreview: React.FC<JSONPreviewProps> = ({ npcConfig, dialogueConfig }) => {
+  const [copiedNPC, setCopiedNPC] = React.useState(false);
+  const [copiedDialogue, setCopiedDialogue] = React.useState(false);
+
+  const cleanNPCConfig = (config: NPCConfiguration) => {
+    const cleaned = { ...config };
+    
+    // Remove empty or undefined values
+    Object.keys(cleaned).forEach(key => {
+      const value = cleaned[key as keyof NPCConfiguration];
+      if (value === undefined || value === null || 
+          (typeof value === 'string' && value === '') ||
+          (Array.isArray(value) && value.length === 0)) {
+        delete cleaned[key as keyof NPCConfiguration];
+      }
+    });
+
+    // Remove empty battle configuration
+    if (cleaned.battleConfiguration && !cleaned.battleConfiguration.canChallenge) {
+      delete cleaned.battleConfiguration;
+    }
+
+    // Remove party if no battle configuration
+    if (!cleaned.battleConfiguration?.canChallenge) {
+      delete cleaned.party;
+    }
+
+    return cleaned;
+  };
+
+  const npcJson = JSON.stringify(cleanNPCConfig(npcConfig), null, 2);
+  const dialogueJson = dialogueConfig ? JSON.stringify(dialogueConfig, null, 2) : null;
+
+  const copyToClipboard = async (text: string, type: 'npc' | 'dialogue') => {
+    try {
+      await navigator.clipboard.writeText(text);
+      if (type === 'npc') {
+        setCopiedNPC(true);
+        setTimeout(() => setCopiedNPC(false), 2000);
+      } else {
+        setCopiedDialogue(true);
+        setTimeout(() => setCopiedDialogue(false), 2000);
+      }
+    } catch (err) {
+      console.error('Failed to copy to clipboard:', err);
+    }
+  };
+
+  const downloadJSON = (content: string, filename: string) => {
+    const blob = new Blob([content], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const generateFilenames = () => {
+    const baseName = npcConfig.resourceIdentifier
+      .split(':')[1] || 'npc';
+    
+    return {
+      npc: `${baseName}.json`,
+      dialogue: `${baseName}-dialogue.json`
+    };
+  };
+
+  const filenames = generateFilenames();
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-gray-900">JSON Preview & Export</h2>
+
+      {/* Validation Panel */}
+      <ValidationPanel npcConfig={npcConfig} dialogueConfig={dialogueConfig} />
+
+      {/* NPC Configuration */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-medium text-gray-900">NPC Configuration</h3>
+          <div className="flex space-x-2">
+            <button
+              type="button"
+              onClick={() => copyToClipboard(npcJson, 'npc')}
+              className="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+            >
+              {copiedNPC ? (
+                <Check className="h-4 w-4 mr-1 text-green-600" />
+              ) : (
+                <Copy className="h-4 w-4 mr-1" />
+              )}
+              Copy
+            </button>
+            <button
+              type="button"
+              onClick={() => downloadJSON(npcJson, filenames.npc)}
+              className="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+            >
+              <Download className="h-4 w-4 mr-1" />
+              Download
+            </button>
+          </div>
+        </div>
+        
+        <div className="bg-gray-900 rounded-lg p-4 overflow-auto max-h-96">
+          <pre className="text-sm text-gray-100 whitespace-pre-wrap">
+            {npcJson}
+          </pre>
+        </div>
+        
+        <p className="text-sm text-gray-600">
+          Save as: <code className="bg-gray-100 px-1 rounded">{filenames.npc}</code> in your mod's data folder
+        </p>
+      </div>
+
+      {/* Dialogue Configuration */}
+      {dialogueConfig && (
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-medium text-gray-900">Dialogue Configuration</h3>
+            <div className="flex space-x-2">
+              <button
+                type="button"
+                onClick={() => copyToClipboard(dialogueJson!, 'dialogue')}
+                className="inline-flex items-center px-3 py-1 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+              >
+                {copiedDialogue ? (
+                  <Check className="h-4 w-4 mr-1 text-green-600" />
+                ) : (
+                  <Copy className="h-4 w-4 mr-1" />
+                )}
+                Copy
+              </button>
+              <button
+                type="button"
+                onClick={() => downloadJSON(dialogueJson!, filenames.dialogue)}
+                className="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+              >
+                <Download className="h-4 w-4 mr-1" />
+                Download
+              </button>
+            </div>
+          </div>
+          
+          <div className="bg-gray-900 rounded-lg p-4 overflow-auto max-h-96">
+            <pre className="text-sm text-gray-100 whitespace-pre-wrap">
+              {dialogueJson}
+            </pre>
+          </div>
+          
+          <p className="text-sm text-gray-600">
+            Save as: <code className="bg-gray-100 px-1 rounded">{filenames.dialogue}</code> in your mod's dialogues folder
+          </p>
+        </div>
+      )}
+
+      {/* File Structure Guide */}
+      <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <h4 className="font-medium text-blue-900 mb-2">File Structure Guide</h4>
+        <div className="text-sm text-blue-800 space-y-1">
+          <p>Place your files in the following locations within your mod:</p>
+          <ul className="list-disc list-inside ml-2 space-y-1">
+            <li>
+              <strong>NPC Config:</strong> <code>data/&lt;namespace&gt;/npcs/{filenames.npc}</code>
+            </li>
+            {dialogueConfig && (
+              <li>
+                <strong>Dialogue Config:</strong> <code>data/&lt;namespace&gt;/dialogues/{filenames.dialogue}</code>
+              </li>
+            )}
+          </ul>
+          <p className="mt-2 text-xs">
+            Replace <code>&lt;namespace&gt;</code> with your mod's namespace (e.g., "cobblemon", "mymod")
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/NPCBasicSettings.tsx

@@ -0,0 +1,199 @@
+import React from 'react';
+import type { NPCConfiguration, NPCHitboxValue } from '../types/npc';
+
+interface NPCBasicSettingsProps {
+  config: NPCConfiguration;
+  onChange: (config: NPCConfiguration) => void;
+}
+
+export const NPCBasicSettings: React.FC<NPCBasicSettingsProps> = ({ config, onChange }) => {
+  const handleChange = (field: keyof NPCConfiguration, value: any) => {
+    onChange({ ...config, [field]: value });
+  };
+
+  const handleHitboxChange = (hitbox: NPCHitboxValue) => {
+    handleChange('hitbox', hitbox);
+  };
+
+  const handleNamesChange = (names: string) => {
+    handleChange('names', names.split(',').map(name => name.trim()).filter(name => name));
+  };
+
+  const handleAspectsChange = (aspects: string) => {
+    handleChange('aspects', aspects ? aspects.split(',').map(aspect => aspect.trim()).filter(aspect => aspect) : undefined);
+  };
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-gray-900">Basic Settings</h2>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Resource Identifier</label>
+          <input
+            type="text"
+            value={config.resourceIdentifier}
+            onChange={(e) => handleChange('resourceIdentifier', e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="cobblemon:npc_name"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Names (comma-separated)</label>
+          <input
+            type="text"
+            value={config.names.join(', ')}
+            onChange={(e) => handleNamesChange(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="NPC Name 1, NPC Name 2"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Hitbox</label>
+          <div className="mt-1 space-y-2">
+            <label className="inline-flex items-center">
+              <input
+                type="radio"
+                checked={config.hitbox === "player"}
+                onChange={() => handleHitboxChange("player")}
+                className="form-radio"
+              />
+              <span className="ml-2">Player (default)</span>
+            </label>
+            <div className="space-y-1">
+              <label className="inline-flex items-center">
+                <input
+                  type="radio"
+                  checked={typeof config.hitbox === "object"}
+                  onChange={() => handleHitboxChange({ width: 0.6, height: 1.8 })}
+                  className="form-radio"
+                />
+                <span className="ml-2">Custom</span>
+              </label>
+              {typeof config.hitbox === "object" && (
+                <div className="ml-6 grid grid-cols-2 gap-2">
+                  <div>
+                    <label className="block text-xs text-gray-600">Width</label>
+                    <input
+                      type="number"
+                      step="0.1"
+                      value={config.hitbox.width}
+                      onChange={(e) => handleHitboxChange({ 
+                        width: parseFloat(e.target.value), 
+                        height: typeof config.hitbox === "object" ? config.hitbox.height : 1.8 
+                      })}
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs text-gray-600">Height</label>
+                    <input
+                      type="number"
+                      step="0.1"
+                      value={config.hitbox.height}
+                      onChange={(e) => handleHitboxChange({ 
+                        width: typeof config.hitbox === "object" ? config.hitbox.width : 0.6, 
+                        height: parseFloat(e.target.value) 
+                      })}
+                      className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Model Scale</label>
+          <input
+            type="number"
+            step="0.01"
+            value={config.modelScale || 0.9375}
+            onChange={(e) => handleChange('modelScale', parseFloat(e.target.value))}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Aspects (comma-separated)</label>
+          <input
+            type="text"
+            value={config.aspects?.join(', ') || ''}
+            onChange={(e) => handleAspectsChange(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="aspect1, aspect2"
+          />
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        <h3 className="text-lg font-medium text-gray-900">Behavior Settings</h3>
+        
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={config.isInvulnerable || false}
+              onChange={(e) => handleChange('isInvulnerable', e.target.checked)}
+              className="form-checkbox"
+            />
+            <span className="ml-2">Invulnerable</span>
+          </label>
+
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={!(config.canDespawn ?? true)}
+              onChange={(e) => handleChange('canDespawn', !e.target.checked)}
+              className="form-checkbox"
+            />
+            <span className="ml-2">Persistent</span>
+          </label>
+
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={config.isMovable ?? true}
+              onChange={(e) => handleChange('isMovable', e.target.checked)}
+              className="form-checkbox"
+            />
+            <span className="ml-2">Movable</span>
+          </label>
+
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={config.isLeashable || false}
+              onChange={(e) => handleChange('isLeashable', e.target.checked)}
+              className="form-checkbox"
+            />
+            <span className="ml-2">Leashable</span>
+          </label>
+
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={config.allowProjectileHits ?? true}
+              onChange={(e) => handleChange('allowProjectileHits', e.target.checked)}
+              className="form-checkbox"
+            />
+            <span className="ml-2">Projectile Hits</span>
+          </label>
+
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={config.hideNameTag || false}
+              onChange={(e) => handleChange('hideNameTag', e.target.checked)}
+              className="form-checkbox"
+            />
+            <span className="ml-2">Hide Name Tag</span>
+          </label>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/NPCBattleConfiguration.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import type { NPCConfiguration } from '../types/npc';
+
+interface NPCBattleConfigurationProps {
+  config: NPCConfiguration;
+  onChange: (config: NPCConfiguration) => void;
+}
+
+export const NPCBattleConfiguration: React.FC<NPCBattleConfigurationProps> = ({ config, onChange }) => {
+  const handleChange = (field: keyof NPCConfiguration, value: any) => {
+    onChange({ ...config, [field]: value });
+  };
+
+  const handleBattleConfigChange = (field: string, value: any) => {
+    onChange({
+      ...config,
+      battleConfiguration: {
+        canChallenge: config.battleConfiguration?.canChallenge ?? false,
+        ...config.battleConfiguration,
+        [field]: value
+      }
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-gray-900">Battle Configuration</h2>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={config.battleConfiguration?.canChallenge || false}
+              onChange={(e) => handleBattleConfigChange('canChallenge', e.target.checked)}
+              className="form-checkbox"
+            />
+            <span className="ml-2">Can Challenge</span>
+          </label>
+          <p className="text-xs text-gray-500 mt-1">Allow players to battle this NPC</p>
+        </div>
+
+        {config.battleConfiguration?.canChallenge && (
+          <>
+            <div>
+              <label className="block text-sm font-medium text-gray-700">Skill Level</label>
+              <select
+                value={config.skill || 1}
+                onChange={(e) => handleChange('skill', parseInt(e.target.value))}
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+              >
+                <option value={1}>1 - Beginner</option>
+                <option value={2}>2 - Novice</option>
+                <option value={3}>3 - Intermediate</option>
+                <option value={4}>4 - Advanced</option>
+                <option value={5}>5 - Expert</option>
+              </select>
+              <p className="text-xs text-gray-500 mt-1">AI difficulty level (1-5)</p>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700">Battle Theme</label>
+              <input
+                type="text"
+                value={config.battleTheme || ''}
+                onChange={(e) => handleChange('battleTheme', e.target.value || undefined)}
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                placeholder="cobblemon:battle_music"
+              />
+              <p className="text-xs text-gray-500 mt-1">Resource location for battle music</p>
+            </div>
+
+            <div className="space-y-2">
+              <label className="inline-flex items-center">
+                <input
+                  type="checkbox"
+                  checked={config.autoHealParty || false}
+                  onChange={(e) => handleChange('autoHealParty', e.target.checked)}
+                  className="form-checkbox"
+                />
+                <span className="ml-2">Auto Heal Party</span>
+              </label>
+              <p className="text-xs text-gray-500">Heal Pokemon between battles</p>
+            </div>
+
+            <div className="space-y-2">
+              <label className="inline-flex items-center">
+                <input
+                  type="checkbox"
+                  checked={config.randomizePartyOrder || false}
+                  onChange={(e) => handleChange('randomizePartyOrder', e.target.checked)}
+                  className="form-checkbox"
+                />
+                <span className="ml-2">Randomize Party Order</span>
+              </label>
+              <p className="text-xs text-gray-500">Randomize lead Pokemon</p>
+            </div>
+
+            <div className="space-y-2">
+              <label className="inline-flex items-center">
+                <input
+                  type="checkbox"
+                  checked={config.battleConfiguration?.simultaneousBattles || false}
+                  onChange={(e) => handleBattleConfigChange('simultaneousBattles', e.target.checked)}
+                  className="form-checkbox"
+                />
+                <span className="ml-2">Simultaneous Battles</span>
+              </label>
+              <p className="text-xs text-gray-500">Allow multiple players to battle at once (deprecated)</p>
+            </div>
+
+            <div className="space-y-2">
+              <label className="inline-flex items-center">
+                <input
+                  type="checkbox"
+                  checked={config.battleConfiguration?.healAfterwards ?? true}
+                  onChange={(e) => handleBattleConfigChange('healAfterwards', e.target.checked)}
+                  className="form-checkbox"
+                />
+                <span className="ml-2">Heal Afterwards</span>
+              </label>
+              <p className="text-xs text-gray-500">Heal player's party after battle (deprecated)</p>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

src/components/NPCInteractionEditor.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import type { NPCConfiguration, NPCInteraction } from '../types/npc';
+
+interface NPCInteractionEditorProps {
+  config: NPCConfiguration;
+  onChange: (config: NPCConfiguration) => void;
+}
+
+export const NPCInteractionEditor: React.FC<NPCInteractionEditorProps> = ({ config, onChange }) => {
+  const handleInteractionChange = (interaction: NPCInteraction) => {
+    onChange({ ...config, interaction });
+  };
+
+  const handleTypeChange = (type: NPCInteraction['type']) => {
+    switch (type) {
+      case 'dialogue':
+        handleInteractionChange({ type: 'dialogue', dialogue: '' });
+        break;
+      case 'script':
+        handleInteractionChange({ type: 'script', script: '' });
+        break;
+      case 'custom_script':
+        handleInteractionChange({ type: 'custom_script', script: '' });
+        break;
+      case 'none':
+        handleInteractionChange({ type: 'none' });
+        break;
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-gray-900">Interaction Configuration</h2>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Interaction Type</label>
+        <div className="space-y-2">
+          {(['dialogue', 'script', 'custom_script', 'none'] as const).map((type) => (
+            <label key={type} className="inline-flex items-center mr-6">
+              <input
+                type="radio"
+                value={type}
+                checked={config.interaction.type === type}
+                onChange={(e) => handleTypeChange(e.target.value as NPCInteraction['type'])}
+                className="form-radio"
+              />
+              <span className="ml-2">
+                {type === 'dialogue' && 'Dialogue'}
+                {type === 'script' && 'Predefined Script'}
+                {type === 'custom_script' && 'Custom Script'}
+                {type === 'none' && 'No Interaction'}
+              </span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {config.interaction.type === 'dialogue' && (
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Dialogue Resource Location</label>
+          <input
+            type="text"
+            value={config.interaction.dialogue}
+            onChange={(e) => handleInteractionChange({ type: 'dialogue', dialogue: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="cobblemon:my_dialogue"
+          />
+          <p className="text-xs text-gray-500 mt-1">
+            Reference to a dialogue file (e.g., "cobblemon:my_dialogue" refers to data/cobblemon/dialogues/my_dialogue.json)
+          </p>
+        </div>
+      )}
+
+      {config.interaction.type === 'script' && (
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Script Resource Location</label>
+          <input
+            type="text"
+            value={config.interaction.script}
+            onChange={(e) => handleInteractionChange({ type: 'script', script: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="cobblemon:my_script"
+          />
+          <p className="text-xs text-gray-500 mt-1">
+            Reference to a MoLang script file (e.g., "cobblemon:my_script" refers to data/cobblemon/molang/my_script.molang)
+          </p>
+        </div>
+      )}
+
+      {config.interaction.type === 'custom_script' && (
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Custom MoLang Script</label>
+          <textarea
+            value={config.interaction.script}
+            onChange={(e) => handleInteractionChange({ type: 'custom_script', script: e.target.value })}
+            rows={4}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="q.player.send_message('Hello from custom script!');"
+          />
+          <p className="text-xs text-gray-500 mt-1">
+            Direct MoLang script code to execute when player interacts with NPC
+          </p>
+        </div>
+      )}
+
+      {config.interaction.type === 'none' && (
+        <div className="bg-gray-50 p-4 rounded-md">
+          <p className="text-sm text-gray-600">
+            This NPC will not respond to player interactions. Useful for decorative NPCs.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/NPCPartyBuilder.tsx

@@ -0,0 +1,326 @@
+import React, { useState } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import type { NPCConfiguration, NPCPartyProvider, SimplePartyProvider, PoolPartyProvider, PoolEntry } from '../types/npc';
+
+interface NPCPartyBuilderProps {
+  config: NPCConfiguration;
+  onChange: (config: NPCConfiguration) => void;
+}
+
+export const NPCPartyBuilder: React.FC<NPCPartyBuilderProps> = ({ config, onChange }) => {
+  const [partyType, setPartyType] = useState<'simple' | 'pool' | 'script'>(config.party?.type || 'simple');
+
+  const handlePartyChange = (party: NPCPartyProvider) => {
+    onChange({ ...config, party });
+  };
+
+  const handlePartyTypeChange = (type: 'simple' | 'pool' | 'script') => {
+    setPartyType(type);
+    
+    switch (type) {
+      case 'simple':
+        handlePartyChange({ type: 'simple', pokemon: [''] });
+        break;
+      case 'pool':
+        handlePartyChange({ type: 'pool', pool: [{ pokemon: '', weight: 1 }] });
+        break;
+      case 'script':
+        handlePartyChange({ type: 'script', script: '' });
+        break;
+    }
+  };
+
+  const renderSimpleParty = () => {
+    const party = config.party as SimplePartyProvider;
+    
+    if (!party || !party.pokemon) {
+      return null;
+    }
+    
+    const addPokemon = () => {
+      handlePartyChange({
+        ...party,
+        pokemon: [...party.pokemon, '']
+      });
+    };
+
+    const removePokemon = (index: number) => {
+      handlePartyChange({
+        ...party,
+        pokemon: party.pokemon.filter((_, i) => i !== index)
+      });
+    };
+
+    const updatePokemon = (index: number, value: string) => {
+      const newPokemon = [...party.pokemon];
+      newPokemon[index] = value;
+      handlePartyChange({
+        ...party,
+        pokemon: newPokemon
+      });
+    };
+
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h4 className="font-medium">Pokemon List</h4>
+          <button
+            type="button"
+            onClick={addPokemon}
+            className="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            Add Pokemon
+          </button>
+        </div>
+
+        {party.pokemon.map((pokemon, index) => (
+          <div key={index} className="flex items-center space-x-2">
+            <input
+              type="text"
+              value={pokemon}
+              onChange={(e) => updatePokemon(index, e.target.value)}
+              className="flex-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+              placeholder="pikachu level=50 moves=thunderbolt,quick-attack"
+            />
+            <button
+              type="button"
+              onClick={() => removePokemon(index)}
+              className="p-1 text-red-600 hover:text-red-800"
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+          </div>
+        ))}
+
+        <div className="mt-4">
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={party.isStatic || false}
+              onChange={(e) => handlePartyChange({ ...party, isStatic: e.target.checked })}
+              className="form-checkbox"
+            />
+            <span className="ml-2 text-sm">Static Party</span>
+          </label>
+          <p className="text-xs text-gray-500 mt-1">If true, party won't change between battles</p>
+        </div>
+      </div>
+    );
+  };
+
+  const renderPoolParty = () => {
+    const party = config.party as PoolPartyProvider;
+    
+    const addPoolEntry = () => {
+      handlePartyChange({
+        ...party,
+        pool: [...party.pool, { pokemon: '', weight: 1 }]
+      });
+    };
+
+    const removePoolEntry = (index: number) => {
+      handlePartyChange({
+        ...party,
+        pool: party.pool.filter((_, i) => i !== index)
+      });
+    };
+
+    const updatePoolEntry = (index: number, field: keyof PoolEntry, value: any) => {
+      const newPool = [...party.pool];
+      newPool[index] = { ...newPool[index], [field]: value };
+      handlePartyChange({
+        ...party,
+        pool: newPool
+      });
+    };
+
+    return (
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Min Pokemon</label>
+            <input
+              type="number"
+              min="1"
+              max="6"
+              value={party.minPokemon || 1}
+              onChange={(e) => handlePartyChange({ ...party, minPokemon: parseInt(e.target.value) })}
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700">Max Pokemon</label>
+            <input
+              type="number"
+              min="1"
+              max="6"
+              value={party.maxPokemon || 6}
+              onChange={(e) => handlePartyChange({ ...party, maxPokemon: parseInt(e.target.value) })}
+              className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <h4 className="font-medium">Pool Entries</h4>
+          <button
+            type="button"
+            onClick={addPoolEntry}
+            className="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            Add Entry
+          </button>
+        </div>
+
+        {party.pool.map((entry, index) => (
+          <div key={index} className="border rounded-lg p-3 space-y-2">
+            <div className="flex justify-between items-center">
+              <h5 className="font-medium text-sm">Entry {index + 1}</h5>
+              <button
+                type="button"
+                onClick={() => removePoolEntry(index)}
+                className="p-1 text-red-600 hover:text-red-800"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+            
+            <div>
+              <label className="block text-xs font-medium text-gray-700">Pokemon</label>
+              <input
+                type="text"
+                value={entry.pokemon}
+                onChange={(e) => updatePoolEntry(index, 'pokemon', e.target.value)}
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                placeholder="pikachu level=50"
+              />
+            </div>
+
+            <div className="grid grid-cols-3 gap-2">
+              <div>
+                <label className="block text-xs font-medium text-gray-700">Weight</label>
+                <input
+                  type="number"
+                  min="0"
+                  step="0.1"
+                  value={entry.weight || 1}
+                  onChange={(e) => updatePoolEntry(index, 'weight', parseFloat(e.target.value))}
+                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700">Selectable Times</label>
+                <input
+                  type="number"
+                  min="0"
+                  value={entry.selectableTimes || ''}
+                  onChange={(e) => updatePoolEntry(index, 'selectableTimes', e.target.value ? parseInt(e.target.value) : undefined)}
+                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700">Level Variation</label>
+                <input
+                  type="number"
+                  min="0"
+                  value={entry.levelVariation || ''}
+                  onChange={(e) => updatePoolEntry(index, 'levelVariation', e.target.value ? parseInt(e.target.value) : undefined)}
+                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+
+        <div className="grid grid-cols-2 gap-4">
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={party.isStatic || false}
+              onChange={(e) => handlePartyChange({ ...party, isStatic: e.target.checked })}
+              className="form-checkbox"
+            />
+            <span className="ml-2 text-sm">Static</span>
+          </label>
+          <label className="inline-flex items-center">
+            <input
+              type="checkbox"
+              checked={party.useFixedRandom || false}
+              onChange={(e) => handlePartyChange({ ...party, useFixedRandom: e.target.checked })}
+              className="form-checkbox"
+            />
+            <span className="ml-2 text-sm">Fixed Random</span>
+          </label>
+        </div>
+      </div>
+    );
+  };
+
+  const renderScriptParty = () => {
+    const party = config.party as { type: 'script'; script: string; isStatic?: boolean };
+    
+    return (
+      <div className="space-y-3">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">Script Resource Location</label>
+          <input
+            type="text"
+            value={party.script}
+            onChange={(e) => handlePartyChange({ ...party, script: e.target.value })}
+            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+            placeholder="cobblemon:party_script"
+          />
+        </div>
+
+        <label className="inline-flex items-center">
+          <input
+            type="checkbox"
+            checked={party.isStatic || false}
+            onChange={(e) => handlePartyChange({ ...party, isStatic: e.target.checked })}
+            className="form-checkbox"
+          />
+          <span className="ml-2 text-sm">Static Party</span>
+        </label>
+      </div>
+    );
+  };
+
+  if (!config.battleConfiguration?.canChallenge) {
+    return (
+      <div className="space-y-6">
+        <h2 className="text-xl font-semibold text-gray-900">Pokemon Party</h2>
+        <p className="text-gray-500 italic">Enable battle configuration to set up a party</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-xl font-semibold text-gray-900">Pokemon Party</h2>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">Party Type</label>
+        <div className="flex space-x-4">
+          {(['simple', 'pool', 'script'] as const).map((type) => (
+            <label key={type} className="inline-flex items-center">
+              <input
+                type="radio"
+                value={type}
+                checked={partyType === type}
+                onChange={(e) => handlePartyTypeChange(e.target.value as 'simple' | 'pool' | 'script')}
+                className="form-radio"
+              />
+              <span className="ml-2 capitalize">{type}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      {partyType === 'simple' && renderSimpleParty()}
+      {partyType === 'pool' && renderPoolParty()}
+      {partyType === 'script' && renderScriptParty()}
+    </div>
+  );
+};

src/components/ValidationPanel.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { AlertTriangle, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import type { NPCConfiguration, DialogueConfiguration } from '../types/npc';
+import { validateNPCConfiguration, validateDialogueConfiguration, getValidationSummary } from '../utils/validation';
+import type { ValidationError } from '../utils/validation';
+
+interface ValidationPanelProps {
+  npcConfig: NPCConfiguration;
+  dialogueConfig: DialogueConfiguration | null;
+}
+
+export const ValidationPanel: React.FC<ValidationPanelProps> = ({ npcConfig, dialogueConfig }) => {
+  const npcErrors = validateNPCConfiguration(npcConfig);
+  const dialogueErrors = dialogueConfig ? validateDialogueConfiguration(dialogueConfig) : [];
+  
+  const allErrors = [...npcErrors, ...dialogueErrors];
+  const summary = getValidationSummary(allErrors);
+
+  const ErrorItem: React.FC<{ error: ValidationError }> = ({ error }) => (
+    <div className={`flex items-start space-x-2 p-2 rounded ${
+      error.severity === 'error' ? 'bg-red-50 text-red-800' : 'bg-yellow-50 text-yellow-800'
+    }`}>
+      {error.severity === 'error' ? (
+        <XCircle className="h-4 w-4 mt-0.5 text-red-600 flex-shrink-0" />
+      ) : (
+        <AlertTriangle className="h-4 w-4 mt-0.5 text-yellow-600 flex-shrink-0" />
+      )}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium">{error.field}</p>
+        <p className="text-xs">{error.message}</p>
+      </div>
+    </div>
+  );
+
+  if (allErrors.length === 0) {
+    return (
+      <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+        <div className="flex items-center">
+          <CheckCircle className="h-5 w-5 text-green-600" />
+          <div className="ml-3">
+            <h3 className="text-sm font-medium text-green-800">Configuration Valid</h3>
+            <p className="text-sm text-green-700">No validation errors found. Your NPC configuration is ready to export!</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Summary */}
+      <div className={`border rounded-lg p-4 ${
+        summary.hasErrors ? 'bg-red-50 border-red-200' : 'bg-yellow-50 border-yellow-200'
+      }`}>
+        <div className="flex items-center">
+          {summary.hasErrors ? (
+            <XCircle className="h-5 w-5 text-red-600" />
+          ) : (
+            <AlertCircle className="h-5 w-5 text-yellow-600" />
+          )}
+          <div className="ml-3">
+            <h3 className={`text-sm font-medium ${
+              summary.hasErrors ? 'text-red-800' : 'text-yellow-800'
+            }`}>
+              Validation {summary.hasErrors ? 'Errors' : 'Warnings'} Found
+            </h3>
+            <p className={`text-sm ${
+              summary.hasErrors ? 'text-red-700' : 'text-yellow-700'
+            }`}>
+              {summary.errorCount > 0 && `${summary.errorCount} error${summary.errorCount > 1 ? 's' : ''}`}
+              {summary.errorCount > 0 && summary.warningCount > 0 && ', '}
+              {summary.warningCount > 0 && `${summary.warningCount} warning${summary.warningCount > 1 ? 's' : ''}`}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Errors List */}
+      <div className="space-y-2">
+        {summary.errorCount > 0 && (
+          <div>
+            <h4 className="text-sm font-medium text-red-900 mb-2 flex items-center">
+              <XCircle className="h-4 w-4 mr-1" />
+              Errors ({summary.errorCount})
+            </h4>
+            <div className="space-y-1">
+              {allErrors
+                .filter(error => error.severity === 'error')
+                .map((error, index) => (
+                  <ErrorItem key={`error-${index}`} error={error} />
+                ))}
+            </div>
+          </div>
+        )}
+
+        {summary.warningCount > 0 && (
+          <div>
+            <h4 className="text-sm font-medium text-yellow-900 mb-2 flex items-center">
+              <AlertTriangle className="h-4 w-4 mr-1" />
+              Warnings ({summary.warningCount})
+            </h4>
+            <div className="space-y-1">
+              {allErrors
+                .filter(error => error.severity === 'warning')
+                .map((error, index) => (
+                  <ErrorItem key={`warning-${index}`} error={error} />
+                ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Export Status */}
+      <div className={`border-t pt-4 ${
+        summary.hasErrors ? 'text-red-700' : 'text-yellow-700'
+      }`}>
+        <p className="text-sm">
+          {summary.hasErrors 
+            ? '⚠️ Fix all errors before exporting your configuration.'
+            : '✅ Configuration has warnings but can still be exported.'
+          }
+        </p>
+      </div>
+    </div>
+  );
+};