Add scene exit configuration options in App.tsx

src/app/App.tsx

@@ -10512,6 +10512,153 @@ export function App({ store, initialStatusMessage }: AppProps) {
                       )}
                     </>
                   ) : null}
+
+                  {selectedSceneExit !== null ? (
+                    <>
+                      <div className="form-section">
+                        <div className="label">Transition</div>
+                        <div className="vector-inputs vector-inputs--two">
+                          <label className="form-field">
+                            <span className="label">Range</span>
+                            <input
+                              data-testid="scene-exit-radius"
+                              className="text-input"
+                              type="number"
+                              min="0.1"
+                              step="0.1"
+                              value={sceneExitRadiusDraft}
+                              onChange={(event) =>
+                                setSceneExitRadiusDraft(
+                                  event.currentTarget.value
+                                )
+                              }
+                              onBlur={() => applySceneExitChange()}
+                              onKeyDown={(event) =>
+                                handleDraftVectorKeyDown(
+                                  event,
+                                  applySceneExitChange
+                                )
+                              }
+                              onKeyUp={(event) =>
+                                handleNumberInputKeyUp(
+                                  event,
+                                  applySceneExitChange
+                                )
+                              }
+                              onPointerUp={(event) =>
+                                handleNumberInputPointerUp(
+                                  event,
+                                  applySceneExitChange
+                                )
+                              }
+                            />
+                          </label>
+                          <label className="form-field">
+                            <span className="label">Enabled</span>
+                            <input
+                              data-testid="scene-exit-enabled"
+                              type="checkbox"
+                              checked={sceneExitEnabledDraft}
+                              onChange={(event) => {
+                                const nextEnabled = event.currentTarget.checked;
+                                setSceneExitEnabledDraft(nextEnabled);
+                                scheduleDraftCommit(() =>
+                                  applySceneExitChange({
+                                    enabled: nextEnabled
+                                  })
+                                );
+                              }}
+                            />
+                          </label>
+                        </div>
+                      </div>
+
+                      <div className="form-section">
+                        <div className="label">Prompt</div>
+                        <label className="form-field">
+                          <span className="label">Text</span>
+                          <input
+                            data-testid="scene-exit-prompt"
+                            className="text-input"
+                            type="text"
+                            value={sceneExitPromptDraft}
+                            onChange={(event) =>
+                              setSceneExitPromptDraft(
+                                event.currentTarget.value
+                              )
+                            }
+                            onBlur={() => applySceneExitChange()}
+                            onKeyDown={(event) => {
+                              if (event.key === "Enter") {
+                                applySceneExitChange();
+                              }
+                            }}
+                          />
+                        </label>
+                      </div>
+
+                      <div className="form-section">
+                        <div className="label">Destination</div>
+                        <label className="form-field">
+                          <span className="label">Scene</span>
+                          <select
+                            data-testid="scene-exit-target-scene"
+                            className="select-input"
+                            value={sceneExitTargetSceneIdDraft}
+                            onChange={(event) => {
+                              const nextSceneId = event.currentTarget.value;
+                              const nextEntryId =
+                                sceneEntryOptionsBySceneId[nextSceneId]?.[0]
+                                  ?.entity.id ?? "";
+                              setSceneExitTargetSceneIdDraft(nextSceneId);
+                              setSceneExitTargetEntryIdDraft(nextEntryId);
+                              scheduleDraftCommit(() =>
+                                applySceneExitChange({
+                                  targetSceneId: nextSceneId,
+                                  targetEntryEntityId: nextEntryId
+                                })
+                              );
+                            }}
+                          >
+                            {sceneTargetOptions.map((scene) => (
+                              <option key={scene.id} value={scene.id}>
+                                {scene.name}
+                              </option>
+                            ))}
+                          </select>
+                        </label>
+                        <label className="form-field">
+                          <span className="label">Entry</span>
+                          <select
+                            data-testid="scene-exit-target-entry"
+                            className="select-input"
+                            value={sceneExitTargetEntryIdDraft}
+                            onChange={(event) => {
+                              const nextEntryId = event.currentTarget.value;
+                              setSceneExitTargetEntryIdDraft(nextEntryId);
+                              scheduleDraftCommit(() =>
+                                applySceneExitChange({
+                                  targetEntryEntityId: nextEntryId
+                                })
+                              );
+                            }}
+                          >
+                            {selectedSceneExitTargetEntryOptions.map(
+                              ({ entity, label }) => (
+                                <option key={entity.id} value={entity.id}>
+                                  {label}
+                                </option>
+                              )
+                            )}
+                          </select>
+                        </label>
+                        <div className="material-summary">
+                          Scene Exits load the target scene through the runner
+                          overlay and spawn at the selected Scene Entry.
+                        </div>
+                      </div>
+                    </>
+                  ) : null}
                 </>
               ) : selectedBrush === null ? (
                 <div className="outliner-empty">