feat: update file import/export to use .yvsnap extension instead of .json

src/App.tsx

@@ -38,7 +38,7 @@ function App() {
   const handleImportFile = useCallback(() => {
     const input = document.createElement('input');
     input.type = 'file';
-    input.accept = '.json';
+    input.accept = '.yvsnap';
     input.onchange = (e) => {
       const file = (e.target as HTMLInputElement).files?.[0];
       if (file) {
@@ -64,7 +64,7 @@ function App() {
     const blob = new Blob([json], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
-    link.download = `${snap.meta.title || 'canvas'}.json`;
+    link.download = `${snap.meta.title || 'canvas'}.yvsnap`;
     link.href = url;
     link.click();
     URL.revokeObjectURL(url);

src/components/MainScreen.tsx

@@ -33,7 +33,7 @@ export default function MainScreen({ onOpenEditor }: MainScreenProps) {
   const handleImportFile = () => {
     const input = document.createElement('input');
     input.type = 'file';
-    input.accept = '.json';
+    input.accept = '.yvsnap';
     input.onchange = (e) => {
       const file = (e.target as HTMLInputElement).files?.[0];
       if (file) {
@@ -101,7 +101,7 @@ export default function MainScreen({ onOpenEditor }: MainScreenProps) {
                 <FileText className="w-6 h-6 text-neutral-400 group-hover:text-blue-400" />
               </div>
               <h3 className="font-medium mb-1">Import File</h3>
-              <p className="text-sm text-neutral-500">Open an existing .json project file</p>
+              <p className="text-sm text-neutral-500">Open an existing .yvsnap project file</p>
               <ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-all" />
             </button>
 

src/components/TopBar.tsx

@@ -88,7 +88,7 @@ const TopBar: React.FC<TopBarProps> = ({ stageRef, onGoHome }) => {
     const blob = new Blob([json], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
-    link.download = `${snap.meta.title || 'canvas'}.json`;
+    link.download = `${snap.meta.title || 'canvas'}.yvsnap`;
     link.href = url;
     link.click();
     URL.revokeObjectURL(url);
@@ -101,7 +101,7 @@ const TopBar: React.FC<TopBarProps> = ({ stageRef, onGoHome }) => {
   const handleImportJSON = useCallback(() => {
     const input = document.createElement('input');
     input.type = 'file';
-    input.accept = '.json';
+    input.accept = '.yvsnap';
     input.onchange = (e) => {
       const file = (e.target as HTMLInputElement).files?.[0];
       if (file) {
@@ -324,7 +324,7 @@ const TopBar: React.FC<TopBarProps> = ({ stageRef, onGoHome }) => {
                       </div>
                       <div className="flex flex-col items-start gap-0.5">
                         <span className="text-sm font-medium text-neutral-200 group-hover:text-white transition-colors">Save Project</span>
-                        <span className="text-[10px] text-neutral-500">Edit later (.json)</span>
+                        <span className="text-[10px] text-neutral-500">Edit later (.yvsnap)</span>
                       </div>
                     </div>
                   </button>