From b11afbe9694859db71ed7250fbc3c1a2fa18c90a Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 22 Apr 2026 12:32:54 +0200
Subject: [PATCH] auto-git:  [change] src/app/App.tsx

---
 src/app/App.tsx | 456 +++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 376 insertions(+), 80 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 7ff91fc3..a8d7d5e1 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -14214,47 +14214,195 @@ export function App({ store, initialStatusMessage }: AppProps) {
                       <div className="material-summary">
                         Blends over the authored day environment around sunrise.
                       </div>
+                      <div className="stat-card">
+                        <div className="label">Background</div>
+                        <div className="value">
+                          {formatWorldBackgroundLabel(
+                            editorState.document.world.timeOfDay.dawn.background
+                          )}
+                        </div>
+                        <div
+                          className="world-background-preview"
+                          style={createWorldBackgroundStyle(
+                            editorState.document.world.timeOfDay.dawn.background,
+                            getWorldBackgroundImagePreviewUrl(
+                              editorState.document.world.timeOfDay.dawn.background,
+                              loadedImageAssets
+                            )
+                          )}
+                        />
+                        <div className="material-summary">
+                          {describeWorldBackground(
+                            editorState.document.world.timeOfDay.dawn.background,
+                            editorState.document.assets,
+                            {
+                              emptyImageLabel:
+                                "Automatic fallback from available day/night images"
+                            }
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="form-section">
+                        <div className="label">Background Mode</div>
+                        <div className="inline-actions">
+                          <button
+                            className={`toolbar__button ${editorState.document.world.timeOfDay.dawn.background.mode === "solid" ? "toolbar__button--active" : ""}`}
+                            type="button"
+                            onClick={() =>
+                              applyWorldTimePhaseBackgroundMode("dawn", "solid")
+                            }
+                          >
+                            Solid
+                          </button>
+                          <button
+                            className={`toolbar__button ${
+                              editorState.document.world.timeOfDay.dawn
+                                .background.mode === "verticalGradient"
+                                ? "toolbar__button--active"
+                                : ""
+                            }`}
+                            type="button"
+                            onClick={() =>
+                              applyWorldTimePhaseBackgroundMode(
+                                "dawn",
+                                "verticalGradient"
+                              )
+                            }
+                          >
+                            Gradient
+                          </button>
+                          <button
+                            className={`toolbar__button ${editorState.document.world.timeOfDay.dawn.background.mode === "image" ? "toolbar__button--active" : ""}`}
+                            type="button"
+                            onClick={() =>
+                              applyWorldTimePhaseBackgroundMode("dawn", "image")
+                            }
+                          >
+                            Image
+                          </button>
+                        </div>
+                      </div>
+
+                      {editorState.document.world.timeOfDay.dawn.background
+                        .mode === "image" ? (
+                        <div className="form-section">
+                          <div className="label">Dawn Image</div>
+                          <label className="form-field">
+                            <span className="label">Image</span>
+                            <select
+                              className="text-input"
+                              value={
+                                editorState.document.world.timeOfDay.dawn
+                                  .background.assetId
+                              }
+                              onChange={(event) =>
+                                applyWorldTimePhaseBackgroundMode(
+                                  "dawn",
+                                  "image",
+                                  event.currentTarget.value
+                                )
+                              }
+                            >
+                              <option value="">
+                                Auto (day/night fallback)
+                              </option>
+                              {imageAssetList.map((asset) => (
+                                <option key={asset.id} value={asset.id}>
+                                  {asset.sourceName}
+                                </option>
+                              ))}
+                            </select>
+                          </label>
+                          <label className="form-field">
+                            <span className="label">Intensity</span>
+                            <input
+                              className="text-input"
+                              type="number"
+                              min="0"
+                              step="0.1"
+                              value={
+                                worldDawnBackgroundEnvironmentIntensityDraft
+                              }
+                              onChange={(event) =>
+                                setWorldDawnBackgroundEnvironmentIntensityDraft(
+                                  event.currentTarget.value
+                                )
+                              }
+                              onBlur={() =>
+                                applyWorldTimePhaseBackgroundEnvironmentIntensity(
+                                  "dawn",
+                                  worldDawnBackgroundEnvironmentIntensityDraft
+                                )
+                              }
+                            />
+                          </label>
+                        </div>
+                      ) : (
+                        <div className="form-section">
+                          <div className="label">Background Colors</div>
+                          {editorState.document.world.timeOfDay.dawn.background
+                            .mode === "solid" ? (
+                            <label className="form-field">
+                              <span className="label">Color</span>
+                              <input
+                                className="color-input"
+                                type="color"
+                                value={
+                                  editorState.document.world.timeOfDay.dawn
+                                    .background.colorHex
+                                }
+                                onChange={(event) =>
+                                  applyWorldTimePhaseBackgroundColor(
+                                    "dawn",
+                                    event.currentTarget.value
+                                  )
+                                }
+                              />
+                            </label>
+                          ) : (
+                            <div className="vector-inputs vector-inputs--two">
+                              <label className="form-field">
+                                <span className="label">Top</span>
+                                <input
+                                  className="color-input"
+                                  type="color"
+                                  value={
+                                    editorState.document.world.timeOfDay.dawn
+                                      .background.topColorHex
+                                  }
+                                  onChange={(event) =>
+                                    applyWorldTimePhaseGradientColor(
+                                      "dawn",
+                                      "top",
+                                      event.currentTarget.value
+                                    )
+                                  }
+                                />
+                              </label>
+                              <label className="form-field">
+                                <span className="label">Bottom</span>
+                                <input
+                                  className="color-input"
+                                  type="color"
+                                  value={
+                                    editorState.document.world.timeOfDay.dawn
+                                      .background.bottomColorHex
+                                  }
+                                  onChange={(event) =>
+                                    applyWorldTimePhaseGradientColor(
+                                      "dawn",
+                                      "bottom",
+                                      event.currentTarget.value
+                                    )
+                                  }
+                                />
+                              </label>
+                            </div>
+                          )}
+                        </div>
+                      )}
                       <div className="vector-inputs">
-                        <label className="form-field">
-                          <span className="label">Sky Top</span>
-                          <input
-                            className="color-input"
-                            type="color"
-                            value={
-                              editorState.document.world.timeOfDay.dawn
-                                .skyTopColorHex
-                            }
-                            onChange={(event) =>
-                              applyWorldTimePhaseColor(
-                                "dawn",
-                                "skyTopColorHex",
-                                event.currentTarget.value,
-                                "Set dawn sky top color",
-                                "Updated the dawn sky top color."
-                              )
-                            }
-                          />
-                        </label>
-                        <label className="form-field">
-                          <span className="label">Sky Bottom</span>
-                          <input
-                            className="color-input"
-                            type="color"
-                            value={
-                              editorState.document.world.timeOfDay.dawn
-                                .skyBottomColorHex
-                            }
-                            onChange={(event) =>
-                              applyWorldTimePhaseColor(
-                                "dawn",
-                                "skyBottomColorHex",
-                                event.currentTarget.value,
-                                "Set dawn sky bottom color",
-                                "Updated the dawn sky bottom color."
-                              )
-                            }
-                          />
-                        </label>
                         <label className="form-field">
                           <span className="label">Ambient Color</span>
                           <input
@@ -14352,47 +14500,195 @@ export function App({ store, initialStatusMessage }: AppProps) {
                       <div className="material-summary">
                         Blends over the authored day environment around sunset.
                       </div>
+                      <div className="stat-card">
+                        <div className="label">Background</div>
+                        <div className="value">
+                          {formatWorldBackgroundLabel(
+                            editorState.document.world.timeOfDay.dusk.background
+                          )}
+                        </div>
+                        <div
+                          className="world-background-preview"
+                          style={createWorldBackgroundStyle(
+                            editorState.document.world.timeOfDay.dusk.background,
+                            getWorldBackgroundImagePreviewUrl(
+                              editorState.document.world.timeOfDay.dusk.background,
+                              loadedImageAssets
+                            )
+                          )}
+                        />
+                        <div className="material-summary">
+                          {describeWorldBackground(
+                            editorState.document.world.timeOfDay.dusk.background,
+                            editorState.document.assets,
+                            {
+                              emptyImageLabel:
+                                "Automatic fallback from available day/night images"
+                            }
+                          )}
+                        </div>
+                      </div>
+
+                      <div className="form-section">
+                        <div className="label">Background Mode</div>
+                        <div className="inline-actions">
+                          <button
+                            className={`toolbar__button ${editorState.document.world.timeOfDay.dusk.background.mode === "solid" ? "toolbar__button--active" : ""}`}
+                            type="button"
+                            onClick={() =>
+                              applyWorldTimePhaseBackgroundMode("dusk", "solid")
+                            }
+                          >
+                            Solid
+                          </button>
+                          <button
+                            className={`toolbar__button ${
+                              editorState.document.world.timeOfDay.dusk
+                                .background.mode === "verticalGradient"
+                                ? "toolbar__button--active"
+                                : ""
+                            }`}
+                            type="button"
+                            onClick={() =>
+                              applyWorldTimePhaseBackgroundMode(
+                                "dusk",
+                                "verticalGradient"
+                              )
+                            }
+                          >
+                            Gradient
+                          </button>
+                          <button
+                            className={`toolbar__button ${editorState.document.world.timeOfDay.dusk.background.mode === "image" ? "toolbar__button--active" : ""}`}
+                            type="button"
+                            onClick={() =>
+                              applyWorldTimePhaseBackgroundMode("dusk", "image")
+                            }
+                          >
+                            Image
+                          </button>
+                        </div>
+                      </div>
+
+                      {editorState.document.world.timeOfDay.dusk.background
+                        .mode === "image" ? (
+                        <div className="form-section">
+                          <div className="label">Dusk Image</div>
+                          <label className="form-field">
+                            <span className="label">Image</span>
+                            <select
+                              className="text-input"
+                              value={
+                                editorState.document.world.timeOfDay.dusk
+                                  .background.assetId
+                              }
+                              onChange={(event) =>
+                                applyWorldTimePhaseBackgroundMode(
+                                  "dusk",
+                                  "image",
+                                  event.currentTarget.value
+                                )
+                              }
+                            >
+                              <option value="">
+                                Auto (day/night fallback)
+                              </option>
+                              {imageAssetList.map((asset) => (
+                                <option key={asset.id} value={asset.id}>
+                                  {asset.sourceName}
+                                </option>
+                              ))}
+                            </select>
+                          </label>
+                          <label className="form-field">
+                            <span className="label">Intensity</span>
+                            <input
+                              className="text-input"
+                              type="number"
+                              min="0"
+                              step="0.1"
+                              value={
+                                worldDuskBackgroundEnvironmentIntensityDraft
+                              }
+                              onChange={(event) =>
+                                setWorldDuskBackgroundEnvironmentIntensityDraft(
+                                  event.currentTarget.value
+                                )
+                              }
+                              onBlur={() =>
+                                applyWorldTimePhaseBackgroundEnvironmentIntensity(
+                                  "dusk",
+                                  worldDuskBackgroundEnvironmentIntensityDraft
+                                )
+                              }
+                            />
+                          </label>
+                        </div>
+                      ) : (
+                        <div className="form-section">
+                          <div className="label">Background Colors</div>
+                          {editorState.document.world.timeOfDay.dusk.background
+                            .mode === "solid" ? (
+                            <label className="form-field">
+                              <span className="label">Color</span>
+                              <input
+                                className="color-input"
+                                type="color"
+                                value={
+                                  editorState.document.world.timeOfDay.dusk
+                                    .background.colorHex
+                                }
+                                onChange={(event) =>
+                                  applyWorldTimePhaseBackgroundColor(
+                                    "dusk",
+                                    event.currentTarget.value
+                                  )
+                                }
+                              />
+                            </label>
+                          ) : (
+                            <div className="vector-inputs vector-inputs--two">
+                              <label className="form-field">
+                                <span className="label">Top</span>
+                                <input
+                                  className="color-input"
+                                  type="color"
+                                  value={
+                                    editorState.document.world.timeOfDay.dusk
+                                      .background.topColorHex
+                                  }
+                                  onChange={(event) =>
+                                    applyWorldTimePhaseGradientColor(
+                                      "dusk",
+                                      "top",
+                                      event.currentTarget.value
+                                    )
+                                  }
+                                />
+                              </label>
+                              <label className="form-field">
+                                <span className="label">Bottom</span>
+                                <input
+                                  className="color-input"
+                                  type="color"
+                                  value={
+                                    editorState.document.world.timeOfDay.dusk
+                                      .background.bottomColorHex
+                                  }
+                                  onChange={(event) =>
+                                    applyWorldTimePhaseGradientColor(
+                                      "dusk",
+                                      "bottom",
+                                      event.currentTarget.value
+                                    )
+                                  }
+                                />
+                              </label>
+                            </div>
+                          )}
+                        </div>
+                      )}
                       <div className="vector-inputs">
-                        <label className="form-field">
-                          <span className="label">Sky Top</span>
-                          <input
-                            className="color-input"
-                            type="color"
-                            value={
-                              editorState.document.world.timeOfDay.dusk
-                                .skyTopColorHex
-                            }
-                            onChange={(event) =>
-                              applyWorldTimePhaseColor(
-                                "dusk",
-                                "skyTopColorHex",
-                                event.currentTarget.value,
-                                "Set dusk sky top color",
-                                "Updated the dusk sky top color."
-                              )
-                            }
-                          />
-                        </label>
-                        <label className="form-field">
-                          <span className="label">Sky Bottom</span>
-                          <input
-                            className="color-input"
-                            type="color"
-                            value={
-                              editorState.document.world.timeOfDay.dusk
-                                .skyBottomColorHex
-                            }
-                            onChange={(event) =>
-                              applyWorldTimePhaseColor(
-                                "dusk",
-                                "skyBottomColorHex",
-                                event.currentTarget.value,
-                                "Set dusk sky bottom color",
-                                "Updated the dusk sky bottom color."
-                              )
-                            }
-                          />
-                        </label>
                         <label className="form-field">
                           <span className="label">Ambient Color</span>
                           <input