🐳 10/02 - 13:30 - ** NONONO its turned ugly now--make it go back to the visualization it was before!! the very nice subtle highlightsa and NO textboxes until ONE is clicked on

index.html

@@ -20,58 +20,7 @@
             }
         }
     </script>
-    <style>
-        .json-editor {
-            min-height: 500px;
-            max-height: 70vh;
-            overflow-y: auto;
-            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: 4px 0;
-            border-radius: 6px;
-            background-color: rgba(30, 41, 59, 0.6);
-            position: relative;
-            display: flex;
-            align-items: center;
-        }
-        .json-item-content {
-            padding: 6px 12px;
-            margin-left: 0;
-            display: inline-flex;
-            align-items: center;
-            min-width: 200px;
-            gap: 8px;
-        }
-        .json-item:hover .json-item-content {
-            background-color: rgba(51, 65, 85, 0.5);
-        }
-        .json-item.active .json-item-content {
-            background-color: rgba(51, 65, 85, 0.7);
-        }
-        .json-item.editing .json-item-content {
-            background-color: rgba(100, 116, 139, 0.5);
-        }
-        .json-key {
-            font-weight: 500;
-            color: #93c5fd;
-            margin-right: 4px;
-        }
-        .json-value {
-            color: #6ee7b7;
-        }
-        .json-bracket {
-            font-weight: bold;
-            font-family: monospace;
-        }
+    
         .btn {
             transition: all 0.2s ease;
         }
@@ -520,77 +469,7 @@
                 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 ${layerClass}`;
-                wrapper.dataset.key = key;
-                wrapper.dataset.parent = parentKey;
-                wrapper.dataset.depth = depth;
-                wrapper.dataset.layer = Math.min(depth, 7);
-                
-                // 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 * 24 + 12}px`;
-                
-                // Key - make it editable with single click
-                if (key !== null && key !== 'root') {
-                    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
                 if (typeof data === 'object' && data !== null) {
@@ -669,102 +548,14 @@
                         closingWrapper.appendChild(closingContent);
                         container.appendChild(closingWrapper);
                     }
-                } else {
-                    // 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') {
-                        valueInput.value = data;
-                    } else if (typeof data === 'boolean') {
-                        valueInput.value = data.toString();
-                    } else if (data === null) {
-                        valueInput.value = 'null';
-                    } else {
-                        valueInput.value = data.toString();
-                    }
-                    
-                    content.appendChild(valueInput);
-                    wrapper.appendChild(content);
-                    container.appendChild(wrapper);
-                    
-                    // Track editable field
-                    editableFields.push({
-                        element: valueInput,
-                        type: 'value',
-                        key: key,
-                        parentKey: parentKey,
-                        depth: depth
-                    });
-                    
-                    // Single-click to edit
-                    valueInput.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        activateField(valueInput);
-                    });
-                    
-                    valueInput.addEventListener('focus', () => {
-                        wrapper.classList.add('active');
-                        wrapper.classList.add('editing');
-                    });
-                    
-                    valueInput.addEventListener('blur', () => {
-                        wrapper.classList.remove('active');
-                        wrapper.classList.remove('editing');
-                        updateValue(valueInput);
-                    });
-                    
-                    valueInput.addEventListener('keydown', handleKeyNavigation);
-                }
+                
             }
             
-            // 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');
-                }
-            }
             
-            // 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;
-                }
-            }
+            
+            
+            
             
             // Insert a new field after the current one
             function insertNewField(currentFieldData) {
@@ -841,67 +632,9 @@
                 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 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] = parsedValue;
-                } else {
-                    const parent = findElementByKey(jsonData, parentKey);
-                    if (parent && typeof parent === 'object') {
-                        parent[key] = parsedValue;
-                    }
-                }
-                
-                updateOutput();
-                saveToHistory();
-                showSavedIndicator();
-            }
+            
+            
             
             // Get nested value
             function getNestedValue(obj, parentKey, key) {