readonly fields

debug

@@ -1 +0,0 @@
-/Users/user/Documents/dev/openfreemap/repo/website/public/debug

website/public/debug/lang/mix.html

@@ -21,6 +21,13 @@
                         id="line1"
                         class="w-full px-3 py-1.5 text-sm border border-gray-600 rounded bg-gray-800 text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-mono"
                     />
+                    <input
+                        type="text"
+                        id="line1-expr"
+                        readonly
+                        class="w-full px-3 py-1 text-xs border border-gray-700 rounded bg-gray-950 text-gray-500 font-mono mt-1"
+
+                    />
                 </div>
 
                 <div class="flex-1">
@@ -32,6 +39,13 @@
                         id="line2"
                         class="w-full px-3 py-1.5 text-sm border border-gray-600 rounded bg-gray-800 text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-mono"
                     />
+                    <input
+                        type="text"
+                        id="line2-expr"
+                        readonly
+                        class="w-full px-3 py-1 text-xs border border-gray-700 rounded bg-gray-950 text-gray-500 font-mono mt-1"
+
+                    />
                 </div>
 
                 <div class="w-24">
@@ -89,4 +103,4 @@
     <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
     <script src="mix.js"></script>
 </body>
-</html>
+</html>

website/public/debug/lang/mix.js

@@ -13,6 +13,8 @@ const map = new maplibregl.Map({
 const line1Input = document.getElementById('line1')
 const line2Input = document.getElementById('line2')
 const langInput = document.getElementById('lang')
+const line1ExprInput = document.getElementById('line1-expr')
+const line2ExprInput = document.getElementById('line2-expr')
 
 map.on('load', () => {
   const params = new URLSearchParams(window.location.search)
@@ -41,6 +43,7 @@ function initializeInputListeners() {
 
   const handleInput = () => {
     updateParamsFromInputs()
+    updateExpressionDisplays()
     debouncedApplyConfig()
   }
 
@@ -88,9 +91,10 @@ function applyConfiguration() {
     style,
     line1Config: line1 ?? '',
     line2Config: line2 ?? '',
-    langCode: lang || 'en',
+    langCode: lang,
   })
   map.setStyle(style, { diff: true })
+  updateExpressionDisplays()
 }
 
 function syncInputsFromParams() {
@@ -113,6 +117,17 @@ function updateParamsFromInputs() {
   window.history.replaceState({}, '', newUrl)
 }
 
+function updateExpressionDisplays() {
+  const { line1, line2, lang } = parseParams()
+  const langCode = lang
+
+  const line1Expr = buildFieldAccessor(line1 ?? '', langCode)
+  const line2Expr = buildFieldAccessor(line2 ?? '', langCode)
+
+  line1ExprInput.value = line1Expr ? JSON.stringify(line1Expr) : ''
+  line2ExprInput.value = line2Expr ? JSON.stringify(line2Expr) : ''
+}
+
 // ============================================
 // 4. STYLE MODIFICATION
 // ============================================
@@ -165,7 +180,7 @@ function parseParams() {
   return {
     line1: params.get('line1'),
     line2: params.get('line2'),
-    lang: params.get('lang'),
+    lang: params.get('lang') || 'en',
   }
 }