feat: Add JSON repair functionality to JSON utility

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@nuxtjs/tailwindcss": "^6.12.2",
+    "jsonrepair": "^3.8.1",
     "nuxt": "^3.13.2",
     "nuxt-icon": "^1.0.0-beta.7",
     "qrcode-vue3": "^1.7.1",

pages/utils/json.vue

@@ -57,6 +57,11 @@
           <Icon name="mdi:format-quote-open" class="w-5 h-5 mr-2" />
           Unescape
         </button>
+        <button @click="repairJSON"
+          class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 flex items-center">
+          <Icon name="mdi:wrench" class="w-5 h-5 mr-2" />
+          Repair
+        </button>
       </div>
 
       <!-- Error message -->
@@ -73,6 +78,8 @@
 </template>
 
 <script setup>
+import { jsonrepair } from 'jsonrepair'
+
 const jsonInput = ref('')
 const hasError = ref(false)
 const errorMessage = ref('')
@@ -323,6 +330,40 @@ const unescapeJSON = () => {
   }
 }
 
+const repairJSON = () => {
+  try {
+    if (!jsonInput.value.trim()) {
+      return
+    }
+
+    const MAX_INPUT_SIZE = 1024 * 1024 // 1MB limit
+    if (jsonInput.value.length > MAX_INPUT_SIZE) {
+      hasError.value = true
+      errorMessage.value = 'Input too large for repair operation'
+      return
+    }
+
+    // Attempt to repair the malformed JSON
+    const repaired = jsonrepair(jsonInput.value)
+    jsonInput.value = repaired
+
+    hasError.value = false
+    errorMessage.value = ''
+    showSuccess.value = true
+    errorLocation.value = { line: 0, column: 0 }
+    updateHighlighting(null)
+
+    setTimeout(() => {
+      showSuccess.value = false
+    }, 3000)
+  } catch (e) {
+    hasError.value = true
+    errorMessage.value = `Repair failed: ${e.message}`
+    errorLocation.value = parseErrorPosition(e)
+    updateHighlighting(errorLocation.value)
+  }
+}
+
 
 // Initialize highlighting
 onMounted(() => {