From d5bac98b76bffdd671c5ebb7e563e86292141504 Mon Sep 17 00:00:00 2001
From: syntaxbullet <syntaxbullet@protonmail.com>
Date: Wed, 11 Feb 2026 17:56:20 +0100
Subject: [PATCH] feat: Implement detailed mobile control panel with
 categorized slider controls for image adjustments.

---
 src/components/ControlPanel.astro | 1120 +++++++++++++++++++++--------
 1 file changed, 837 insertions(+), 283 deletions(-)

diff --git a/src/components/ControlPanel.astro b/src/components/ControlPanel.astro
index 481dd3b..40fc72c 100644
--- a/src/components/ControlPanel.astro
+++ b/src/components/ControlPanel.astro
@@ -366,18 +366,267 @@ import {
 
         <!-- MOBILE NAV CONTAINER (Hidden on Desktop) -->
         <div class="mobile-nav-container mobile-only">
-            <!-- 1. ACTIVE VIEW (Where the selected control appears) -->
-            <div class="mobile-active-view" id="mobile-control-stage">
-                <div class="mobile-placeholder">Select a Control</div>
-                <!-- Logic will move elements here -->
+            <!-- 1. MOBILE CONTENT AREA -->
+            <div class="mobile-content-area" id="mobile-content-area">
+                <!-- ADJUST TAB -->
+                <div class="mobile-tab-content" data-tab-content="adjust">
+                    <!-- BASIC Section -->
+                    <div class="mobile-section">
+                        <button class="mobile-section-header" data-section="basic">
+                            <span>▼ BASIC</span>
+                            <span class="modified-count" data-section="basic-count"></span>
+                        </button>
+                        <div class="mobile-controls-list" id="mobile-basic-controls">
+                            <div class="mobile-slider-control" data-control-id="exposure" data-default="1.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">EXPOSURE</span>
+                                    <span class="mobile-control-value" data-value>1.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="3" step="0.01" value="1.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="contrast" data-default="1.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">CONTRAST</span>
+                                    <span class="mobile-control-value" data-value>1.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="3" step="0.01" value="1.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="saturation" data-default="1.2">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">SATURATION</span>
+                                    <span class="mobile-control-value" data-value>1.20</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="3" step="0.01" value="1.2" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="resolution" data-default="1.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">RESOLUTION</span>
+                                    <span class="mobile-control-value" data-value>1.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0.1" max="2" step="0.01" value="1.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- ADVANCED Section -->
+                    <div class="mobile-section">
+                        <button class="mobile-section-header collapsed" data-section="advanced">
+                            <span>► ADVANCED</span>
+                            <span class="modified-count" data-section="advanced-count"></span>
+                        </button>
+                        <div class="mobile-controls-list collapsed" id="mobile-advanced-controls">
+                            <div class="mobile-slider-control" data-control-id="shadows" data-default="0.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">SHADOWS</span>
+                                    <span class="mobile-control-value" data-value>0.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="highlights" data-default="0.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">HIGHLIGHTS</span>
+                                    <span class="mobile-control-value" data-value>0.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="gamma" data-default="1.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">GAMMA</span>
+                                    <span class="mobile-control-value" data-value>1.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="3" step="0.01" value="1.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="sharpen" data-default="0.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">SHARPEN</span>
+                                    <span class="mobile-control-value" data-value>0.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="10" step="0.01" value="0.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="overlayStrength" data-default="0.3">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">OVERLAY</span>
+                                    <span class="mobile-control-value" data-value>0.30</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.3" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="dither" data-default="0.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">DITHER</span>
+                                    <span class="mobile-control-value" data-value>0.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="edgeThreshold" data-default="0.5">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">THRESHOLD</span>
+                                    <span class="mobile-control-value" data-value>0.50</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="20" step="0.1" value="0.5" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="scanlines" data-default="0.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">SCANLINES</span>
+                                    <span class="mobile-control-value" data-value>0.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="2" step="0.01" value="0.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                            <div class="mobile-slider-control" data-control-id="vignette" data-default="0.0">
+                                <div class="mobile-control-row">
+                                    <span class="mobile-control-label">VIGNETTE</span>
+                                    <span class="mobile-control-value" data-value>0.00</span>
+                                </div>
+                                <div class="mobile-slider-stage">
+                                    <button class="mobile-slider-btn" data-action="dec">-</button>
+                                    <input type="range" class="mobile-slider-input" min="0" max="1" step="0.01" value="0.0" />
+                                    <button class="mobile-slider-btn" data-action="inc">+</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- EFFECTS TAB -->
+                <div class="mobile-tab-content hidden" data-tab-content="effects">
+                    <div class="mobile-effects-grid">
+                        <!-- Toggles Row -->
+                        <div class="mobile-effects-row">
+                            <div class="mobile-effect-group">
+                                <span class="mobile-effect-label">COLOR</span>
+                                <button class="mobile-effect-toggle" id="mobile-toggle-color" data-checked="false">
+                                    <span class="toggle-indicator"></span>
+                                    <span class="toggle-label">OFF</span>
+                                </button>
+                            </div>
+                            <div class="mobile-color-group">
+                                <span class="mobile-effect-label">TINT</span>
+                                <div class="mobile-color-picker" id="mobile-tint-picker">
+                                    <input type="color" value="#ffffff" />
+                                    <span class="color-preview" style="background: #ffffff;"></span>
+                                </div>
+                            </div>
+                            <div class="mobile-color-group">
+                                <span class="mobile-effect-label">BG</span>
+                                <div class="mobile-color-picker" id="mobile-bg-picker">
+                                    <input type="color" value="#000000" />
+                                    <span class="color-preview" style="background: #000000;"></span>
+                                </div>
+                            </div>
+                            <div class="mobile-effect-group">
+                                <span class="mobile-effect-label">DENOISE</span>
+                                <button class="mobile-effect-toggle" id="mobile-toggle-denoise" data-checked="false">
+                                    <span class="toggle-indicator"></span>
+                                    <span class="toggle-label">OFF</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Segment Controls -->
+                        <div class="mobile-segment-control">
+                            <span class="mobile-segment-label">INVERT</span>
+                            <div class="mobile-segment-options" data-segment="invert">
+                                <button class="mobile-segment-option active" data-value="AUTO">AUTO</button>
+                                <button class="mobile-segment-option" data-value="ON">ON</button>
+                                <button class="mobile-segment-option" data-value="OFF">OFF</button>
+                            </div>
+                        </div>
+
+                        <div class="mobile-segment-control">
+                            <span class="mobile-segment-label">EDGES</span>
+                            <div class="mobile-segment-options" data-segment="edge">
+                                <button class="mobile-segment-option active" data-value="OFF">OFF</button>
+                                <button class="mobile-segment-option" data-value="SPL">SIMPLE</button>
+                                <button class="mobile-segment-option" data-value="SOB">SOBEL</button>
+                                <button class="mobile-segment-option" data-value="CNY">CANNY</button>
+                            </div>
+                        </div>
+
+                        <div class="mobile-segment-control">
+                            <span class="mobile-segment-label">CHARSET</span>
+                            <div class="mobile-segment-options scrollable" data-segment="charset">
+                                <button class="mobile-segment-option active" data-value="STD">STANDARD</button>
+                                <button class="mobile-segment-option" data-value="EXT">EXTENDED</button>
+                                <button class="mobile-segment-option" data-value="BLK">BLOCKS</button>
+                                <button class="mobile-segment-option" data-value="MIN">MINIMAL</button>
+                                <button class="mobile-segment-option" data-value="DOT">DOTS</button>
+                                <button class="mobile-segment-option" data-value="SHP">SHAPES</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- EXPORT TAB -->
+                <div class="mobile-tab-content hidden" data-tab-content="export">
+                    <div class="mobile-export-grid">
+                        <input type="file" id="mobile-file-upload" accept="image/*" style="display: none;" />
+                        <button class="mobile-export-btn" id="mobile-btn-import">
+                            <span class="export-icon">📁</span>
+                            <span>IMPORT IMAGE</span>
+                        </button>
+                        <button class="mobile-export-btn" id="mobile-btn-save-png">
+                            <span class="export-icon">🖼️</span>
+                            <span>SAVE PNG</span>
+                        </button>
+                        <button class="mobile-export-btn" id="mobile-btn-copy-text">
+                            <span class="export-icon">📝</span>
+                            <span>SAVE TXT</span>
+                        </button>
+                        <button class="mobile-export-btn" id="mobile-btn-copy-html">
+                            <span class="export-icon">🌐</span>
+                            <span>SAVE HTML</span>
+                        </button>
+                    </div>
+                </div>
             </div>
 
-            <!-- 2. PARAMETER LIST (Horizontal Scroll) -->
-            <div class="mobile-param-list" id="mobile-param-list">
-                <!-- Populated via JS based on Active Tab -->
-            </div>
-
-            <!-- 3. TABS (Categories) -->
+            <!-- 2. TABS (Categories) -->
             <div class="mobile-tabs">
                 <button class="mobile-tab-btn active" data-tab="adjust">
                     <SlidersHorizontal size={18} />
@@ -393,7 +642,7 @@ import {
                 </button>
             </div>
 
-            <!-- 4. FOOTER (High Freq Actions) -->
+            <!-- 3. FOOTER (High Freq Actions) -->
             <div class="mobile-footer">
                 <button class="mobile-footer-btn" id="mobile-btn-reset">
                     <RotateCcw size={16} /> RESET
@@ -411,268 +660,360 @@ import {
 </footer>
 
 <script>
-    import {
-        SlidersHorizontal,
-        Wand2,
-        Download,
-        RotateCcw,
-        SkipForward,
-        Layers,
-    } from "@lucide/astro";
-
     // --- MOBILE COMPACT MODE LOGIC ---
-
-    // Configuration for mapping controls to tabs
-    const TABS: Record<string, string[]> = {
-        adjust: [
-            "exposure",
-            "contrast",
-            "saturation",
-            "gamma",
-            "shadows",
-            "highlights",
-            "sharpen",
-            "resolution",
-            "dither",
-            "scanlines",
-            "vignette",
-            "overlayStrength",
-            "edgeThreshold", // Actually belongs slightly to effects but fits slider format
-        ],
-        effects: [
-            "toggle-color",
-            "btn-color-tint",
-            "btn-color-bg",
-            "toggle-denoise",
-            "segment-invert",
-            "segment-edge",
-            "segment-charset",
-        ],
-        export: [
-            "btn-import",
-            "btn-save-png",
-            "btn-copy-text",
-            "btn-copy-html",
-        ],
-    };
-
-    // Dictionary to store original parents to restore them if needed resizing back to desktop
-    const originalParents = new Map<string, Element | null>();
-
-    // Store current mode to prevent redundant operations
     let isMobileMode = false;
 
     function initMobileMode() {
-        // Init happens once, but state changes on resize
-        const stage = document.getElementById("mobile-control-stage");
-        const list = document.getElementById("mobile-param-list");
         const tabs = document.querySelectorAll(".mobile-tab-btn");
+        const tabContents = document.querySelectorAll(".mobile-tab-content");
+        const sectionHeaders = document.querySelectorAll(".mobile-section-header");
 
-        // Helper to get element by ID (handling some component specific wrappings if needed)
-        const getEl = (id: string) => {
-            // Try direct ID first
-            let el = document.getElementById(id);
-            if (el) {
-                // For TuiSlider, the top level div has the ID in data-slider-id but not id attribute itself sometimes?
-                // Wait, TuiSlider: <div class="tui-slider" data-slider-id={id}> ... <input id={id}>
-                // We want the container.
-                const container =
-                    el.closest(".tui-slider") ||
-                    el.closest(".tui-toggle") ||
-                    el.closest(".tui-segment") ||
-                    el.closest(".tui-btn") ||
-                    el.closest(".tui-color-btn") ||
-                    el;
-                return container;
-            }
-            // Fallback for sliders where ID is on input
-            const input = document.getElementById(id);
-            if (input) {
-                return (
-                    input.closest(".tui-slider") ||
-                    input.closest(".tui-color-btn")
-                );
-            }
-            return null;
+        // --- Section Toggle Logic ---
+        sectionHeaders.forEach((header) => {
+            header.addEventListener("click", () => {
+                const section = (header as HTMLElement).dataset.section;
+                const list = document.getElementById(`mobile-${section}-controls`);
+                const arrow = header.querySelector("span");
+                
+                if (header.classList.contains("collapsed")) {
+                    header.classList.remove("collapsed");
+                    list?.classList.remove("collapsed");
+                    if (arrow) arrow.textContent = arrow.textContent?.replace("►", "▼") || "▼";
+                } else {
+                    header.classList.add("collapsed");
+                    list?.classList.add("collapsed");
+                    if (arrow) arrow.textContent = arrow.textContent?.replace("▼", "►") || "►";
+                }
+            });
+        });
+
+        // --- Tab Switching ---
+        tabs.forEach((tab) => {
+            tab.addEventListener("click", () => {
+                const tabName = (tab as HTMLElement).dataset.tab;
+                if (!tabName) return;
+                
+                // Update active tab
+                tabs.forEach((t) => t.classList.remove("active"));
+                tab.classList.add("active");
+                
+                // Show/hide content
+                tabContents.forEach((content) => {
+                    if ((content as HTMLElement).dataset.tabContent === tabName) {
+                        content.classList.remove("hidden");
+                    } else {
+                        content.classList.add("hidden");
+                    }
+                });
+            });
+        });
+
+        // --- Mobile Slider Controls ---
+        const initMobileSliders = () => {
+            document.querySelectorAll(".mobile-slider-control").forEach((control) => {
+                const controlEl = control as HTMLElement;
+                const input = control.querySelector(".mobile-slider-input") as HTMLInputElement;
+                const valueDisplay = control.querySelector("[data-value]") as HTMLElement;
+                const decBtn = control.querySelector("[data-action='dec']") as HTMLButtonElement;
+                const incBtn = control.querySelector("[data-action='inc']") as HTMLButtonElement;
+                const defaultValue = parseFloat(controlEl.dataset.default || "0");
+                const controlId = controlEl.dataset.controlId;
+                
+                if (!input || !valueDisplay || !controlId) return;
+
+                const updateValue = (val: number) => {
+                    input.value = String(val);
+                    valueDisplay.textContent = val.toFixed(2);
+                    
+                    // Sync to desktop slider
+                    const desktopInput = document.getElementById(controlId) as HTMLInputElement;
+                    if (desktopInput) {
+                        desktopInput.value = String(val);
+                        desktopInput.dispatchEvent(new Event("input"));
+                    }
+                    
+                    // Update modified state
+                    const isModified = Math.abs(val - defaultValue) > 0.001;
+                    valueDisplay.classList.toggle("modified", isModified);
+                    updateModifiedCounts();
+                };
+
+                input.addEventListener("input", () => {
+                    updateValue(parseFloat(input.value));
+                });
+
+                decBtn?.addEventListener("click", () => {
+                    const step = parseFloat(input.step) || 0.01;
+                    const newVal = parseFloat(input.value) - step;
+                    updateValue(Math.max(parseFloat(input.min), newVal));
+                });
+
+                incBtn?.addEventListener("click", () => {
+                    const step = parseFloat(input.step) || 0.01;
+                    const newVal = parseFloat(input.value) + step;
+                    updateValue(Math.min(parseFloat(input.max), newVal));
+                });
+
+                // Sync from desktop
+                const desktopInput = document.getElementById(controlId) as HTMLInputElement;
+                if (desktopInput) {
+                    desktopInput.addEventListener("input", () => {
+                        const val = parseFloat(desktopInput.value);
+                        input.value = String(val);
+                        valueDisplay.textContent = val.toFixed(2);
+                        const isModified = Math.abs(val - defaultValue) > 0.001;
+                        valueDisplay.classList.toggle("modified", isModified);
+                        updateModifiedCounts();
+                    });
+                }
+            });
         };
 
-        const renderTab = (tabName: string) => {
-            if (!list) return;
-            list.innerHTML = ""; // Clear list
+        // --- Mobile Toggle Controls ---
+        const initMobileToggles = () => {
+            const toggles = [
+                { mobileId: "mobile-toggle-color", desktopId: "toggle-color" },
+                { mobileId: "mobile-toggle-denoise", desktopId: "toggle-denoise" },
+            ];
 
-            const items = TABS[tabName];
-            if (!items) return;
+            toggles.forEach(({ mobileId, desktopId }) => {
+                const mobileToggle = document.getElementById(mobileId) as HTMLButtonElement;
+                const desktopToggle = document.getElementById(desktopId) as HTMLButtonElement;
+                
+                if (!mobileToggle) return;
 
-            items.forEach((id) => {
-                const el = getEl(id);
-                if (!el) return;
+                mobileToggle.addEventListener("click", () => {
+                    const isChecked = mobileToggle.dataset.checked === "true";
+                    const newState = !isChecked;
+                    
+                    mobileToggle.dataset.checked = String(newState);
+                    const label = mobileToggle.querySelector(".toggle-label");
+                    if (label) label.textContent = newState ? "ON" : "OFF";
+                    
+                    // Sync to desktop
+                    if (desktopToggle) {
+                        desktopToggle.click();
+                    }
+                });
 
-                // Create a Nav Pill
-                const btn = document.createElement("button");
-                btn.className = "mobile-list-item";
-                btn.id = `nav-pill-${id}`; // Help with tracking
+                // Sync from desktop
+                if (desktopToggle) {
+                    desktopToggle.addEventListener("toggle-change", (e: any) => {
+                        const newState = e.detail?.checked;
+                        mobileToggle.dataset.checked = String(newState);
+                        const label = mobileToggle.querySelector(".toggle-label");
+                        if (label) label.textContent = newState ? "ON" : "OFF";
+                    });
+                }
+            });
+        };
 
-                // Get Label Text
-                // Try various selectors based on component type
-                let labelText = id;
-                const labelEl = el.querySelector(
-                    ".tui-slider-label .full, .tui-toggle-label .full, .tui-segment-label .full, .tui-btn-label .full, .label",
-                );
-                if (labelEl && labelEl.textContent)
-                    labelText = labelEl.textContent;
+        // --- Mobile Color Pickers ---
+        const initMobileColorPickers = () => {
+            const pickers = [
+                { mobileId: "mobile-tint-picker", desktopId: "input-mono-color", previewId: "color-swatch-display" },
+                { mobileId: "mobile-bg-picker", desktopId: "input-bg-color", previewId: "bg-color-swatch-display" },
+            ];
 
-                // Abbr fallback
-                const abbrEl = el.querySelector(".abbr");
-                if (
-                    (!labelEl || !labelEl.textContent) &&
-                    abbrEl &&
-                    abbrEl.textContent
-                )
-                    labelText = abbrEl.textContent;
+            pickers.forEach(({ mobileId, desktopId, previewId }) => {
+                const mobilePicker = document.getElementById(mobileId);
+                const mobileInput = mobilePicker?.querySelector("input[type='color']") as HTMLInputElement;
+                const mobilePreview = mobilePicker?.querySelector(".color-preview") as HTMLElement;
+                const desktopInput = document.getElementById(desktopId) as HTMLInputElement;
+                const desktopPreview = document.getElementById(previewId) as HTMLElement;
 
-                btn.textContent = labelText;
-                btn.onclick = () => {
-                    // Highlight active logic
-                    document
-                        .querySelectorAll(".mobile-list-item")
-                        .forEach((b) => b.classList.remove("active"));
-                    btn.classList.add("active");
+                if (!mobileInput) return;
 
-                    // Move component to stage
-                    if (stage) {
-                        // Clean stage first - return any existing child to its home
-                        const currentInStage = stage.firstElementChild;
-                        if (
-                            currentInStage &&
-                            currentInStage.className !== "mobile-placeholder" &&
-                            currentInStage !== el
-                        ) {
-                            // Return to original home
-                            // The ID might be on the element itself or a child (input)
-                            // We use data-origin-id tagged during move
-                            const originId = (currentInStage as HTMLElement)
-                                .dataset.originTabId;
-                            if (originId) {
-                                const orig = originalParents.get(originId);
-                                if (orig) orig.appendChild(currentInStage);
+                mobileInput.addEventListener("input", () => {
+                    const color = mobileInput.value;
+                    if (mobilePreview) mobilePreview.style.background = color;
+                    if (desktopInput) {
+                        desktopInput.value = color;
+                        desktopInput.dispatchEvent(new Event("input"));
+                    }
+                    if (desktopPreview) desktopPreview.style.background = color;
+                });
+
+                // Sync from desktop
+                if (desktopInput) {
+                    desktopInput.addEventListener("input", () => {
+                        const color = desktopInput.value;
+                        mobileInput.value = color;
+                        if (mobilePreview) mobilePreview.style.background = color;
+                    });
+                }
+            });
+        };
+
+        // --- Mobile Segment Controls ---
+        const initMobileSegments = () => {
+            const segments = [
+                { mobileData: "invert", desktopId: "segment-invert" },
+                { mobileData: "edge", desktopId: "segment-edge" },
+                { mobileData: "charset", desktopId: "segment-charset" },
+            ];
+
+            segments.forEach(({ mobileData, desktopId }) => {
+                const mobileContainer = document.querySelector(`[data-segment="${mobileData}"]`);
+                const desktopContainer = document.getElementById(desktopId) as HTMLElement;
+                const mobileOptions = mobileContainer?.querySelectorAll(".mobile-segment-option");
+
+                mobileOptions?.forEach((btn) => {
+                    btn.addEventListener("click", () => {
+                        const value = (btn as HTMLElement).dataset.value;
+                        
+                        // Update mobile UI
+                        mobileOptions.forEach((b) => b.classList.remove("active"));
+                        btn.classList.add("active");
+                        
+                        // Sync to desktop
+                        if (desktopContainer) {
+                            const desktopBtn = desktopContainer.querySelector(`[data-value="${value}"]`);
+                            if (desktopBtn) {
+                                (desktopBtn as HTMLButtonElement).click();
                             }
                         }
+                    });
+                });
 
-                        // Remove placeholder if present
-                        const placeholder = stage.querySelector(
-                            ".mobile-placeholder",
-                        );
-                        if (placeholder) placeholder.remove();
+                // Sync from desktop
+                if (desktopContainer) {
+                    desktopContainer.addEventListener("segment-change", (e: any) => {
+                        const value = e.detail?.value;
+                        mobileOptions?.forEach((btn) => {
+                            const btnValue = (btn as HTMLElement).dataset.value;
+                            btn.classList.toggle("active", btnValue === value);
+                        });
+                    });
+                }
+            });
+        };
 
-                        // Prepare element for move
-                        if (!originalParents.has(id)) {
-                            // Store parent for restoration
-                            originalParents.set(id, el.parentElement);
-                        }
-
-                        (el as HTMLElement).dataset.originTabId = id; // Tag it
-                        stage.appendChild(el);
+        // --- Modified Counts ---
+        const updateModifiedCounts = () => {
+            const basicIds = ["exposure", "contrast", "saturation", "resolution"];
+            const advancedIds = ["shadows", "highlights", "gamma", "sharpen", "overlayStrength", "dither", "edgeThreshold", "scanlines", "vignette"];
+            
+            const countModified = (ids: string[]) => {
+                let count = 0;
+                ids.forEach((id) => {
+                    const control = document.querySelector(`[data-control-id="${id}"]`) as HTMLElement;
+                    const defaultVal = parseFloat(control?.dataset.default || "0");
+                    const desktopInput = document.getElementById(id) as HTMLInputElement;
+                    if (desktopInput) {
+                        const currentVal = parseFloat(desktopInput.value);
+                        if (Math.abs(currentVal - defaultVal) > 0.001) count++;
                     }
-                };
-                list.appendChild(btn);
+                });
+                return count;
+            };
+
+            const basicCount = countModified(basicIds);
+            const advancedCount = countModified(advancedIds);
+            
+            const basicCountEl = document.querySelector("[data-section='basic-count']");
+            const advancedCountEl = document.querySelector("[data-section='advanced-count']");
+            
+            if (basicCountEl) basicCountEl.textContent = basicCount > 0 ? `(${basicCount})` : "";
+            if (advancedCountEl) advancedCountEl.textContent = advancedCount > 0 ? `(${advancedCount})` : "";
+        };
+
+        // --- Export Buttons ---
+        const initMobileExport = () => {
+            const exports = [
+                { mobileId: "mobile-btn-import", desktopId: "btn-import", fileInputId: "mobile-file-upload", desktopFileInputId: "file-upload" },
+                { mobileId: "mobile-btn-save-png", desktopId: "btn-save-png" },
+                { mobileId: "mobile-btn-copy-text", desktopId: "btn-copy-text" },
+                { mobileId: "mobile-btn-copy-html", desktopId: "btn-copy-html" },
+            ];
+
+            exports.forEach(({ mobileId, desktopId, fileInputId, desktopFileInputId }) => {
+                const mobileBtn = document.getElementById(mobileId);
+                const desktopBtn = document.getElementById(desktopId);
+                const mobileFileInput = fileInputId ? document.getElementById(fileInputId) as HTMLInputElement : null;
+                const desktopFileInput = desktopFileInputId ? document.getElementById(desktopFileInputId) as HTMLInputElement : null;
+
+                if (!mobileBtn) return;
+
+                if (fileInputId && mobileFileInput && desktopFileInput) {
+                    // Import button needs file input trigger
+                    mobileBtn.addEventListener("click", () => mobileFileInput.click());
+                    mobileFileInput.addEventListener("change", () => {
+                        if (mobileFileInput.files?.length) {
+                            // Transfer files to desktop input
+                            const dt = new DataTransfer();
+                            dt.items.add(mobileFileInput.files[0]);
+                            desktopFileInput.files = dt.files;
+                            desktopFileInput.dispatchEvent(new Event("change"));
+                        }
+                    });
+                } else if (desktopBtn) {
+                    mobileBtn.addEventListener("click", () => desktopBtn.click());
+                }
+            });
+        };
+
+        // --- Footer Buttons ---
+        const initMobileFooter = () => {
+            document.getElementById("mobile-btn-reset")?.addEventListener("click", () => {
+                document.getElementById("btn-reset")?.click();
+                // Reset all mobile sliders
+                document.querySelectorAll(".mobile-slider-control").forEach((control) => {
+                    const controlEl = control as HTMLElement;
+                    const input = control.querySelector(".mobile-slider-input") as HTMLInputElement;
+                    const valueDisplay = control.querySelector("[data-value]") as HTMLElement;
+                    const defaultVal = parseFloat(controlEl.dataset.default || "0");
+                    if (input) input.value = String(defaultVal);
+                    if (valueDisplay) {
+                        valueDisplay.textContent = defaultVal.toFixed(2);
+                        valueDisplay.classList.remove("modified");
+                    }
+                });
+                updateModifiedCounts();
             });
 
-            // Auto-select first item?
-            if (list.firstElementChild) {
-                (list.firstElementChild as HTMLElement).click();
+            document.getElementById("mobile-btn-next")?.addEventListener("click", () => {
+                document.getElementById("btn-next")?.click();
+            });
+
+            // Queue sync
+            const qVal = document.getElementById("val-queue");
+            const mQVal = document.getElementById("mobile-val-queue");
+            if (qVal && mQVal) {
+                const obs = new MutationObserver(() => {
+                    if (qVal.textContent) mQVal.textContent = qVal.textContent;
+                });
+                obs.observe(qVal, { childList: true, subtree: true, characterData: true });
+                if (qVal.textContent) mQVal.textContent = qVal.textContent;
             }
         };
 
         // --- State Management ---
         const checkMode = () => {
-            // Match CSS breakpoint
             const isMobile = window.innerWidth <= 1600;
 
             if (isMobile && !isMobileMode) {
-                // Entering Mobile
                 isMobileMode = true;
                 console.log("📱 Entering Mobile Mode");
-
-                // Init tabs listeners if not already
-                tabs.forEach((tab) => {
-                    // Check if already bound
-                    if ((tab as HTMLElement).dataset.hasListener) return;
-
-                    tab.addEventListener("click", () => {
-                        const t = tab as HTMLElement;
-                        tabs.forEach((x) => x.classList.remove("active"));
-                        t.classList.add("active");
-                        if (t.dataset.tab) renderTab(t.dataset.tab);
-                    });
-                    (tab as HTMLElement).dataset.hasListener = "true";
-                });
-
-                // Render default tab
-                // Find active tab or default to adjust
-                const activeTab = document.querySelector(
-                    ".mobile-tab-btn.active",
-                ) as HTMLElement;
-                renderTab(activeTab?.dataset.tab || "adjust");
+                
+                // Initialize mobile controls once
+                initMobileSliders();
+                initMobileToggles();
+                initMobileColorPickers();
+                initMobileSegments();
+                initMobileExport();
+                initMobileFooter();
+                updateModifiedCounts();
             } else if (!isMobile && isMobileMode) {
-                // Exiting Mobile - RESTORE EVERYTHING
                 isMobileMode = false;
                 console.log("🖥️ Entering Desktop Mode");
-
-                // 1. Move everything back from stage
-                if (stage) {
-                    Array.from(stage.children).forEach((child) => {
-                        if (child.className === "mobile-placeholder") return;
-                        const originId = (child as HTMLElement).dataset
-                            .originTabId;
-                        if (originId) {
-                            const orig = originalParents.get(originId);
-                            if (orig) orig.appendChild(child);
-                        }
-                    });
-                    // Clear stage
-                    stage.innerHTML =
-                        '<div class="mobile-placeholder">Select a Control</div>';
-                }
             }
         };
 
-        // Listen for resize
         window.addEventListener("resize", checkMode);
-
-        // Initial check
         checkMode();
-
-        // --- FOOTER PROXY BUTTONS ---
-        const bindFooterProxy = (proxyId: string, originalId: string) => {
-            const proxy = document.getElementById(proxyId);
-            const original = document.getElementById(originalId);
-            if (proxy && original) {
-                if (proxy.dataset.bound) return;
-                proxy.addEventListener("click", () => original.click());
-                proxy.dataset.bound = "true";
-            }
-        };
-        bindFooterProxy("mobile-btn-reset", "btn-reset");
-        bindFooterProxy("mobile-btn-next", "btn-next");
-
-        // Queue Sync
-        const qVal = document.getElementById("val-queue");
-        const mQVal = document.getElementById("mobile-val-queue");
-        if (qVal && mQVal) {
-            // Observer to sync text
-            const obs = new MutationObserver(() => {
-                if (qVal.textContent) mQVal.textContent = qVal.textContent;
-            });
-            obs.observe(qVal, {
-                childList: true,
-                subtree: true,
-                characterData: true,
-            });
-            if (qVal.textContent) mQVal.textContent = qVal.textContent;
-        }
     }
 
-    // Run on load
     document.addEventListener("DOMContentLoaded", initMobileMode);
 </script>
 
@@ -917,70 +1258,283 @@ import {
             background: #000;
         }
 
-        /* 1. Active View */
-        .mobile-active-view {
+        /* Mobile Content Area */
+        .mobile-content-area {
             flex: 1;
-            padding: 1rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-bottom: 1px solid #222;
-            overflow: hidden;
-            background: #080808;
+            overflow-y: auto;
+            background: #050505;
         }
 
-        .mobile-placeholder {
-            color: #444;
-            font-size: 0.8rem;
-            font-family: var(--font-mono);
-        }
-
-        /* When components are moved here, they need to stretch */
-        .mobile-active-view > :global(*) {
-            width: 100%;
-            max-width: 300px;
-        }
-
-        /* 2. Param List */
-        .mobile-param-list {
-            display: flex;
-            gap: 0.5rem;
-            padding: 0.5rem 1rem;
-            overflow-x: auto;
-            white-space: nowrap;
-            background: #000;
-            border-bottom: 1px solid #1a1a1a;
-            /* Hide scrollbar */
-            scrollbar-width: none;
-            -ms-overflow-style: none;
-        }
-        .mobile-param-list::-webkit-scrollbar {
+        .mobile-tab-content.hidden {
             display: none;
         }
 
-        .mobile-param-list :global(.mobile-list-item) {
+        /* Section Headers */
+        .mobile-section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            padding: 12px 16px;
+            background: #0a0a0a;
+            border: none;
+            border-bottom: 1px solid #1a1a1a;
+            color: #fff;
+            font-family: var(--font-mono);
+            font-size: 12px;
+            cursor: pointer;
+        }
+
+        .mobile-section-header.collapsed {
+            border-bottom: none;
+        }
+
+        .mobile-controls-list.collapsed {
+            display: none;
+        }
+
+        .modified-count {
+            color: var(--accent-color);
+            font-size: 10px;
+        }
+
+        /* Slider Controls */
+        .mobile-slider-control {
+            padding: 12px 16px;
+            border-bottom: 1px solid #111;
+        }
+
+        .mobile-control-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+
+        .mobile-control-label {
+            font-family: var(--font-mono);
+            font-size: 11px;
+            color: rgba(255, 255, 255, 0.7);
+        }
+
+        .mobile-control-value {
+            font-family: var(--font-mono);
+            font-size: 11px;
+            color: #fff;
+        }
+
+        .mobile-control-value.modified {
+            color: var(--accent-color);
+        }
+
+        .mobile-slider-stage {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .mobile-slider-btn {
+            width: 32px;
+            height: 32px;
             background: #1a1a1a;
             border: 1px solid #333;
             color: #fff;
-            opacity: 0.8;
-            padding: 4px 10px;
-            font-size: 11px;
-            font-family: var(--font-mono);
-            border-radius: 2px;
-            text-transform: uppercase;
+            font-size: 14px;
             cursor: pointer;
-            transition: all 0.2s;
-            flex-shrink: 0;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
-        .mobile-param-list :global(.mobile-list-item.active) {
+
+        .mobile-slider-input {
+            flex: 1;
+            height: 44px;
+            -webkit-appearance: none;
+            background: transparent;
+        }
+
+        .mobile-slider-input::-webkit-slider-track {
+            height: 6px;
+            background: #1a1a1a;
+            border-radius: 3px;
+        }
+
+        .mobile-slider-input::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 24px;
+            height: 24px;
+            background: var(--accent-color);
+            border-radius: 50%;
+            cursor: pointer;
+            margin-top: -9px;
+        }
+
+        .mobile-slider-input::-moz-range-track {
+            height: 6px;
+            background: #1a1a1a;
+            border-radius: 3px;
+        }
+
+        .mobile-slider-input::-moz-range-thumb {
+            width: 24px;
+            height: 24px;
+            background: var(--accent-color);
+            border-radius: 50%;
+            cursor: pointer;
+            border: none;
+        }
+
+        /* Effects Grid */
+        .mobile-effects-grid {
+            padding: 16px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+
+        .mobile-effects-row {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+
+        .mobile-effect-group,
+        .mobile-color-group {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .mobile-effect-label {
+            font-family: var(--font-mono);
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+        }
+
+        .mobile-effect-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 12px;
+            background: #1a1a1a;
+            border: 1px solid #333;
+            border-radius: 4px;
+            color: #fff;
+            cursor: pointer;
+            min-width: 60px;
+        }
+
+        .mobile-effect-toggle[data-checked="true"] {
+            background: var(--accent-color);
             border-color: var(--accent-color);
-            color: var(--accent-color);
-            background: color-mix(
-                in srgb,
-                var(--accent-color),
-                transparent 90%
-            );
-            opacity: 1;
+        }
+
+        .toggle-indicator {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #444;
+        }
+
+        .mobile-effect-toggle[data-checked="true"] .toggle-indicator {
+            background: #fff;
+        }
+
+        .mobile-color-picker {
+            position: relative;
+            width: 44px;
+            height: 44px;
+            border-radius: 4px;
+            overflow: hidden;
+            border: 1px solid #333;
+        }
+
+        .mobile-color-picker input {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+        }
+
+        .color-preview {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Segment Controls */
+        .mobile-segment-control {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
+        .mobile-segment-label {
+            font-family: var(--font-mono);
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.5);
+        }
+
+        .mobile-segment-options {
+            display: flex;
+            gap: 8px;
+        }
+
+        .mobile-segment-options.scrollable {
+            overflow-x: auto;
+            padding-bottom: 4px;
+            scrollbar-width: none;
+        }
+
+        .mobile-segment-options.scrollable::-webkit-scrollbar {
+            display: none;
+        }
+
+        .mobile-segment-option {
+            padding: 8px 16px;
+            background: #1a1a1a;
+            border: 1px solid #333;
+            border-radius: 4px;
+            color: rgba(255, 255, 255, 0.7);
+            font-family: var(--font-mono);
+            font-size: 11px;
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        .mobile-segment-option.active {
+            background: var(--accent-color);
+            border-color: var(--accent-color);
+            color: #fff;
+        }
+
+        /* Export Grid */
+        .mobile-export-grid {
+            padding: 16px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+        }
+
+        .mobile-export-btn {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+            padding: 20px 12px;
+            background: #1a1a1a;
+            border: 1px solid #333;
+            border-radius: 8px;
+            color: #fff;
+            cursor: pointer;
+            font-family: var(--font-mono);
+            font-size: 10px;
+        }
+
+        .export-icon {
+            font-size: 24px;
         }
 
         /* 3. Tabs */