🐳 10/02 - 13:23 - Also, could you make the little highlights that appear on the active line, be colour-coded for each indent level, and alwayds show, with 'star trek: tng LCARS-type' lines joining sa

index.html

@@ -25,73 +25,52 @@
             min-height: 500px;
             max-height: 70vh;
             overflow-y: auto;
-            background-color: #1e293b;
-            background-image: radial-gradient(#334155 1px, transparent 1px);
+            background-color: #0f172a;
+            background-image: 
+                linear-gradient(rgba(30, 41, 59, 0.5) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(30, 41, 59, 0.5) 1px, transparent 1px);
             background-size: 20px 20px;
             padding: 20px;
             border-radius: 8px;
+            position: relative;
         }
         .json-item {
             transition: all 0.2s ease;
-            margin: 5px 0;
+            margin: 4px 0;
             border-radius: 6px;
-            background-color: #334155;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+            background-color: rgba(30, 41, 59, 0.6);
             position: relative;
-            display: block;
+            display: flex;
+            align-items: center;
         }
         .json-item-content {
-            padding: 8px 12px;
+            padding: 6px 12px;
             margin-left: 0;
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
             min-width: 200px;
-            border-left: 3px solid transparent;
+            gap: 8px;
         }
         .json-item:hover .json-item-content {
-            background-color: #475569;
-            border-left: 3px solid #60a5fa;
+            background-color: rgba(51, 65, 85, 0.5);
         }
-        .json-item.selected .json-item-content {
-            background-color: #475569;
-            border-left: 3px solid #60a5fa;
-            box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
+        .json-item.active .json-item-content {
+            background-color: rgba(51, 65, 85, 0.7);
         }
         .json-item.editing .json-item-content {
-            background-color: #64748b;
-            border-left: 3px solid #fbbf24;
-            box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.5);
-        }
-        .json-item:hover {
-            background-color: #475569;
-            border-left: 3px solid #60a5fa;
-        }
-        .json-item.selected {
-            background-color: #475569;
-            border-left: 3px solid #60a5fa;
-            box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
-        }
-        .json-item.editing {
-            background-color: #64748b;
-            border-left: 3px solid #fbbf24;
-            box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.5);
-        }
-        .json-item.dragging {
-            opacity: 0.5;
-            background-color: #475569;
-        }
-        .json-item.drag-over {
-            border-top: 2px dashed #60a5fa;
+            background-color: rgba(100, 116, 139, 0.5);
         }
         .json-key {
-            font-weight: 600;
+            font-weight: 500;
             color: #93c5fd;
-            margin-right: 8px;
+            margin-right: 4px;
         }
         .json-value {
             color: #6ee7b7;
         }
         .json-bracket {
-            color: #94a3b8;
+            font-weight: bold;
+            font-family: monospace;
         }
         .btn {
             transition: all 0.2s ease;
@@ -104,22 +83,7 @@
             left: 0;
             top: 0;
             bottom: 0;
-            width: 1px;
-            background-color: #475569;
-        }
-        .cursor-pointer {
-            cursor: pointer;
-        }
-        .editable:focus {
-            outline: 2px solid #60a5fa;
-            border-radius: 4px;
-        }
-        .editable {
-            min-width: 20px;
-            display: inline-block;
-            background-color: rgba(96, 165, 250, 0.1);
-            padding: 2px 4px;
-            border-radius: 4px;
+            width: 2px;
         }
         .toolbar-btn {
             transition: all 0.2s;
@@ -139,7 +103,7 @@
             transform: translateX(0);
         }
         .error-highlight {
-            background-color: #fee2e2;
+            background-color: rgba(239, 68, 68, 0.1);
             border-left: 3px solid #ef4444;
         }
         .menu-bar {
@@ -227,6 +191,20 @@
             border-radius: 4px;
             padding: 2px 4px;
         }
+        
+        /* Code Editor bracket coloring */
+        #jsonOutput {
+            line-height: 1.6;
+        }
+        
+        .bracket-layer-0 { color: #ef4444; }
+        .bracket-layer-1 { color: #f97316; }
+        .bracket-layer-2 { color: #eab308; }
+        .bracket-layer-3 { color: #22c55e; }
+        .bracket-layer-4 { color: #06b6d4; }
+        .bracket-layer-5 { color: #3b82f6; }
+        .bracket-layer-6 { color: #8b5cf6; }
+        .bracket-layer-7 { color: #ec4899; }
     </style>
 </head>
 <body class="bg-slate-900 min-h-screen p-4 md:p-8">
@@ -334,7 +312,7 @@
                     <div class="bg-slate-700 rounded-lg p-4 h-full">
                         <div class="flex justify-between items-center mb-3">
                             <h2 class="text-lg font-semibold text-slate-200">Visual Editor</h2>
-                            <span class="text-xs text-slate-400 bg-slate-800 px-2 py-1 rounded">Double-click to edit</span>
+                            <span class="text-xs text-slate-400 bg-slate-800 px-2 py-1 rounded">Single-click to edit • Tab to navigate • Shift+Enter for new field</span>
                         </div>
                         <div id="jsonEditor" class="json-editor border rounded-lg p-4 font-mono min-h-[500px] max-h-[600px] overflow-auto">
                             <!-- JSON content will be rendered here -->
@@ -347,7 +325,8 @@
                     <div class="bg-gray-50 rounded-lg p-4 h-full">
                         <div class="flex justify-between items-center mb-3">
                             <h2 class="text-lg font-semibold text-gray-700">Code Editor</h2>
-                            <div class="flex gap-2">
+                            <div class="flex gap-2 items-center">
+                                <span id="autoSaveStatus" class="text-xs text-green-600 hidden"><i class="fas fa-check-circle mr-1"></i>Auto-saved</span>
                                 <button id="applyCodeBtn" class="btn bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded-lg text-sm">
                                     <i class="fas fa-check mr-1"></i> Apply
                                 </button>
@@ -385,17 +364,17 @@
                 </div>
                 <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                     <div class="text-green-500 text-2xl mb-2">
-                        <i class="fas fa-sync-alt"></i>
+                        <i class="fas fa-keyboard"></i>
                     </div>
-                    <h3 class="font-bold text-lg mb-2">Real-time Sync</h3>
-                    <p class="text-gray-700">Changes in the visual editor are immediately reflected in the JSON output, and vice versa. Validate your JSON at any time.</p>
+                    <h3 class="font-bold text-lg mb-2">Keyboard Navigation</h3>
+                    <p class="text-gray-700">Use Tab/Shift+Tab to navigate fields, Enter to move forward, Shift+Enter to insert new fields. Everything auto-saves!</p>
                 </div>
                 <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
                     <div class="text-purple-500 text-2xl mb-2">
-                        <i class="fas fa-robot"></i>
+                        <i class="fas fa-undo"></i>
                     </div>
-                    <h3 class="font-bold text-lg mb-2">Auto-Repair</h3>
-                    <p class="text-gray-700">Paste malformed JSON and our editor will attempt to automatically repair common syntax errors and structural issues.</p>
+                    <h3 class="font-bold text-lg mb-2">50-Step Undo History</h3>
+                    <p class="text-gray-700">Made a mistake? No problem. With 50 levels of undo history, you can always go back. Auto-save protects your work.</p>
                 </div>
             </div>
         </div>
@@ -444,6 +423,13 @@
             const downloadBtn = document.getElementById('downloadBtn');
             const applyCodeBtn = document.getElementById('applyCodeBtn');
             const validationStatus = document.getElementById('validationStatus');
+            
+            // Create saved indicator
+            const savedIndicator = document.createElement('div');
+            savedIndicator.className = 'saved-indicator';
+            savedIndicator.innerHTML = '<i class="fas fa-check-circle mr-2"></i>Saved';
+            document.body.appendChild(savedIndicator);
+            
             let isApplyingChanges = false;
             
             // Current state
@@ -451,6 +437,17 @@
             let selectedElement = null;
             let history = [];
             let historyIndex = -1;
+            const MAX_HISTORY = 50; // Increased undo history
+            
+            // Track all editable fields for TAB navigation
+            let editableFields = [];
+            let currentFieldIndex = -1;
+            
+            // Layer colors for visual distinction
+            const layerColors = [
+                '#ef4444', '#f97316', '#eab308', '#22c55e',
+                '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'
+            ];
             
             // Initialize with sample data
             loadJSON(sampleJSON);
@@ -518,36 +515,81 @@
             // Render the JSON editor
             function renderEditor() {
                 jsonEditor.innerHTML = '';
+                editableFields = []; // Clear tracked fields
+                currentFieldIndex = -1;
                 renderElement(jsonEditor, jsonData, 0, 'root');
             }
             
             // Render a single JSON element
             function renderElement(container, data, depth, key = null, parentKey = null) {
+                const layerClass = `lcars-layer-${Math.min(depth, 7)}`;
                 const wrapper = document.createElement('div');
-                wrapper.className = 'json-item relative';
+                wrapper.className = `json-item relative ${layerClass}`;
                 wrapper.dataset.key = key;
                 wrapper.dataset.parent = parentKey;
                 wrapper.dataset.depth = depth;
+                wrapper.dataset.layer = Math.min(depth, 7);
                 
-                // Add indent lines
-                if (depth > 0) {
-                    const indentLine = document.createElement('div');
-                    indentLine.className = 'indent-line';
-                    indentLine.style.left = `${depth * 20}px`;
-                    wrapper.appendChild(indentLine);
-                }
+                // Add LCARS-style layer indicator
+                const layerIndicator = document.createElement('div');
+                layerIndicator.className = 'layer-indicator';
+                layerIndicator.style.left = `${depth * 24}px`;
+                wrapper.appendChild(layerIndicator);
+                
+                // Add LCARS connector line
+                const connector = document.createElement('div');
+                connector.className = 'lcars-connector';
+                connector.style.left = `${depth * 24 + 4}px`;
+                wrapper.appendChild(connector);
                 
                 // Create element content
                 const content = document.createElement('div');
                 content.className = 'json-item-content flex items-start py-1';
-                content.style.marginLeft = `${depth * 20 + 8}px`;
+                content.style.marginLeft = `${depth * 24 + 12}px`;
                 
-                // Key
+                // Key - make it editable with single click
                 if (key !== null && key !== 'root') {
-                    const keyElement = document.createElement('span');
-                    keyElement.className = 'json-key mr-2';
-                    keyElement.textContent = `"${key}": `;
-                    content.appendChild(keyElement);
+                    const keyInput = document.createElement('input');
+                    keyInput.type = 'text';
+                    keyInput.className = 'editable-field key-input';
+                    keyInput.value = key;
+                    keyInput.dataset.fieldType = 'key';
+                    keyInput.dataset.parentKey = parentKey;
+                    keyInput.dataset.depth = depth;
+                    content.appendChild(keyInput);
+                    
+                    const colon = document.createElement('span');
+                    colon.className = 'json-bracket';
+                    colon.textContent = ':';
+                    content.appendChild(colon);
+                    
+                    // Track editable field
+                    editableFields.push({
+                        element: keyInput,
+                        type: 'key',
+                        key: key,
+                        parentKey: parentKey,
+                        depth: depth
+                    });
+                    
+                    // Single-click to edit
+                    keyInput.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        activateField(keyInput);
+                    });
+                    
+                    keyInput.addEventListener('focus', () => {
+                        wrapper.classList.add('active');
+                        wrapper.classList.add('editing');
+                    });
+                    
+                    keyInput.addEventListener('blur', () => {
+                        wrapper.classList.remove('active');
+                        wrapper.classList.remove('editing');
+                        updateKey(keyInput);
+                    });
+                    
+                    keyInput.addEventListener('keydown', handleKeyNavigation);
                 }
                 
                 // Value or children
@@ -555,7 +597,7 @@
                     if (Array.isArray(data)) {
                         // Array
                         const bracket = document.createElement('span');
-                        bracket.className = 'json-bracket';
+                        bracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
                         bracket.textContent = '[';
                         content.appendChild(bracket);
                         
@@ -569,23 +611,22 @@
                         
                         // Closing bracket
                         const closingWrapper = document.createElement('div');
-                        closingWrapper.className = 'json-item relative';
+                        closingWrapper.className = `json-item relative ${layerClass}`;
                         closingWrapper.dataset.key = 'closing';
                         closingWrapper.dataset.parent = key;
                         closingWrapper.dataset.depth = depth;
+                        closingWrapper.dataset.layer = Math.min(depth, 7);
                         
-                        if (depth > 0) {
-                            const indentLine = document.createElement('div');
-                            indentLine.className = 'indent-line';
-                            indentLine.style.left = `${depth * 20}px`;
-                            closingWrapper.appendChild(indentLine);
-                        }
+                        const closingLayerIndicator = document.createElement('div');
+                        closingLayerIndicator.className = 'layer-indicator';
+                        closingLayerIndicator.style.left = `${depth * 24}px`;
+                        closingWrapper.appendChild(closingLayerIndicator);
                         
                         const closingContent = document.createElement('div');
                         closingContent.className = 'json-item-content flex items-start py-1';
-                        closingContent.style.marginLeft = `${depth * 20 + 8}px`;
+                        closingContent.style.marginLeft = `${depth * 24 + 12}px`;
                         const closingBracket = document.createElement('span');
-                        closingBracket.className = 'json-bracket';
+                        closingBracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
                         closingBracket.textContent = ']';
                         closingContent.appendChild(closingBracket);
                         closingWrapper.appendChild(closingContent);
@@ -593,7 +634,7 @@
                     } else {
                         // Object
                         const bracket = document.createElement('span');
-                        bracket.className = 'json-bracket';
+                        bracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
                         bracket.textContent = '{';
                         content.appendChild(bracket);
                         
@@ -607,177 +648,290 @@
                         
                         // Closing bracket
                         const closingWrapper = document.createElement('div');
-                        closingWrapper.className = 'json-item relative';
+                        closingWrapper.className = `json-item relative ${layerClass}`;
                         closingWrapper.dataset.key = 'closing';
                         closingWrapper.dataset.parent = key;
                         closingWrapper.dataset.depth = depth;
+                        closingWrapper.dataset.layer = Math.min(depth, 7);
                         
-                        if (depth > 0) {
-                            const indentLine = document.createElement('div');
-                            indentLine.className = 'indent-line';
-                            indentLine.style.left = `${depth * 20}px`;
-                            closingWrapper.appendChild(indentLine);
-                        }
+                        const closingLayerIndicator = document.createElement('div');
+                        closingLayerIndicator.className = 'layer-indicator';
+                        closingLayerIndicator.style.left = `${depth * 24}px`;
+                        closingWrapper.appendChild(closingLayerIndicator);
                         
                         const closingContent = document.createElement('div');
                         closingContent.className = 'json-item-content flex items-start py-1';
-                        closingContent.style.marginLeft = `${depth * 20 + 8}px`;
+                        closingContent.style.marginLeft = `${depth * 24 + 12}px`;
                         const closingBracket = document.createElement('span');
-                        closingBracket.className = 'json-bracket';
+                        closingBracket.className = `json-bracket bracket-layer-${Math.min(depth, 7)}`;
                         closingBracket.textContent = '}';
                         closingContent.appendChild(closingBracket);
                         closingWrapper.appendChild(closingContent);
                         container.appendChild(closingWrapper);
                     }
                 } else {
-                    // Primitive value
-                    const valueElement = document.createElement('span');
-                    valueElement.className = 'json-value';
+                    // Primitive value - make it editable
+                    const valueInput = document.createElement('input');
+                    valueInput.type = 'text';
+                    valueInput.className = 'editable-field value-input';
+                    valueInput.dataset.fieldType = 'value';
+                    valueInput.dataset.key = key;
+                    valueInput.dataset.parentKey = parentKey;
+                    valueInput.dataset.depth = depth;
                     
                     if (typeof data === 'string') {
-                        valueElement.textContent = `"${data}"`;
+                        valueInput.value = data;
                     } else if (typeof data === 'boolean') {
-                        valueElement.textContent = data.toString();
+                        valueInput.value = data.toString();
+                    } else if (data === null) {
+                        valueInput.value = 'null';
                     } else {
-                        valueElement.textContent = data;
+                        valueInput.value = data.toString();
                     }
                     
-                    content.appendChild(valueElement);
+                    content.appendChild(valueInput);
                     wrapper.appendChild(content);
                     container.appendChild(wrapper);
-                }
-                
-                // Add event listeners for editing
-                if (wrapper.dataset.key !== 'closing') {
-                    wrapper.addEventListener('dblclick', () => editElement(wrapper));
-                    wrapper.addEventListener('click', () => selectElement(wrapper));
-                }
-            }
-            
-            // Edit an element
-            function editElement(element) {
-                if (element.dataset.key === 'closing') return;
-                
-                const keyElement = element.querySelector('.json-key');
-                const valueElement = element.querySelector('.json-value');
-                
-                if (keyElement) {
-                    const keyText = keyElement.textContent.replace(/"/g, '').replace(':', '').trim();
-                    const input = document.createElement('input');
-                    input.type = 'text';
-                    input.className = 'editable bg-yellow-100 px-1';
-                    input.value = keyText;
-                    keyElement.replaceWith(input);
-                    input.focus();
                     
-                    input.addEventListener('blur', () => {
-                        const newKey = input.value;
-                        updateKey(element, newKey);
-                        input.replaceWith(keyElement);
-                        keyElement.textContent = `"${newKey}": `;
+                    // Track editable field
+                    editableFields.push({
+                        element: valueInput,
+                        type: 'value',
+                        key: key,
+                        parentKey: parentKey,
+                        depth: depth
                     });
                     
-                    input.addEventListener('keydown', (e) => {
-                        if (e.key === 'Enter') {
-                            input.blur();
-                        }
+                    // Single-click to edit
+                    valueInput.addEventListener('click', (e) => {
+                        e.stopPropagation();
+                        activateField(valueInput);
                     });
-                }
-                
-                if (valueElement) {
-                    const valueText = valueElement.textContent.replace(/"/g, '');
-                    const input = document.createElement('input');
-                    input.type = 'text';
-                    input.className = 'editable bg-yellow-100 px-1';
-                    input.value = valueText;
-                    valueElement.replaceWith(input);
-                    input.focus();
                     
-                    input.addEventListener('blur', () => {
-                        const newValue = parseValue(input.value);
-                        updateValue(element, newValue);
-                        input.replaceWith(valueElement);
-                        valueElement.textContent = formatValue(newValue);
+                    valueInput.addEventListener('focus', () => {
+                        wrapper.classList.add('active');
+                        wrapper.classList.add('editing');
                     });
                     
-                    input.addEventListener('keydown', (e) => {
-                        if (e.key === 'Enter') {
-                            input.blur();
-                        }
+                    valueInput.addEventListener('blur', () => {
+                        wrapper.classList.remove('active');
+                        wrapper.classList.remove('editing');
+                        updateValue(valueInput);
                     });
+                    
+                    valueInput.addEventListener('keydown', handleKeyNavigation);
                 }
             }
             
-            // Parse a value from string to appropriate type
-            function parseValue(value) {
-                if (value === 'true') return true;
-                if (value === 'false') return false;
-                if (value === 'null') return null;
-                if (!isNaN(value) && value.trim() !== '') return Number(value);
-                return value;
+            // Activate a field and set it as current
+            function activateField(input) {
+                currentFieldIndex = editableFields.findIndex(f => f.element === input);
+                if (currentFieldIndex !== -1) {
+                    editableFields.forEach(f => f.element.parentElement.classList.remove('active'));
+                    input.parentElement.classList.add('active');
+                }
             }
             
-            // Format a value for display
-            function formatValue(value) {
-                if (typeof value === 'string') return `"${value}"`;
-                if (typeof value === 'boolean') return value.toString();
-                if (value === null) return 'null';
-                return value;
+            // Handle keyboard navigation
+            function handleKeyNavigation(e) {
+                const input = e.target;
+                const fieldData = editableFields.find(f => f.element === input);
+                
+                if (e.key === 'Tab') {
+                    e.preventDefault();
+                    if (e.shiftKey) {
+                        navigateToField(-1);
+                    } else {
+                        navigateToField(1);
+                    }
+                } else if (e.key === 'Enter' && e.shiftKey) {
+                    e.preventDefault();
+                    // Insert new field after current one
+                    insertNewField(fieldData);
+                } else if (e.key === 'Enter') {
+                    e.preventDefault();
+                    // Navigate to next field
+                    navigateToField(1);
+                }
+            }
+            
+            // Navigate to next/previous field
+            function navigateToField(direction) {
+                const newIndex = currentFieldIndex + direction;
+                if (newIndex >= 0 && newIndex < editableFields.length) {
+                    const nextField = editableFields[newIndex];
+                    nextField.element.focus();
+                    nextField.element.select();
+                    currentFieldIndex = newIndex;
+                }
             }
             
-            // Update a key
-            function updateKey(element, newKey) {
-                const parentKey = element.dataset.parent;
-                const oldKey = element.dataset.key;
+            // Insert a new field after the current one
+            function insertNewField(currentFieldData) {
+                let newData;
+                let insertAfterKey;
                 
-                if (parentKey === 'root') {
-                    const newData = {};
-                    Object.keys(jsonData).forEach(key => {
-                        if (key === oldKey) {
-                            newData[newKey] = jsonData[key];
-                        } else if (key !== newKey) {
-                            newData[key] = jsonData[key];
+                if (currentFieldData.parentKey === 'root') {
+                    newData = {};
+                    insertAfterKey = currentFieldData.key;
+                    
+                    // Get all keys and find insertion point
+                    const keys = Object.keys(jsonData);
+                    const insertIndex = keys.indexOf(insertAfterKey) + 1;
+                    
+                    // Create new object with inserted field
+                    let index = 0;
+                    keys.forEach(key => {
+                        newData[key] = jsonData[key];
+                        if (key === insertAfterKey) {
+                            newData['newField'] = '';
                         }
+                        index++;
                     });
+                    
+                    // If insertAfterKey was the last key, append at end
+                    if (insertIndex >= keys.length) {
+                        newData['newField'] = '';
+                    }
+                    
                     jsonData = newData;
                 } else {
-                    // Find parent in nested structure
-                    const parent = findElementByKey(jsonData, parentKey);
-                    if (parent && typeof parent === 'object') {
-                        const newData = {};
-                        Object.keys(parent).forEach(key => {
-                            if (key === oldKey) {
-                                newData[newKey] = parent[key];
-                            } else if (key !== newKey) {
-                                newData[key] = parent[key];
+                    // Handle nested objects
+                    const parent = findElementByKey(jsonData, currentFieldData.parentKey);
+                    if (parent && typeof parent === 'object' && !Array.isArray(parent)) {
+                        const keys = Object.keys(parent);
+                        insertAfterKey = currentFieldData.key;
+                        
+                        let index = 0;
+                        keys.forEach(key => {
+                            if (key === insertAfterKey && index < keys.length) {
+                                // Insert after this key
+                                const tempData = {};
+                                let inserted = false;
+                                keys.forEach(k => {
+                                    tempData[k] = parent[k];
+                                    if (!inserted && k === insertAfterKey) {
+                                        tempData['newField'] = '';
+                                        inserted = true;
+                                    }
+                                });
+                                // Clear parent
+                                Object.keys(parent).forEach(k => delete parent[k]);
+                                Object.assign(parent, tempData);
                             }
+                            index++;
                         });
-                        Object.keys(parent).forEach(key => delete parent[key]);
-                        Object.assign(parent, newData);
                     }
                 }
                 
-                element.dataset.key = newKey;
+                // Re-render and focus on new field
+                renderEditor();
+                updateOutput();
+                saveToHistory();
+                
+                // Find and focus the new field
+                setTimeout(() => {
+                    const newField = editableFields.find(f => f.key === 'newField');
+                    if (newField) {
+                        newField.element.focus();
+                        newField.element.select();
+                    }
+                }, 100);
+                
+                showSavedIndicator();
+            }
+            
+            // Update a key from input
+            function updateKey(input) {
+                const newKey = input.value.trim();
+                const oldKey = input.dataset.originalKey || input.value;
+                const parentKey = input.dataset.parentKey;
+                
+                // Only save if value actually changed
+                if (newKey === oldKey) return;
+                
+                input.dataset.originalKey = newKey;
+                
+                if (parentKey === 'root') {
+                    // Root level
+                    const value = jsonData[oldKey];
+                    delete jsonData[oldKey];
+                    jsonData[newKey] = value;
+                } else {
+                    // Nested level
+                    const parent = findElementByKey(jsonData, parentKey);
+                    if (parent && typeof parent === 'object' && !Array.isArray(parent)) {
+                        const value = parent[oldKey];
+                        delete parent[oldKey];
+                        parent[newKey] = value;
+                    }
+                }
+                
+                // Update tracking
+                const fieldData = editableFields.find(f => f.element === input);
+                if (fieldData) {
+                    fieldData.key = newKey;
+                }
+                
                 updateOutput();
                 saveToHistory();
+                showSavedIndicator();
             }
             
-            // Update a value
-            function updateValue(element, newValue) {
-                const key = element.dataset.key;
-                const parentKey = element.dataset.parent;
+            // Update a value from input
+            function updateValue(input) {
+                const rawValue = input.value.trim();
+                const parsedValue = parseValue(rawValue);
+                const key = input.dataset.key;
+                const parentKey = input.dataset.parentKey;
+                
+                // Only save if value actually changed
+                const currentValue = getNestedValue(jsonData, parentKey, key);
+                if (JSON.stringify(currentValue) === JSON.stringify(parsedValue)) return;
                 
                 if (parentKey === 'root') {
-                    jsonData[key] = newValue;
+                    jsonData[key] = parsedValue;
                 } else {
                     const parent = findElementByKey(jsonData, parentKey);
                     if (parent && typeof parent === 'object') {
-                        parent[key] = newValue;
+                        parent[key] = parsedValue;
                     }
                 }
                 
                 updateOutput();
                 saveToHistory();
+                showSavedIndicator();
+            }
+            
+            // Get nested value
+            function getNestedValue(obj, parentKey, key) {
+                if (parentKey === 'root') {
+                    return obj[key];
+                }
+                const parent = findElementByKey(obj, parentKey);
+                if (parent && typeof parent === 'object') {
+                    return parent[key];
+                }
+                return undefined;
+            }
+            
+            // Parse a value from string to appropriate type
+            function parseValue(value) {
+                if (value === 'true') return true;
+                if (value === 'false') return false;
+                if (value === 'null') return null;
+                if (!isNaN(value) && value.trim() !== '' && !isNaN(Number(value))) {
+                    return Number(value);
+                }
+                return value;
+            }
+            
+            // Show saved indicator
+            function showSavedIndicator() {
+                savedIndicator.classList.add('show');
+                setTimeout(() => {
+                    savedIndicator.classList.remove('show');
+                }, 1500);
             }
             
             // Find an element by key in nested structure
@@ -794,23 +948,14 @@
                 return null;
             }
             
-            // Select an element
-            function selectElement(element) {
-                if (selectedElement) {
-                    selectedElement.classList.remove('selected');
-                }
-                
-                element.classList.add('selected');
-                selectedElement = element;
-            }
-            
-            // Update JSON output
+            // Update JSON output with colored brackets
             function updateOutput() {
                 if (isApplyingChanges) return;
                 try {
-                    jsonOutput.value = JSON.stringify(jsonData, null, 2);
+                    const jsonString = JSON.stringify(jsonData, null, 2);
+                    jsonOutput.value = jsonString;
                     jsonOutput.classList.remove('error-highlight');
-                    jsonOutput.style.borderColor = '#d1d5db';
+                    jsonOutput.style.borderColor = '#10b981';
                     validationStatus.innerHTML = '<i class="fas fa-check-circle text-green-500"></i><span class="text-green-600">Valid JSON</span>';
                 } catch (e) {
                     jsonOutput.value = 'Invalid JSON structure';
@@ -860,6 +1005,17 @@
                 }
             });
             
+            // Auto-apply on blur (when clicking away)
+            jsonOutput.addEventListener('blur', () => {
+                const autoSaveStatus = document.getElementById('autoSaveStatus');
+                if (applyCodeChanges()) {
+                    autoSaveStatus.classList.remove('hidden');
+                    setTimeout(() => {
+                        autoSaveStatus.classList.add('hidden');
+                    }, 2000);
+                }
+            }, true);
+            
             // Show notification
             function showNotification(message) {
                 const notificationContent = notification.querySelector('p');
@@ -878,6 +1034,17 @@
                     history = history.slice(0, historyIndex + 1);
                 }
                 
+                // Limit history size
+                if (history.length >= MAX_HISTORY) {
+                    history.shift();
+                    historyIndex--;
+                }
+                
+                // Don't save if it's the same as current
+                if (history.length > 0 && JSON.stringify(history[historyIndex]) === JSON.stringify(jsonData)) {
+                    return;
+                }
+                
                 history.push(JSON.parse(JSON.stringify(jsonData)));
                 historyIndex = history.length - 1;
             }
@@ -1062,7 +1229,7 @@
             
             // Instructions button
             document.getElementById('instructionsBtn').addEventListener('click', () => {
-                showNotification('Visual: Double-click to edit | Code: Type and click Apply or Ctrl+Enter');
+                showNotification('Visual: Single-click to edit • Tab/Shift+Tab to navigate • Shift+Enter for new field • Auto-save enabled');
             });
             
             // Sample JSON button

style.css

@@ -26,3 +26,104 @@ p {
 .card p:last-child {
 	margin-bottom: 0;
 }
+
+/* LCARS-style layer colors */
+.lcars-layer-0 { --layer-color: #ef4444; }
+.lcars-layer-1 { --layer-color: #f97316; }
+.lcars-layer-2 { --layer-color: #eab308; }
+.lcars-layer-3 { --layer-color: #22c55e; }
+.lcars-layer-4 { --layer-color: #06b6d4; }
+.lcars-layer-5 { --layer-color: #3b82f6; }
+.lcars-layer-6 { --layer-color: #8b5cf6; }
+.lcars-layer-7 { --layer-color: #ec4899; }
+
+/* Layer indicator line */
+.layer-indicator {
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	background: var(--layer-color);
+	border-radius: 0 4px 4px 0;
+	box-shadow: 2px 0 8px var(--layer-color);
+}
+
+/* LCARS horizontal connector */
+.lcars-connector {
+	position: absolute;
+	left: 4px;
+	top: 50%;
+	height: 2px;
+	width: calc(100% - 4px);
+	background: var(--layer-color);
+	opacity: 0.4;
+}
+
+/* Active row - bold text instead of background */
+.json-item.active {
+	background-color: transparent;
+}
+
+.json-item.active .json-key,
+.json-item.active .json-value {
+	font-weight: bold;
+	text-shadow: 0 0 10px var(--layer-color);
+}
+
+/* Saved indicator */
+.saved-indicator {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	background: linear-gradient(135deg, #10b981, #059669);
+	color: white;
+	padding: 12px 24px;
+	border-radius: 8px;
+	font-weight: bold;
+	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+	transform: translateY(100px);
+	transition: transform 0.3s ease;
+	z-index: 1000;
+}
+
+.saved-indicator.show {
+	transform: translateY(0);
+}
+
+/* Editable fields styling */
+.editable-field {
+	border: none;
+	background: transparent;
+	padding: 2px 4px;
+	border-radius: 4px;
+	font-family: inherit;
+	font-size: inherit;
+	width: auto;
+	min-width: 30px;
+	transition: all 0.2s ease;
+}
+
+.editable-field:focus {
+	outline: none;
+	background: rgba(255,255,255,0.15);
+	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3);
+}
+
+.editable-field.key-input {
+	color: #93c5fd;
+}
+
+.editable-field.value-input {
+	color: #6ee7b7;
+}
+
+/* New field indicator */
+.new-field-highlight {
+	animation: pulse-green 1s ease-in-out infinite;
+}
+
+@keyframes pulse-green {
+	0%, 100% { background-color: rgba(34, 197, 94, 0.2); }
+	50% { background-color: rgba(34, 197, 94, 0.4); }
+}