🎯 MapView v2.0 - Global Deployment Ready

✨ MAJOR FEATURES:
• Auto-zoom intelligence với smart bounds fitting
• Enhanced 3D GPS markers với pulsing effects
• Professional route display với 6-layer rendering
• Status-based parking icons với availability indicators
• Production-ready build optimizations

🗺️ AUTO-ZOOM FEATURES:
• Smart bounds fitting cho GPS + selected parking
• Adaptive padding (50px) cho visual balance
• Max zoom control (level 16) để tránh quá gần
• Dynamic centering khi không có selection

🎨 ENHANCED VISUALS:
• 3D GPS marker với multi-layer pulse effects
• Advanced parking icons với status colors
• Selection highlighting với animation
• Dimming system cho non-selected items

🛣️ ROUTE SYSTEM:
• OpenRouteService API integration
• Multi-layer route rendering (glow, shadow, main, animated)
• Real-time distance & duration calculation
• Visual route info trong popup

📱 PRODUCTION READY:
• SSR safe với dynamic imports
• Build errors resolved
• Global deployment via Vercel
• Optimized performance

🌍 DEPLOYMENT:
• Vercel: https://whatever-ctk2auuxr-phong12hexdockworks-projects.vercel.app
• Bundle size: 22.8 kB optimized
• Global CDN distribution
• HTTPS enabled

💾 VERSION CONTROL:
• MapView-v2.0.tsx backup created
• MAPVIEW_VERSIONS.md documentation
• Full version history tracking

frontend/node_modules/react-style-singleton/dist/es2015/component.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+declare type Props = {
+    /**
+     * styles to apply
+     */
+    styles: string;
+    /**
+     * marks style as dynamic, so it will be reapplied on styles change
+     * note: this is not expected behavior from a "singleton"
+     * @default false
+     */
+    dynamic?: boolean;
+};
+/**
+ * create a Component to add styles on demand
+ * - styles are added when first instance is mounted
+ * - styles are removed when the last instance is unmounted
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
+ */
+export declare const styleSingleton: () => React.FC<Props>;
+export {};

frontend/node_modules/react-style-singleton/dist/es2015/component.js

@@ -0,0 +1,16 @@
+import { styleHookSingleton } from './hook';
+/**
+ * create a Component to add styles on demand
+ * - styles are added when first instance is mounted
+ * - styles are removed when the last instance is unmounted
+ * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior
+ */
+export var styleSingleton = function () {
+    var useStyle = styleHookSingleton();
+    var Sheet = function (_a) {
+        var styles = _a.styles, dynamic = _a.dynamic;
+        useStyle(styles, dynamic);
+        return null;
+    };
+    return Sheet;
+};

frontend/node_modules/react-style-singleton/dist/es2015/hook.d.ts

@@ -0,0 +1,23 @@
+/**
+ * creates a style on demand
+ */
+declare type StyleSingletonHook = (
+/**
+ * styles to create
+ */
+styles: string, 
+/**
+ * indication that styles should be reapplied on change
+ */
+isDynamic?: boolean) => void;
+/**
+ * creates a hook to control style singleton
+ * @see {@link styleSingleton} for a safer component version
+ * @example
+ * ```tsx
+ * const useStyle = styleHookSingleton();
+ * ///
+ * useStyle('body { overflow: hidden}');
+ */
+export declare const styleHookSingleton: () => StyleSingletonHook;
+export {};

frontend/node_modules/react-style-singleton/dist/es2015/hook.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { stylesheetSingleton } from './singleton';
+/**
+ * creates a hook to control style singleton
+ * @see {@link styleSingleton} for a safer component version
+ * @example
+ * ```tsx
+ * const useStyle = styleHookSingleton();
+ * ///
+ * useStyle('body { overflow: hidden}');
+ */
+export var styleHookSingleton = function () {
+    var sheet = stylesheetSingleton();
+    return function (styles, isDynamic) {
+        React.useEffect(function () {
+            sheet.add(styles);
+            return function () {
+                sheet.remove();
+            };
+        }, [styles && isDynamic]);
+    };
+};

frontend/node_modules/react-style-singleton/dist/es2015/index.d.ts

@@ -0,0 +1,3 @@
+export { styleSingleton } from './component';
+export { stylesheetSingleton } from './singleton';
+export { styleHookSingleton } from './hook';

frontend/node_modules/react-style-singleton/dist/es2015/index.js

@@ -0,0 +1,3 @@
+export { styleSingleton } from './component';
+export { stylesheetSingleton } from './singleton';
+export { styleHookSingleton } from './hook';

frontend/node_modules/react-style-singleton/dist/es2015/singleton.d.ts

@@ -0,0 +1,4 @@
+export declare const stylesheetSingleton: () => {
+    add: (style: string) => void;
+    remove: () => void;
+};

frontend/node_modules/react-style-singleton/dist/es2015/singleton.js

@@ -0,0 +1,48 @@
+import { getNonce } from 'get-nonce';
+function makeStyleTag() {
+    if (!document)
+        return null;
+    var tag = document.createElement('style');
+    tag.type = 'text/css';
+    var nonce = getNonce();
+    if (nonce) {
+        tag.setAttribute('nonce', nonce);
+    }
+    return tag;
+}
+function injectStyles(tag, css) {
+    // @ts-ignore
+    if (tag.styleSheet) {
+        // @ts-ignore
+        tag.styleSheet.cssText = css;
+    }
+    else {
+        tag.appendChild(document.createTextNode(css));
+    }
+}
+function insertStyleTag(tag) {
+    var head = document.head || document.getElementsByTagName('head')[0];
+    head.appendChild(tag);
+}
+export var stylesheetSingleton = function () {
+    var counter = 0;
+    var stylesheet = null;
+    return {
+        add: function (style) {
+            if (counter == 0) {
+                if ((stylesheet = makeStyleTag())) {
+                    injectStyles(stylesheet, style);
+                    insertStyleTag(stylesheet);
+                }
+            }
+            counter++;
+        },
+        remove: function () {
+            counter--;
+            if (!counter && stylesheet) {
+                stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet);
+                stylesheet = null;
+            }
+        },
+    };
+};