From 596539887a022f663c098d92dfda28414adc8068 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 10 Jul 2026 10:51:56 -0400
Subject: [PATCH] Wizard Floor Map step: upload light/dark blueprints (not just
 dimensions)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/SetupWizard.vue | 35 +++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/SetupWizard.vue b/frontend/src/views/SetupWizard.vue
index d6b3b9a..2401e80 100644
--- a/frontend/src/views/SetupWizard.vue
+++ b/frontend/src/views/SetupWizard.vue
@@ -90,7 +90,17 @@
         <!-- Floor map -->
         <div v-else-if="current.key === 'map'">
           <h2>Floor map</h2>
-          <p class="hint">Set the blueprint dimensions now; upload the image any time in Settings &gt; Floor Map.</p>
+          <p class="hint">Upload your facility blueprint (light and dark), and set its native pixel size.</p>
+          <div class="form-group">
+            <label>Blueprint image (light theme)</label>
+            <input type="file" accept="image/*" @change="uploadBlueprint('light', $event)" :disabled="mapUploading" />
+            <img v-if="blueprintLight" :src="blueprintLight" class="wizard-map-thumb" alt="light blueprint" />
+          </div>
+          <div class="form-group">
+            <label>Blueprint image (dark theme)</label>
+            <input type="file" accept="image/*" @change="uploadBlueprint('dark', $event)" :disabled="mapUploading" />
+            <img v-if="blueprintDark" :src="blueprintDark" class="wizard-map-thumb dark" alt="dark blueprint" />
+          </div>
           <div class="form-row">
             <div class="form-group">
               <label>Map width (px)</label>
@@ -167,6 +177,27 @@ const pluginModes = ref({})    // mode_setting key -> 'selfhosted' | 'external'
 const saving = ref(false)
 const seeding = ref(false)
 const seedResult = ref('')
+const mapUploading = ref(false)
+const blueprintLight = ref('')
+const blueprintDark = ref('')
+
+async function uploadBlueprint(theme, event) {
+  const file = event.target.files[0]
+  if (!file) return
+  mapUploading.value = true
+  try {
+    const { data } = await settingsApi.uploadMapBlueprint(theme, file)
+    const url = data?.data?.value
+    if (theme === 'light') blueprintLight.value = url
+    else blueprintDark.value = url
+    toast.success('Blueprint uploaded')
+  } catch (err) {
+    toast.error(apiError(err, 'Upload failed'))
+  } finally {
+    mapUploading.value = false
+    event.target.value = ''
+  }
+}
 
 function modeOf(plugin) {
   const key = plugin.provisioning_note?.mode_setting
@@ -362,6 +393,8 @@ async function finish() {
 .secret-tag { margin-left: 0.5rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warning); border: 1px solid var(--warning); border-radius: 4px; padding: 0 0.3rem; }
 .env-block { margin-top: 1rem; }
 .env-pre { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; overflow-x: auto; font-size: 0.82rem; margin: 0.5rem 0; }
+.wizard-map-thumb { display: block; margin-top: 0.5rem; max-height: 90px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
+.wizard-map-thumb.dark { background: #222; }
 .wizard-foot { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.75rem; border-top: 1px solid var(--border); }
 .foot-right { display: flex; align-items: center; gap: 0.75rem; }
 .btn-text { background: none; border: none; color: var(--text-light); text-decoration: none; }