From e1b9f2e696808dbad7c5b0fa128dde63baf136b1 Mon Sep 17 00:00:00 2001
From: Christian Semmler <mail@csemmler.com>
Date: Sat, 14 Feb 2026 08:56:39 -0800
Subject: [PATCH] Extract shared editor CSS and fix vehicle nav spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move duplicated preview, spinner, navigation, and side-button styles
from VehicleEditor, ActorEditor, and PlantEditor into a shared
editor-common.css. Standardize class names (nav-index, nav-name,
side-btn) and fix VehicleEditor part-info min-width (100px → 150px)
to match the other editors.
---
 src/lib/save-editor/ActorEditor.svelte   | 131 +----------------------
 src/lib/save-editor/PlantEditor.svelte   |  97 +----------------
 src/lib/save-editor/VehicleEditor.svelte | 131 +----------------------
 src/lib/save-editor/editor-common.css    | 129 ++++++++++++++++++++++
 4 files changed, 140 insertions(+), 348 deletions(-)
 create mode 100644 src/lib/save-editor/editor-common.css

diff --git a/src/lib/save-editor/ActorEditor.svelte b/src/lib/save-editor/ActorEditor.svelte
index a943fe6..b98f1d9 100644
--- a/src/lib/save-editor/ActorEditor.svelte
+++ b/src/lib/save-editor/ActorEditor.svelte
@@ -8,6 +8,7 @@
     import NavButton from '../NavButton.svelte';
     import ResetButton from '../ResetButton.svelte';
     import EditorTooltip from '../EditorTooltip.svelte';
+    import './editor-common.css';
 
     export let slot;
     export let onUpdate = () => {};
@@ -328,15 +329,15 @@
         <div class="part-nav">
             <NavButton direction="left" onclick={prevActor} />
             <div class="part-info">
-                <span class="actor-index">{actorIndex + 1} / {ActorInfoInit.length}</span>
-                <span class="actor-name">{actorName}</span>
+                <span class="nav-index">{actorIndex + 1} / {ActorInfoInit.length}</span>
+                <span class="nav-name">{actorName}</span>
             </div>
             <NavButton direction="right" onclick={nextActor} />
         </div>
         {#if vehicleInfo}
             <button
                 type="button"
-                class="vehicle-toggle-btn"
+                class="side-btn"
                 class:active={showVehicle}
                 onclick={() => { showVehicle = !showVehicle; }}
                 title={showVehicle ? 'Show without vehicle' : `Show with ${vehicleName}`}
@@ -355,127 +356,3 @@
     </div>
 </EditorTooltip>
 
-<style>
-    .preview-container {
-        position: relative;
-    }
-
-    canvas {
-        display: block;
-        border-radius: 8px;
-        cursor: grab;
-        max-width: 100%;
-    }
-
-    canvas:active {
-        cursor: grabbing;
-    }
-
-    canvas:focus {
-        outline: none;
-    }
-
-    canvas.hidden {
-        visibility: hidden;
-    }
-
-    .preview-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--color-bg-input);
-        border-radius: 8px;
-    }
-
-    .preview-overlay.error {
-        color: var(--color-error, #e74c3c);
-        font-size: 0.75em;
-        padding: 12px;
-        text-align: center;
-    }
-
-    .spinner {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        background:
-            radial-gradient(transparent 55%, transparent 56%),
-            conic-gradient(var(--color-primary, #FFD700) 0deg 90deg, var(--color-border-dark, #333) 90deg 360deg);
-        animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-
-    .part-nav-wrapper {
-        position: relative;
-        margin-top: 10px;
-    }
-
-    .part-nav {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-    }
-
-    .part-info {
-        text-align: center;
-        min-width: 150px;
-    }
-
-    .actor-index {
-        display: block;
-        font-size: 0.7em;
-        color: var(--color-text-muted);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .actor-name {
-        display: block;
-        font-size: 0.9em;
-        color: var(--color-text-light);
-    }
-
-    .vehicle-toggle-btn {
-        position: absolute;
-        right: -36px;
-        top: 50%;
-        transform: translateY(-50%);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 28px;
-        height: 28px;
-        padding: 0;
-        background: var(--color-bg-input);
-        border: 1px solid var(--color-border-medium);
-        border-radius: 6px;
-        color: var(--color-text-light);
-        cursor: pointer;
-        transition: all 0.2s ease;
-    }
-
-    .vehicle-toggle-btn.active {
-        border-color: var(--color-primary);
-        color: var(--color-primary);
-    }
-
-    @media (hover: hover) {
-        .vehicle-toggle-btn:hover {
-            border-color: var(--color-primary);
-            color: var(--color-primary);
-        }
-    }
-
-    .reset-container {
-        height: 1.6em;
-    }
-</style>
diff --git a/src/lib/save-editor/PlantEditor.svelte b/src/lib/save-editor/PlantEditor.svelte
index ed57acf..099f151 100644
--- a/src/lib/save-editor/PlantEditor.svelte
+++ b/src/lib/save-editor/PlantEditor.svelte
@@ -12,6 +12,7 @@
     import NavButton from '../NavButton.svelte';
     import ResetButton from '../ResetButton.svelte';
     import EditorTooltip from '../EditorTooltip.svelte';
+    import './editor-common.css';
 
     export let slot;
     export let onUpdate = () => {};
@@ -272,8 +273,8 @@
         <div class="part-nav">
             <NavButton direction="left" onclick={prevPlant} />
             <div class="part-info">
-                <span class="plant-index">{plantIndex + 1} / {PLANT_COUNT}</span>
-                <span class="plant-name">{colorName} {variantName}</span>
+                <span class="nav-index">{plantIndex + 1} / {PLANT_COUNT}</span>
+                <span class="nav-name">{colorName} {variantName}</span>
             </div>
             <NavButton direction="right" onclick={nextPlant} />
         </div>
@@ -286,95 +287,3 @@
     </div>
 </EditorTooltip>
 
-<style>
-    .preview-container {
-        position: relative;
-    }
-
-    canvas {
-        display: block;
-        border-radius: 8px;
-        cursor: grab;
-        max-width: 100%;
-    }
-
-    canvas:active {
-        cursor: grabbing;
-    }
-
-    canvas:focus {
-        outline: none;
-    }
-
-    canvas.hidden {
-        visibility: hidden;
-    }
-
-    .preview-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--color-bg-input);
-        border-radius: 8px;
-    }
-
-    .preview-overlay.error {
-        color: var(--color-error, #e74c3c);
-        font-size: 0.75em;
-        padding: 12px;
-        text-align: center;
-    }
-
-    .spinner {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        background:
-            radial-gradient(transparent 55%, transparent 56%),
-            conic-gradient(var(--color-primary, #FFD700) 0deg 90deg, var(--color-border-dark, #333) 90deg 360deg);
-        animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-
-    .part-nav-wrapper {
-        margin-top: 10px;
-    }
-
-    .part-nav {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-    }
-
-    .part-info {
-        text-align: center;
-        min-width: 150px;
-    }
-
-    .plant-index {
-        display: block;
-        font-size: 0.7em;
-        color: var(--color-text-muted);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .plant-name {
-        display: block;
-        font-size: 0.9em;
-        color: var(--color-text-light);
-    }
-
-    .reset-container {
-        height: 1.6em;
-    }
-</style>
diff --git a/src/lib/save-editor/VehicleEditor.svelte b/src/lib/save-editor/VehicleEditor.svelte
index 2c7ede1..bc2f2ac 100644
--- a/src/lib/save-editor/VehicleEditor.svelte
+++ b/src/lib/save-editor/VehicleEditor.svelte
@@ -18,6 +18,7 @@
     import ResetButton from '../ResetButton.svelte';
     import EditorTooltip from '../EditorTooltip.svelte';
     import TexturePickerModal from './TexturePickerModal.svelte';
+    import './editor-common.css';
 
     export let slot;
     export let onUpdate = () => {};
@@ -353,15 +354,15 @@
         <div class="part-nav">
             <NavButton direction="left" onclick={prevPart} />
             <div class="part-info">
-                <span class="vehicle-name">{VehicleNames[vehicle]}</span>
-                <span class="part-name">{currentPart?.label || 'Unknown'}</span>
+                <span class="nav-index">{VehicleNames[vehicle]}</span>
+                <span class="nav-name">{currentPart?.label || 'Unknown'}</span>
             </div>
             <NavButton direction="right" onclick={nextPart} />
         </div>
         {#if textureInfo}
             <button
                 type="button"
-                class="texture-btn"
+                class="side-btn"
                 class:disabled={!canEditTexture}
                 onclick={openTexturePicker}
                 disabled={!canEditTexture}
@@ -391,127 +392,3 @@
     />
 {/if}
 
-<style>
-    .preview-container {
-        position: relative;
-    }
-
-    canvas {
-        display: block;
-        border-radius: 8px;
-        cursor: grab;
-        max-width: 100%;
-    }
-
-    canvas:active {
-        cursor: grabbing;
-    }
-
-    canvas:focus {
-        outline: none;
-    }
-
-    canvas.hidden {
-        visibility: hidden;
-    }
-
-    .preview-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--color-bg-input);
-        border-radius: 8px;
-    }
-
-    .preview-overlay.error {
-        color: var(--color-error, #e74c3c);
-        font-size: 0.75em;
-        padding: 12px;
-        text-align: center;
-    }
-
-    .spinner {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        background:
-            radial-gradient(transparent 55%, transparent 56%),
-            conic-gradient(var(--color-primary, #FFD700) 0deg 90deg, var(--color-border-dark, #333) 90deg 360deg);
-        animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-
-    .part-nav-wrapper {
-        position: relative;
-        margin-top: 10px;
-    }
-
-    .part-nav {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-    }
-
-    .part-info {
-        text-align: center;
-        min-width: 100px;
-    }
-
-    .vehicle-name {
-        display: block;
-        font-size: 0.7em;
-        color: var(--color-text-muted);
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .part-name {
-        display: block;
-        font-size: 0.9em;
-        color: var(--color-text-light);
-    }
-
-    .reset-container {
-        height: 1.6em;
-    }
-
-    .texture-btn {
-        position: absolute;
-        right: -36px;
-        top: 50%;
-        transform: translateY(-50%);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 28px;
-        height: 28px;
-        padding: 0;
-        background: var(--color-bg-input);
-        border: 1px solid var(--color-border-medium);
-        border-radius: 6px;
-        color: var(--color-text-light);
-        cursor: pointer;
-        transition: all 0.2s ease;
-    }
-
-    @media (hover: hover) {
-        .texture-btn:hover:not(.disabled) {
-            border-color: var(--color-primary);
-            color: var(--color-primary);
-        }
-    }
-
-    .texture-btn.disabled {
-        opacity: 0.35;
-        cursor: not-allowed;
-    }
-</style>
diff --git a/src/lib/save-editor/editor-common.css b/src/lib/save-editor/editor-common.css
new file mode 100644
index 0000000..e83025e
--- /dev/null
+++ b/src/lib/save-editor/editor-common.css
@@ -0,0 +1,129 @@
+/* Shared styles for VehicleEditor, ActorEditor, PlantEditor */
+
+.preview-container {
+    position: relative;
+}
+
+.preview-container canvas {
+    display: block;
+    border-radius: 8px;
+    cursor: grab;
+    max-width: 100%;
+}
+
+.preview-container canvas:active {
+    cursor: grabbing;
+}
+
+.preview-container canvas:focus {
+    outline: none;
+}
+
+.preview-container canvas.hidden {
+    visibility: hidden;
+}
+
+.preview-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-bg-input);
+    border-radius: 8px;
+}
+
+.preview-overlay.error {
+    color: var(--color-error, #e74c3c);
+    font-size: 0.75em;
+    padding: 12px;
+    text-align: center;
+}
+
+.spinner {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background:
+        radial-gradient(transparent 55%, transparent 56%),
+        conic-gradient(var(--color-primary, #FFD700) 0deg 90deg, var(--color-border-dark, #333) 90deg 360deg);
+    animation: editor-spin 1s linear infinite;
+}
+
+@keyframes editor-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.part-nav-wrapper {
+    position: relative;
+    margin-top: 10px;
+}
+
+.part-nav {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.part-info {
+    text-align: center;
+    min-width: 150px;
+}
+
+.nav-index {
+    display: block;
+    font-size: 0.7em;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.nav-name {
+    display: block;
+    font-size: 0.9em;
+    color: var(--color-text-light);
+}
+
+.reset-container {
+    height: 1.6em;
+}
+
+.side-btn {
+    position: absolute;
+    right: -36px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: var(--color-bg-input);
+    border: 1px solid var(--color-border-medium);
+    border-radius: 6px;
+    color: var(--color-text-light);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+@media (hover: hover) {
+    .side-btn:hover:not(.disabled) {
+        border-color: var(--color-primary);
+        color: var(--color-primary);
+    }
+}
+
+.side-btn.disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+}
+
+.side-btn.active {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+}