🐳 10/02 - 13:42 - 1. There's still a problem awt the top with the mess of .btn {transition.....2. I pasted a small json in the irght and it still doens't show up (right side typing should show up in

index.html

@@ -20,207 +20,7 @@
             }
         }
     </script>
-    
-        .btn {
-            transition: all 0.2s ease;
-        }
-        .btn:hover {
-            transform: translateY(-2px);
-        }
-        .indent-line {
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            width: 2px;
-        }
-        .toolbar-btn {
-            transition: all 0.2s;
-        }
-        .toolbar-btn:hover {
-            background-color: #475569;
-        }
-        .toolbar-btn.active {
-            background-color: #60a5fa;
-            color: white;
-        }
-        .notification {
-            transform: translateX(100%);
-            transition: transform 0.3s ease;
-        }
-        .notification.show {
-            transform: translateX(0);
-        }
-        .error-highlight {
-            background-color: rgba(239, 68, 68, 0.1);
-            border-left: 3px solid #ef4444;
-        }
-        .menu-bar {
-            background-color: #334155;
-            padding: 8px 16px;
-            border-radius: 8px;
-            margin-bottom: 16px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-        }
-        .menu-item {
-            color: #cbd5e1;
-            padding: 8px 12px;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: all 0.2s;
-            margin-right: 4px;
-        }
-        .menu-item:hover {
-            background-color: #475569;
-        }
-        .menu-item.active {
-            background-color: #60a5fa;
-            color: white;
-        }
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: #334155;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
-            z-index: 1;
-            border-radius: 4px;
-            overflow: hidden;
-        }
-        .dropdown-content a {
-            color: #cbd5e1;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-        }
-        .dropdown-content a:hover {
-            background-color: #475569;
-        }
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.5);
-        }
-        .modal-content {
-            background-color: #334155;
-            margin: 10% auto;
-            padding: 20px;
-            border-radius: 8px;
-            width: 80%;
-            max-width: 600px;
-            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-            color: #f1f5f9;
-        }
-        .close {
-            color: #94a3b8;
-            float: right;
-            font-size: 28px;
-            font-weight: bold;
-            cursor: pointer;
-        }
-        .close:hover {
-            color: #f1f5f9;
-        }
-        .boolean-select {
-            background-color: #475569;
-            color: #f1f5f9;
-            border: 1px solid #64748b;
-            border-radius: 4px;
-            padding: 2px 4px;
-        }
-        
-        /* Code Editor bracket coloring */
-        #jsonOutput {
-            line-height: 1.6;
-        }
-        
-        .bracket-layer-0 { color: #ef4444; text-shadow: 0 0 5px rgba(239, 68, 68, 0.5); }
-        .bracket-layer-1 { color: #f97316; text-shadow: 0 0 5px rgba(249, 115, 22, 0.5); }
-        .bracket-layer-2 { color: #eab308; text-shadow: 0 0 5px rgba(234, 179, 8, 0.5); }
-        .bracket-layer-3 { color: #22c55e; text-shadow: 0 0 5px rgba(34, 197, 94, 0.5); }
-        .bracket-layer-4 { color: #06b6d4; text-shadow: 0 0 5px rgba(6, 182, 212, 0.5); }
-        .bracket-layer-5 { color: #3b82f6; text-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
-        .bracket-layer-6 { color: #8b5cf6; text-shadow: 0 0 5px rgba(139, 92, 246, 0.5); }
-        .bracket-layer-7 { color: #ec4899; text-shadow: 0 0 5px rgba(236, 72, 153, 0.5); }
-        
-        /* JSON Editor styles */
-        .json-editor {
-            background-color: #1e293b;
-            border: 1px solid #334155;
-        }
-        
-        .json-item {
-            transition: all 0.15s ease;
-        }
-        
-        .json-item:hover {
-            background-color: rgba(255, 255, 255, 0.02);
-        }
-        
-        .json-item:hover .json-key,
-        .json-item:hover .json-value {
-            text-shadow: 0 0 8px var(--layer-color, #3b82f6);
-        }
-        
-        .json-item.active .json-key,
-        .json-item.active .json-value {
-            font-weight: bold;
-            text-shadow: 0 0 10px var(--layer-color, #3b82f6);
-        }
-        
-        .json-bracket {
-            font-weight: bold;
-        }
-        
-        .json-key {
-            transition: all 0.15s ease;
-        }
-        
-        .json-value {
-            transition: all 0.15s ease;
-        }
-        
-        /* Editable fields - clean and minimal */
-        .editable-field {
-            background: rgba(255, 255, 255, 0.1);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            color: #f8fafc;
-            padding: 2px 6px;
-            border-radius: 4px;
-            font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
-            font-size: inherit;
-            width: auto;
-            min-width: 50px;
-            outline: none;
-            transition: all 0.2s ease;
-        }
-        
-        .editable-field:focus {
-            background: rgba(255, 255, 255, 0.15);
-            border-color: rgba(255, 255, 255, 0.4);
-            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
-        }
-        
-        .editable-field.key-input {
-            color: #93c5fd;
-        }
-        
-        .editable-field.value-input {
-            color: #6ee7b7;
-        }
-    </style>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body class="bg-slate-900 min-h-screen p-4 md:p-8">
     <div class="max-w-6xl mx-auto">
@@ -573,6 +373,20 @@
                         keySpan.className = 'json-key';
                         keySpan.textContent = `"${key}"`;
                         keySpan.style.color = '#93c5fd';
+                        keySpan.dataset.key = key;
+                        keySpan.dataset.parent = parentKey;
+                        keySpan.dataset.type = 'key';
+                        keySpan.style.cursor = 'pointer';
+                        
+                        // Track for tab navigation
+                        editableFields.push({ element: keySpan, key, parentKey, type: 'key' });
+                        
+                        // Single-click to edit
+                        keySpan.addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            makeEditable(keySpan, key, parentKey, 'key');
+                        });
+                        
                         content.appendChild(keySpan);
                         
                         const colon = document.createElement('span');
@@ -582,6 +396,57 @@
                     }
                     
                     // Value or children
+                } else {
+                    // Primitive value (string, number, boolean, null)
+                    const valueSpan = document.createElement('span');
+                    valueSpan.className = 'json-value';
+                    
+                    if (key !== 'root') {
+                        valueSpan.dataset.key = key;
+                        valueSpan.dataset.parent = parentKey;
+                        valueSpan.dataset.type = 'value';
+                        valueSpan.style.color = '#6ee7b7';
+                        
+                        // Format the value display
+                        if (typeof data === 'string') {
+                            valueSpan.textContent = `"${data}"`;
+                        } else if (data === null) {
+                            valueSpan.textContent = 'null';
+                            valueSpan.style.color = '#f87171';
+                        } else if (typeof data === 'boolean') {
+                            valueSpan.textContent = data.toString();
+                            valueSpan.style.color = data ? '#22c55e' : '#ef4444';
+                        } else if (typeof data === 'number') {
+                            valueSpan.textContent = data.toString();
+                            valueSpan.style.color = '#fbbf24';
+                        }
+                        
+                        // Single-click to edit
+                        valueSpan.style.cursor = 'pointer';
+                        valueSpan.addEventListener('click', (e) => {
+                            e.stopPropagation();
+                            makeEditable(valueSpan, key, parentKey, 'value');
+                        });
+                    } else {
+                        if (typeof data === 'string') {
+                            valueSpan.textContent = `"${data}"`;
+                        } else if (data === null) {
+                            valueSpan.textContent = 'null';
+                            valueSpan.style.color = '#f87171';
+                        } else if (typeof data === 'boolean') {
+                            valueSpan.textContent = data.toString();
+                            valueSpan.style.color = data ? '#22c55e' : '#ef4444';
+                        } else if (typeof data === 'number') {
+                            valueSpan.textContent = data.toString();
+                            valueSpan.style.color = '#fbbf24';
+                        }
+                    }
+                    
+                    content.appendChild(valueSpan);
+                    wrapper.appendChild(content);
+                    container.appendChild(wrapper);
+                }
+                
                 if (typeof data === 'object' && data !== null) {
                     if (Array.isArray(data)) {
                         // Array
@@ -658,7 +523,109 @@
                         closingWrapper.appendChild(closingContent);
                         container.appendChild(closingWrapper);
                     }
+                }
+            }
+            
+            // Make a span editable
+            function makeEditable(span, key, parentKey, type) {
+                const currentValue = type === 'value' 
+                    ? (typeof jsonData === 'object' && parentKey === 'root' ? jsonData[key] : getNestedValue(jsonData, parentKey, key))
+                    : key;
                 
+                const input = document.createElement('input');
+                input.type = 'text';
+                input.className = `editable-field ${type === 'key' ? 'key-input' : 'value-input'}`;
+                input.value = type === 'value' && typeof currentValue === 'string' ? currentValue : String(currentValue);
+                
+                // Track this field for tab navigation
+                const fieldData = { element: input, key, parentKey, type };
+                const fieldIndex = editableFields.findIndex(f => f.element === span);
+                if (fieldIndex !== -1) {
+                    editableFields[fieldIndex] = fieldData;
+                    currentFieldIndex = fieldIndex;
+                } else {
+                    editableFields.push(fieldData);
+                    currentFieldIndex = editableFields.length - 1;
+                }
+                
+                // Handle keyboard navigation
+                input.addEventListener('keydown', (e) => {
+                    if (e.key === 'Tab') {
+                        e.preventDefault();
+                        navigateToField(e.shiftKey ? -1 : 1);
+                    } else if (e.key === 'Enter') {
+                        e.preventDefault();
+                        navigateToField(1);
+                    } else if (e.shiftKey && e.key === 'Enter') {
+                        e.preventDefault();
+                        // Insert new field
+                        input.blur();
+                        insertNewField({ key, parentKey });
+                    }
+                });
+                
+                // Handle blur (save on exit)
+                input.addEventListener('blur', () => {
+                    const newValue = input.value.trim();
+                    
+                    if (type === 'key') {
+                        // Update key
+                        if (newValue && newValue !== key) {
+                            if (parentKey === 'root') {
+                                const value = jsonData[key];
+                                delete jsonData[key];
+                                jsonData[newValue] = value;
+                            } else {
+                                const parent = findElementByKey(jsonData, parentKey);
+                                if (parent && typeof parent === 'object') {
+                                    const value = parent[key];
+                                    delete parent[key];
+                                    parent[newValue] = value;
+                                }
+                            }
+                        }
+                    } else {
+                        // Update value
+                        const parsedValue = parseValue(newValue);
+                        if (parentKey === 'root') {
+                            jsonData[key] = parsedValue;
+                        } else {
+                            const parent = findElementByKey(jsonData, parentKey);
+                            if (parent && typeof parent === 'object') {
+                                parent[key] = parsedValue;
+                            }
+                        }
+                    }
+                    
+                    renderEditor();
+                    updateOutput();
+                    saveToHistory();
+                    showSavedIndicator();
+                });
+                
+                // Replace span with input
+                span.parentNode.replaceChild(input, span);
+                input.focus();
+                input.select();
+            }
+            
+            // Navigate to next/previous field
+            function navigateToField(direction) {
+                const newIndex = currentFieldIndex + direction;
+                if (newIndex >= 0 && newIndex < editableFields.length) {
+                    const field = editableFields[newIndex];
+                    currentFieldIndex = newIndex;
+                    
+                    // Click on the corresponding span to make it editable
+                    const allSpans = document.querySelectorAll('.json-key, .json-value');
+                    allSpans.forEach(span => {
+                        if ((span.dataset.key === field.key && span.dataset.type === field.type) ||
+                            (field.type === 'key' && span.classList.contains('json-key') && span.textContent.includes(field.key)) ||
+                            (field.type === 'value' && span.classList.contains('json-value'))) {
+                            span.click();
+                        }
+                    });
+                }
             }
             
             
@@ -836,12 +803,18 @@
                 }
             }
             
-            // Real-time validation of code editor
+            // Real-time validation and sync of code editor
             jsonOutput.addEventListener('input', () => {
                 try {
-                    JSON.parse(jsonOutput.value);
+                    const parsed = JSON.parse(jsonOutput.value);
                     jsonOutput.style.borderColor = '#10b981';
                     validationStatus.innerHTML = '<i class="fas fa-check-circle text-green-500"></i><span class="text-green-600">Valid JSON</span>';
+                    
+                    // Real-time sync: Update visual editor when valid JSON is typed
+                    if (!isApplyingChanges) {
+                        jsonData = parsed;
+                        renderEditor();
+                    }
                 } catch (e) {
                     jsonOutput.style.borderColor = '#ef4444';
                     validationStatus.innerHTML = '<i class="fas fa-exclamation-circle text-red-500"></i><span class="text-red-600">Invalid JSON</span>';

style.css

@@ -1,32 +1,195 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    padding: 2rem;
+    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+    font-size: 16px;
+    margin-top: 0;
 }
 
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+    color: rgb(107, 114, 128);
+    font-size: 15px;
+    margin-bottom: 10px;
+    margin-top: 5px;
 }
 
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+    max-width: 620px;
+    margin: 0 auto;
+    padding: 16px;
+    border: 1px solid lightgray;
+    border-radius: 16px;
 }
 
 .card p:last-child {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
 
+/* Button and toolbar styles */
+.btn {
+    transition: all 0.2s ease;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+}
+
+.indent-line {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+}
+
+.toolbar-btn {
+    transition: all 0.2s;
+}
+
+.toolbar-btn:hover {
+    background-color: #475569;
+}
+
+.toolbar-btn.active {
+    background-color: #60a5fa;
+    color: white;
+}
+
+/* Notification styles */
+.notification {
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+}
+
+.notification.show {
+    transform: translateX(0);
+}
+
+/* Error highlight */
+.error-highlight {
+    background-color: rgba(239, 68, 68, 0.1);
+    border-left: 3px solid #ef4444;
+}
+
+/* Menu bar styles */
+.menu-bar {
+    background-color: #334155;
+    padding: 8px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.menu-item {
+    color: #cbd5e1;
+    padding: 8px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    margin-right: 4px;
+}
+
+.menu-item:hover {
+    background-color: #475569;
+}
+
+.menu-item.active {
+    background-color: #60a5fa;
+    color: white;
+}
+
+/* Dropdown styles */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #334155;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+    z-index: 1;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.dropdown-content a {
+    color: #cbd5e1;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {
+    background-color: #475569;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/* Modal styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+    background-color: #334155;
+    margin: 10% auto;
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 600px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    color: #f1f5f9;
+}
+
+.close {
+    color: #94a3b8;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover {
+    color: #f1f5f9;
+}
+
+/* Boolean select */
+.boolean-select {
+    background-color: #475569;
+    color: #f1f5f9;
+    border: 1px solid #64748b;
+    border-radius: 4px;
+    padding: 2px 4px;
+}
+
+/* Code Editor bracket coloring */
+#jsonOutput {
+    line-height: 1.6;
+}
+
+.bracket-layer-0 { color: #ef4444; text-shadow: 0 0 5px rgba(239, 68, 68, 0.5); }
+.bracket-layer-1 { color: #f97316; text-shadow: 0 0 5px rgba(249, 115, 22, 0.5); }
+.bracket-layer-2 { color: #eab308; text-shadow: 0 0 5px rgba(234, 179, 8, 0.5); }
+.bracket-layer-3 { color: #22c55e; text-shadow: 0 0 5px rgba(34, 197, 94, 0.5); }
+.bracket-layer-4 { color: #06b6d4; text-shadow: 0 0 5px rgba(6, 182, 212, 0.5); }
+.bracket-layer-5 { color: #3b82f6; text-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
+.bracket-layer-6 { color: #8b5cf6; text-shadow: 0 0 5px rgba(139, 92, 246, 0.5); }
+.bracket-layer-7 { color: #ec4899; text-shadow: 0 0 5px rgba(236, 72, 153, 0.5); }
+
 /* LCARS-style layer colors */
 .lcars-layer-0 { --layer-color: #ef4444; }
 .lcars-layer-1 { --layer-color: #f97316; }
@@ -39,91 +202,123 @@ p {
 
 /* 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);
+    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;
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    height: 2px;
+    width: calc(100% - 4px);
+    background: var(--layer-color);
+    opacity: 0.4;
+}
+
+/* JSON Editor styles */
+.json-editor {
+    background-color: #1e293b;
+    border: 1px solid #334155;
+}
+
+.json-item {
+    transition: all 0.15s ease;
+    position: relative;
+}
+
+.json-item:hover {
+    background-color: rgba(255, 255, 255, 0.02);
+}
+
+.json-item:hover .json-key,
+.json-item:hover .json-value {
+    text-shadow: 0 0 8px var(--layer-color, #3b82f6);
 }
 
 /* Active row - bold text instead of background */
 .json-item.active {
-	background-color: transparent;
+    background-color: transparent;
 }
 
 .json-item.active .json-key,
 .json-item.active .json-value {
-	font-weight: bold;
-	text-shadow: 0 0 10px var(--layer-color);
+    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;
+.json-bracket {
+    font-weight: bold;
 }
 
-.saved-indicator.show {
-	transform: translateY(0);
+.json-key {
+    transition: all 0.15s ease;
+}
+
+.json-value {
+    transition: all 0.15s ease;
 }
 
-/* Editable fields styling */
+/* Editable fields styling - clean and minimal */
 .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;
+    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;
+    outline: none;
 }
 
 .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);
+    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;
+    color: #93c5fd;
 }
 
 .editable-field.value-input {
-	color: #6ee7b7;
+    color: #6ee7b7;
 }
 
-/* New field indicator */
+/* 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);
+}
+
+/* New field highlight animation */
 .new-field-highlight {
-	animation: pulse-green 1s ease-in-out infinite;
+    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); }
-}
+    0%, 100% { background-color: rgba(34, 197, 94, 0.2); }
+    50% { background-color: rgba(34, 197, 94, 0.4); }
+}