feat(catalog): inspect Nitro scales and preview original sprites

src/app/admin/import/furni/nitro-editor-dialog.tsx

@@ -18,6 +18,7 @@ import {
 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
+import { NitroQualityPanel } from "@/components/admin/studio/nitro-quality-panel";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -221,16 +222,16 @@ export function NitroEditorDialog({
 	}, [open, classname, fetchMetadata]);
 
 	const handleTabChange = (newTab: string) => {
-		if (activeTab === "json" && newTab === "visual") {
+		if (activeTab === "json" && newTab !== "json") {
 			try {
 				const parsed = JSON.parse(jsonText);
 				setMetadata(parsed);
 				setJsonError(null);
 			} catch {
-				toast.error("Invalid JSON — fix it before switching to Visual tab");
+				toast.error("Invalid JSON — fix it before switching tabs");
 				return;
 			}
-		} else if (activeTab === "visual" && newTab === "json") {
+		} else if (activeTab !== "json" && newTab === "json") {
 			setJsonText(JSON.stringify(metadata, null, 2));
 		}
 		setActiveTab(newTab);
@@ -430,6 +431,7 @@ export function NitroEditorDialog({
 									<Box className="w-3.5 h-3.5" />
 									Visual
 								</TabsTrigger>
+								<TabsTrigger value="quality">32 / 64</TabsTrigger>
 								<TabsTrigger value="json" className="gap-1.5">
 									{"{ }"}
 									JSON
@@ -437,6 +439,12 @@ export function NitroEditorDialog({
 							</TabsList>
 						</div>
 
+						<TabsContent
+							value="quality"
+							className="min-h-0 overflow-y-auto flex-1 px-4 sm:px-6 py-4"
+						>
+							<NitroQualityPanel classname={classname} />
+						</TabsContent>
 						{/* ── Visual Tab ── */}
 						<TabsContent
 							value="visual"