From 9e4891f667e0e03672bd19ee8259e9120836e749 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Sun, 12 Apr 2026 14:34:04 +0200
Subject: [PATCH] Add Night Background Image feature in App.tsx

---
 src/app/App.tsx | 88 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 205cddc0..557efb9a 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -9667,6 +9667,94 @@ export function App({ store, initialStatusMessage }: AppProps) {
                       />
                     </label>
                   </div>
+                  <div className="form-section">
+                    <div className="label">Night Background Image</div>
+                    <label className="form-field">
+                      <span className="label">Image</span>
+                      <select
+                        className="text-input"
+                        value={
+                          editorState.projectDocument.time.nightBackground
+                            .assetId ?? ""
+                        }
+                        onChange={(event) =>
+                          applyProjectTimeNightBackgroundAssetId(
+                            event.currentTarget.value.trim().length === 0
+                              ? null
+                              : event.currentTarget.value
+                          )
+                        }
+                      >
+                        <option value="">None</option>
+                        {imageAssetList.map((asset) => (
+                          <option key={asset.id} value={asset.id}>
+                            {asset.sourceName}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                    {editorState.projectDocument.time.nightBackground.assetId ===
+                    null ? (
+                      imageAssetList.length === 0 ? (
+                        <div className="material-summary">
+                          Import an image asset to author a dedicated night sky image.
+                        </div>
+                      ) : (
+                        <div className="material-summary">
+                          Night falls back to the blended dawn/dusk/night sky colors until an image is selected.
+                        </div>
+                      )
+                    ) : (
+                      <>
+                        <label className="form-field">
+                          <span className="label">Environment Intensity</span>
+                          <input
+                            className="text-input"
+                            type="number"
+                            min="0"
+                            step="0.1"
+                            value={
+                              projectTimeNightBackgroundEnvironmentIntensityDraft
+                            }
+                            onChange={(event) =>
+                              setProjectTimeNightBackgroundEnvironmentIntensityDraft(
+                                event.currentTarget.value
+                              )
+                            }
+                            onBlur={
+                              applyProjectTimeNightBackgroundEnvironmentIntensity
+                            }
+                            onKeyDown={(event) =>
+                              handleDraftVectorKeyDown(
+                                event,
+                                applyProjectTimeNightBackgroundEnvironmentIntensity
+                              )
+                            }
+                            onKeyUp={(event) =>
+                              handleNumberInputKeyUp(
+                                event,
+                                applyProjectTimeNightBackgroundEnvironmentIntensity
+                              )
+                            }
+                            onPointerUp={(event) =>
+                              handleNumberInputPointerUp(
+                                event,
+                                applyProjectTimeNightBackgroundEnvironmentIntensity
+                              )
+                            }
+                          />
+                        </label>
+                        <div className="material-summary">
+                          {editorState.document.assets[
+                            editorState.projectDocument.time.nightBackground
+                              .assetId
+                          ]?.sourceName ??
+                            editorState.projectDocument.time.nightBackground
+                              .assetId}
+                        </div>
+                      </>
+                    )}
+                  </div>
                   <div className="material-summary">
                     Dawn, dusk, and night profiles blend over each scene's authored World settings whenever the scene enables global time influence.
                   </div>