world-map-svg 0.1.0 → 0.4.0

package/README.md

@@ -18,9 +18,7 @@ function App() {
   return (
     <div style={{ width: '100%', height: '500px' }}>
       <WorldMap
-        countryColor="#2563eb"
-        defaultRegionName="India"
-        defaultCountryCode="BD"
+        countryColor="#093C5D"
       />
     </div>
   )
@@ -32,10 +30,15 @@ function App() {
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `backgroundColor` | `string` | `transparent` | Map background color |
-| `countryColor` | `string` | `#2563eb` | Base fill color for countries |
-| `defaultRegionName` | `string` | - | Region name to focus on load |
-| `defaultCountryCode` | `string` | - | ISO country code to highlight on load |
+| `countryColor` | `string` | `#093C5D` | Base fill color for countries |
 | `svgUrl` | `string` | bundled SVG | Custom SVG URL to override the default world map |
+| `showConnections` | `boolean` | `true` | Show carved connection lines |
+| `connectionBase` | `string` | `BD` | ISO country code of the hub/base country |
+| `connectedCountries` | `string[]` | `['US', 'IN']` | ISO country codes to connect to the base |
+| `onCountryHover` | `(code, name, x, y) => void` | - | Fires when hovering a country path. Suppresses built-in tooltip. |
+| `onCountryClick` | `(code, name, x, y) => void` | - | Fires when clicking a country path. Suppresses built-in click tooltip. |
+| `onConnectionDotHover` | `(code, x, y) => void` | - | Fires when hovering a connection dot. |
+| `onConnectionDotClick` | `(code, x, y) => void` | - | Fires when clicking a connection dot. |
 | `className` | `string` | - | Additional CSS class for the container |
 
 ## Development

package/dist/WorldMap.d.ts

@@ -2,10 +2,15 @@ import './WorldMap.css';
 export type WorldMapProps = {
     backgroundColor?: string;
     countryColor?: string;
-    defaultRegionName?: string;
-    defaultCountryCode?: string;
     svgUrl?: string;
     className?: string;
+    showConnections?: boolean;
+    connectionBase?: string;
+    connectedCountries?: string[];
+    onCountryHover?: (countryCode: string, countryName: string, x: number, y: number) => void;
+    onCountryClick?: (countryCode: string, countryName: string, x: number, y: number) => void;
+    onConnectionDotHover?: (countryCode: string, x: number, y: number) => void;
+    onConnectionDotClick?: (countryCode: string, x: number, y: number) => void;
 };
-export declare function WorldMap({ backgroundColor, countryColor, defaultRegionName, defaultCountryCode, svgUrl, className, }: WorldMapProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorldMap({ backgroundColor, countryColor, svgUrl, className, showConnections, connectionBase, connectedCountries, onCountryHover, onCountryClick, onConnectionDotHover, onConnectionDotClick, }: WorldMapProps): import("react/jsx-runtime").JSX.Element;
 export default WorldMap;

package/dist/style.css

@@ -1,2 +1,2 @@
-.map-container{cursor:grab;background:var(--map-background,transparent);width:100%;height:100%;position:relative;overflow:hidden}.map-container.is-panning{cursor:grabbing}.map-viewport{transform-origin:50%;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .2s;display:flex}.map-svg-wrap{width:100%}.map-svg{width:100%;height:auto;display:block}.map-svg .country{fill:var(--country-fill,#2563eb);stroke:var(--country-stroke,#1e40af);stroke-width:.6px;cursor:pointer;transform-origin:50%;transition:fill .2s,transform .2s}.map-svg .country:hover{fill:var(--country-hover,#3b82f6)}.map-svg .country.is-selected{fill:var(--country-selected,#1d4ed8);stroke:var(--country-selected,#1d4ed8)}.map-svg .country.is-default{fill:#16a34a;stroke:#16a34a}.map-tooltip{color:#fff;pointer-events:none;white-space:nowrap;background:#111;border-radius:6px;padding:6px 10px;font-size:13px;position:absolute;transform:translate(-50%,-120%)}.map-tooltip.is-pinned{background:#333}.map-loading{color:#666;font-size:14px}
+.map-container{cursor:grab;background:var(--map-background,transparent);width:100%;height:100%;position:relative;overflow:hidden}.map-container.is-panning{cursor:grabbing}.map-viewport{transform-origin:50%;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .2s;display:flex}.map-svg-wrap{width:100%}.map-svg{width:100%;height:auto;display:block}.map-svg .country{fill:var(--country-fill,#093c5d);stroke:var(--country-stroke,#1e40af);stroke-width:.6px;cursor:pointer;transform-origin:50%;transition:fill .2s,transform .2s}.map-svg .country:hover{fill:var(--country-hover,#3b82f6)}.map-svg .country.is-selected{fill:var(--country-selected,#1d4ed8);stroke:var(--country-selected,#1d4ed8)}.map-svg .country.is-default{fill:#16a34a;stroke:#16a34a}.map-svg .connection-line{stroke:#ef4444;stroke-width:2px;fill:none;pointer-events:none;opacity:.85}.map-svg .connection-dot{fill:#ef4444;stroke:#fff;stroke-width:1.5px;cursor:pointer}.map-svg .connection-dot-start{animation:1s ease-in-out infinite connectionBlink}.map-svg .connection-dot-end{fill:#22c55e;stroke:#fff;stroke-width:1.5px;animation:1s ease-in-out .5s infinite connectionBlinkEnd}@keyframes connectionBlinkEnd{0%,to{opacity:1;r:4;filter:drop-shadow(0 0 4px #22c55ee6)}50%{opacity:.15;r:9;filter:drop-shadow(0 0 12px #22c55e66)}}@keyframes connectionBlink{0%,to{opacity:1;r:4;filter:drop-shadow(0 0 4px #ef4444e6)}50%{opacity:.15;r:9;filter:drop-shadow(0 0 12px #ef444466)}}.map-tooltip{color:#111;pointer-events:none;white-space:nowrap;background:#fff;border-radius:6px;padding:6px 10px;font-size:13px;position:absolute;transform:translate(-50%,-120%);box-shadow:0 2px 8px #00000026}.map-tooltip.is-pinned{background:#f8f8f8}.map-loading{color:#666;font-size:14px}
 /*$vite$:1*/

package/dist/world-map-svg.cjs.js

@@ -1035,4 +1035,4 @@ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{val
      title="Zimbabwe"
      id="ZW" />
 </svg>
-`,r=e=>/^#([0-9a-fA-F]{3}){1,2}$/.test(e),i=e=>e.toString(16).padStart(2,`0`),a=(e,t)=>{if(!r(e))return e;let n=e.replace(`#`,``),a=n.length===3?n.split(``).map(e=>e+e).join(``):n,o=parseInt(a,16),s=Math.min(255,Math.max(0,(o>>16&255)+t)),c=Math.min(255,Math.max(0,(o>>8&255)+t)),l=Math.min(255,Math.max(0,(o&255)+t));return`#${i(s)}${i(c)}${i(l)}`};function o({backgroundColor:r,countryColor:i=`#2563eb`,defaultRegionName:o,defaultCountryCode:s,svgUrl:c,className:l}){let[u,d]=(0,e.useState)(``),[f,p]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[m,h]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[g,_]=(0,e.useState)(1),[v,y]=(0,e.useState)({x:0,y:0}),[b,x]=(0,e.useState)(!1),S=(0,e.useRef)(null),C=(0,e.useRef)({isPanning:!1,startX:0,startY:0,originX:0,originY:0,moved:!1}),w=(0,e.useMemo)(()=>({hover:a(i,24),selected:a(i,-24),stroke:a(i,-36)}),[i]);(0,e.useEffect)(()=>{let e=!0;return(async()=>{try{let t;if(c){let e=await fetch(c);if(!e.ok)throw Error(`Failed to fetch SVG: ${e.status}`);t=await e.text()}else t=n;if(!e)return;let r=new DOMParser().parseFromString(t,`image/svg+xml`).querySelector(`svg`);if(!r){d(``);return}if(!r.getAttribute(`viewBox`)){let e=parseFloat(r.getAttribute(`width`)||``),t=parseFloat(r.getAttribute(`height`)||``);Number.isFinite(e)&&Number.isFinite(t)&&r.setAttribute(`viewBox`,`0 0 ${e} ${t}`)}r.removeAttribute(`width`),r.removeAttribute(`height`),r.setAttribute(`class`,`map-svg`);let i=r.querySelectorAll(`path[title]`),a=s?.toUpperCase();i.forEach(e=>{let t=e.getAttribute(`title`)||``;t&&(e.classList.add(`country`),e.setAttribute(`data-name`,t),a&&e.getAttribute(`id`)===a&&(e.classList.add(`is-default`),e.setAttribute(`fill`,`#16a34a`),e.setAttribute(`stroke`,`#16a34a`)))}),d(new XMLSerializer().serializeToString(r))}catch{e&&d(``)}})(),()=>{e=!1}},[s,c]);let T=e=>!e||!(e instanceof Element)?null:e.closest(`[data-name]`),E=e=>{let t=S.current?.getBoundingClientRect();return t?{x:e.clientX-t.left,y:e.clientY-t.top}:{x:0,y:0}},D=()=>{let e=S.current;if(!e)return;let t=e.querySelector(`.country.is-selected`);t&&t.classList.remove(`is-selected`)},O=e=>{if(C.current.isPanning){let t=e.clientX-C.current.startX,n=e.clientY-C.current.startY;y({x:C.current.originX+t,y:C.current.originY+n}),C.current.moved=!0,p(e=>({...e,visible:!1}));return}let t=T(e.target)?.dataset.name;if(!t){p(e=>({...e,visible:!1}));return}let{x:n,y:r}=E(e);p({name:t,x:n,y:r,visible:!0})},k=()=>{p(e=>({...e,visible:!1})),C.current.isPanning=!1,x(!1)},A=e=>{if(C.current.moved){C.current.moved=!1;return}let t=T(e.target),n=t?.dataset.name;if(!n){D(),h(e=>({...e,visible:!1}));return}let{x:r,y:i}=E(e);h({name:n,x:r,y:i,visible:!0}),D(),t.classList.add(`is-selected`)},j=e=>{e.preventDefault();let t=e.deltaY>0?-1:1;_(e=>{let n=e+t*.1;return Math.min(3,Math.max(1,Number(n.toFixed(2))))})},M=e=>{e.button===0&&(e.currentTarget.setPointerCapture(e.pointerId),C.current.isPanning=!0,C.current.startX=e.clientX,C.current.startY=e.clientY,C.current.originX=v.x,C.current.originY=v.y,C.current.moved=!1,x(!0))},N=()=>{C.current.isPanning=!1,x(!1)};(0,e.useEffect)(()=>{if(!u)return;let e=S.current;if(!e)return;let t=o?.trim().toLowerCase();if(!t)return;let n=Array.from(e.querySelectorAll(`[data-name]`)).find(e=>e.getAttribute(`data-name`)?.trim().toLowerCase()===t);if(n){let t=e.getBoundingClientRect(),r=n.getBoundingClientRect(),i=r.left-t.left+r.width/2,a=r.top-t.top+r.height/2,o=1.6,s=t.width/2,c=t.height/2,l=s/o-i,u=c/o-a;_(o),y({x:l,y:u})}},[u,o]);let P={"--map-background":r||`transparent`,"--country-fill":i,"--country-hover":w.hover,"--country-selected":w.selected,"--country-stroke":w.stroke},F=[`map-container`,l].filter(Boolean).join(` `);return(0,t.jsxs)(`div`,{className:b?`${F} is-panning`.trim():F,style:P,ref:S,onPointerMove:O,onPointerLeave:k,onPointerDown:M,onPointerUp:N,onClick:A,onWheel:j,role:`img`,"aria-label":`World map with clickable countries`,children:[u?(0,t.jsx)(`div`,{className:`map-viewport`,style:{transform:`translate(${v.x}px, ${v.y}px) scale(${g})`},children:(0,t.jsx)(`div`,{className:`map-svg-wrap`,dangerouslySetInnerHTML:{__html:u}})}):(0,t.jsx)(`div`,{className:`map-loading`,children:`Loading map...`}),f.visible&&(0,t.jsx)(`div`,{className:`map-tooltip`,style:{left:f.x,top:f.y},role:`status`,children:f.name}),m.visible&&(0,t.jsx)(`div`,{className:`map-tooltip is-pinned`,style:{left:m.x,top:m.y},role:`status`,children:m.name})]})}exports.WorldMap=o,exports.default=o;
+`,r={AD:{x:479.3,y:331.5},AE:{x:626.4,y:392.9},AF:{x:664.9,y:361.8},AG:{x:301.5,y:413.8},AI:{x:297.9,y:411.2},AL:{x:531.5,y:336.6},AM:{x:601.2,y:340.6},AO:{x:525.1,y:494.6},AR:{x:296.3,y:586.5},AS:{x:1006.2,y:503.2},AT:{x:512.3,y:310.9},AU:{x:856.4,y:568.8},AW:{x:278.5,y:427.7},AX:{x:531.2,y:250.9},AZ:{x:608.4,y:340.3},BA:{x:524.5,y:326.1},BB:{x:307.8,y:425.8},BD:{x:728.4,y:394.8},BE:{x:487.4,y:299},BF:{x:470.5,y:428.5},BG:{x:546.4,y:330.7},BH:{x:616.7,y:387.7},BI:{x:558.8,y:472.4},BJ:{x:481.3,y:436.8},BL:{x:298.5,y:412.2},BN:{x:796.8,y:450.3},BO:{x:296.5,y:509.3},BM:{x:293.1,y:367.5},BQ:{x:290.6,y:421},BR:{x:322.2,y:505.6},BS:{x:262,y:394},BT:{x:728.6,y:383.1},BV:{x:484.5,y:644.8},BW:{x:544.1,y:527},BY:{x:553.3,y:284.1},BZ:{x:226.5,y:414.3},CA:{x:203.1,y:173.2},CC:{x:746.8,y:497.1},CD:{x:535.9,y:474.4},CF:{x:533.6,y:444.3},CG:{x:516.6,y:464.8},CH:{x:497.9,y:314.7},CI:{x:459.3,y:441.8},CK:{x:26.4,y:523.5},CL:{x:228.1,y:582.3},CM:{x:509.6,y:442.2},CN:{x:767.3,y:348.2},CO:{x:270.2,y:451.4},CR:{x:238.5,y:435.9},CU:{x:251.7,y:401.4},CV:{x:407.5,y:417.7},CW:{x:281.4,y:428.6},CX:{x:771.4,y:492.4},CY:{x:568.7,y:358.2},CZ:{x:518.3,y:302},DE:{x:504.2,y:295.3},DJ:{x:594.4,y:429.7},DK:{x:507.5,y:272.2},DM:{x:302.7,y:419.4},DO:{x:278,y:409.6},DZ:{x:479.5,y:380.2},EC:{x:240.7,y:467.9},EG:{x:561.3,y:384.9},EE:{x:545.1,y:259.8},EH:{x:438.7,y:393.1},ER:{x:586.5,y:420},ES:{x:455.5,y:354.7},ET:{x:588.5,y:437.2},FI:{x:548.1,y:218.7},FJ:{x:974.9,y:511.5},FK:{x:308,y:632.6},FM:{x:897.3,y:442.1},FO:{x:455.5,y:241.2},FR:{x:481.6,y:316.1},GA:{x:507.4,y:465.2},GB:{x:465.9,y:274.3},GE:{x:596.5,y:332.3},GD:{x:301.8,y:428.9},GF:{x:325.8,y:451.9},GG:{x:467.7,y:303.5},GH:{x:472,y:440.6},GI:{x:459.9,y:354.7},GL:{x:356.7,y:126.7},GM:{x:431.9,y:425.1},GN:{x:443,y:435},GO:{x:607.6,y:495.4},GP:{x:302.3,y:417.1},GQ:{x:502.6,y:456.3},GR:{x:542.1,y:346.6},GS:{x:384.7,y:654.1},GT:{x:221.7,y:418.3},GU:{x:881.3,y:425.1},GW:{x:432.3,y:429.8},GY:{x:309.5,y:449.3},HK:{x:795.1,y:398.9},HM:{x:681.3,y:638.5},HN:{x:232.8,y:421.3},HR:{x:521.1,y:323.9},HT:{x:269.8,y:408.7},HU:{x:529.6,y:313.2},ID:{x:806.3,y:470},IE:{x:451.9,y:285.6},IL:{x:573.3,y:370.3},IM:{x:462.1,y:281.9},IN:{x:707.1,y:400.5},IO:{x:678.2,y:483.4},IQ:{x:597.4,y:364.2},IR:{x:625.5,y:366.2},IS:{x:421.5,y:221.6},IT:{x:510.1,y:333.2},JE:{x:468.9,y:304.6},JM:{x:258,y:411.5},JO:{x:579.1,y:370.9},JP:{x:853.1,y:356.5},JU:{x:594.9,y:511.2},KE:{x:581.2,y:461.8},KG:{x:684.6,y:336.3},KH:{x:769.5,y:427.6},KI:{x:516.3,y:473.5},KM:{x:598,y:496.3},KN:{x:299,y:414.1},KP:{x:832.8,y:339.4},KR:{x:835.4,y:355.3},XK:{x:533.5,y:331.4},KW:{x:608.2,y:377.3},KY:{x:248.7,y:407.4},KZ:{x:662.8,y:307.5},LA:{x:766.4,y:411.1},LB:{x:575.5,y:362.4},LC:{x:303.8,y:423.8},LI:{x:501.7,y:313.2},LK:{x:701.6,y:440.9},LR:{x:448.4,y:444.9},LS:{x:554.1,y:549.5},LT:{x:541.8,y:277.4},LU:{x:492,y:302.1},LV:{x:544,y:268.8},LY:{x:523.3,y:386.1},MA:{x:454.9,y:369},MC:{x:495.7,y:326.8},MD:{x:554.5,y:314},MG:{x:606.4,y:516.8},ME:{x:529.3,y:330.8},MF:{x:297.9,y:411.6},MH:{x:950,y:439.2},MK:{x:535.9,y:335},ML:{x:463.6,y:412.7},MO:{x:793.5,y:399.3},MM:{x:746.2,y:407.6},MN:{x:766.3,y:313.4},MP:{x:883.2,y:416.3},MQ:{x:303.6,y:421.6},MR:{x:444.2,y:402.6},MS:{x:300.4,y:415.6},MT:{x:515.2,y:355.3},MU:{x:636.4,y:520.6},MV:{x:681,y:452.5},MW:{x:571.1,y:500.3},MX:{x:187.1,y:394.1},MY:{x:782.1,y:451.4},MZ:{x:574.6,y:516.5},NA:{x:526.8,y:529.1},NC:{x:935.3,y:522.5},NE:{x:497.5,y:412.7},NF:{x:946.2,y:547.7},NG:{x:499.2,y:437.4},NI:{x:235.2,y:426.7},NL:{x:489.7,y:291.4},NO:{x:525.1,y:219.1},NP:{x:710.9,y:380.3},NR:{x:943.4,y:464.4},NU:{x:1008.5,y:517.1},NZ:{x:965.7,y:600.7},OM:{x:631.8,y:401.3},PA:{x:250.1,y:439.4},PE:{x:264.4,y:489},PF:{x:71,y:505},PG:{x:891.4,y:481.1},PH:{x:816.7,y:426.1},PK:{x:669.4,y:373.1},PL:{x:528.5,y:292.2},PM:{x:317,y:314.2},PN:{x:114.8,y:533},PR:{x:287.9,y:411.2},PS:{x:572.8,y:369},PT:{x:422.3,y:349.7},PW:{x:847.9,y:447.9},PY:{x:310.9,y:530.3},QA:{x:618.5,y:389.8},RE:{x:630.8,y:523.2},RO:{x:545,y:317.9},RS:{x:533.6,y:325},RU:{x:769.4,y:187.8},RW:{x:558.7,y:468.3},SA:{x:601.5,y:392.4},SB:{x:927.6,y:488.8},SC:{x:630.6,y:476},SD:{x:559.7,y:419},SE:{x:524.4,y:234.6},SG:{x:766.3,y:459.1},SH:{x:446.7,y:496.6},SI:{x:516.8,y:317.4},SJ:{x:509.3,y:121.1},SK:{x:530.2,y:306.9},SL:{x:441.8,y:439.3},SM:{x:509.9,y:326.1},SN:{x:434.3,y:422},SO:{x:604.5,y:448.5},SR:{x:317.7,y:452},SS:{x:558.3,y:440.9},ST:{x:494.4,y:460.5},SV:{x:225.4,y:424.1},SX:{x:297.9,y:411.8},SY:{x:584.5,y:359.1},SZ:{x:563.2,y:539.7},TC:{x:272.9,y:400.5},TD:{x:527.4,y:418.8},TF:{x:646.4,y:616.3},TG:{x:477.3,y:438.8},TH:{x:759.8,y:425.9},TJ:{x:674.8,y:344.9},TK:{x:1003,y:488},TL:{x:827.6,y:487.6},TM:{x:642.1,y:344.3},TN:{x:501.6,y:362.4},TO:{x:995.1,y:519.9},TR:{x:573.8,y:344.4},TT:{x:303.1,y:432.9},TV:{x:973.8,y:483.4},TW:{x:812,y:395.1},TZ:{x:572.8,y:480.8},UA:{x:562.3,y:307.5},UG:{x:565.5,y:459.1},"UM-DQ":{x:25.8,y:464},"UM-FQ":{x:990,y:462.3},"UM-HQ":{x:989.5,y:460.7},"UM-JQ":{x:1009.4,y:415.6},"UM-MQ":{x:987.4,y:380.9},"UM-WQ":{x:942.6,y:408.1},US:{x:143.6,y:291},UY:{x:318.3,y:559},UZ:{x:656.1,y:335.4},VA:{x:509.8,y:333.9},VC:{x:303,y:426.3},VE:{x:288,y:444.9},VG:{x:293.9,y:410.2},VI:{x:293,y:411.8},VN:{x:771.8,y:417.4},VU:{x:947,y:511},WF:{x:988,y:501.7},WS:{x:1002.2,y:501.6},YE:{x:611.1,y:418.6},YT:{x:601.6,y:499},ZA:{x:551.1,y:569},ZM:{x:553,y:500},ZW:{x:556.6,y:517.1}},i=e=>/^#([0-9a-fA-F]{3}){1,2}$/.test(e),a=e=>e.toString(16).padStart(2,`0`),o=(e,t)=>{if(!i(e))return e;let n=e.replace(`#`,``),r=n.length===3?n.split(``).map(e=>e+e).join(``):n,o=parseInt(r,16),s=Math.min(255,Math.max(0,(o>>16&255)+t)),c=Math.min(255,Math.max(0,(o>>8&255)+t)),l=Math.min(255,Math.max(0,(o&255)+t));return`#${a(s)}${a(c)}${a(l)}`};function s(e,t){let n=t.x-e.x,r=t.y-e.y,i=Math.sqrt(n*n+r*r),a=(e.y+t.y)/2,o=Math.max(Math.min(i*.35,220),15),s=e.x+n*.25,c=a-o,l=e.x+n*.75,u=a-o;return`M ${e.x} ${e.y} C ${s},${c} ${l},${u} ${t.x} ${t.y}`}function c({backgroundColor:i,countryColor:a=`#093C5D`,svgUrl:c,className:l,showConnections:u=!0,connectionBase:d=`BD`,connectedCountries:f=[`US`,`IN`],onCountryHover:p,onCountryClick:m,onConnectionDotHover:h,onConnectionDotClick:g}){let[_,v]=(0,e.useState)(``),[y,b]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[x,S]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[C,w]=(0,e.useState)(1),[T,E]=(0,e.useState)({x:0,y:0}),[D,O]=(0,e.useState)(!1),k=(0,e.useRef)(null),A=(0,e.useRef)({isPanning:!1,startX:0,startY:0,originX:0,originY:0,moved:!1}),j=(0,e.useMemo)(()=>({hover:o(a,24),selected:o(a,-24),stroke:o(a,-36)}),[a]);(0,e.useEffect)(()=>{let e=!0;return(async()=>{try{let t;if(c){let e=await fetch(c);if(!e.ok)throw Error(`Failed to fetch SVG: ${e.status}`);t=await e.text()}else t=n;if(!e)return;let i=new DOMParser().parseFromString(t,`image/svg+xml`),a=i.querySelector(`svg`);if(!a){v(``);return}if(!a.getAttribute(`viewBox`)){let e=parseFloat(a.getAttribute(`width`)||``),t=parseFloat(a.getAttribute(`height`)||``);Number.isFinite(e)&&Number.isFinite(t)&&a.setAttribute(`viewBox`,`0 0 ${e} ${t}`)}if(a.removeAttribute(`width`),a.removeAttribute(`height`),a.setAttribute(`class`,`map-svg`),a.querySelectorAll(`path[title]`).forEach(e=>{let t=e.getAttribute(`title`)||``;t&&(e.classList.add(`country`),e.setAttribute(`data-name`,t))}),u){let e=r[d];if(e){let t=e=>{let t=i.createElementNS(`http://www.w3.org/2000/svg`,`path`);return t.setAttribute(`d`,e),t.setAttribute(`class`,`connection-line`),t.setAttribute(`fill`,`none`),t},n=(e,t,n,r)=>{let a=i.createElementNS(`http://www.w3.org/2000/svg`,`circle`);return a.setAttribute(`cx`,String(e)),a.setAttribute(`cy`,String(t)),a.setAttribute(`r`,`3`),a.setAttribute(`class`,n),a.setAttribute(`data-country-code`,r),a},o=new Set;for(let i of f){let c=r[i];if(c&&i!==d){let r=s(c,e);a.appendChild(t(r)),o.has(i)||(a.appendChild(n(c.x,c.y,`connection-dot connection-dot-start`,i)),o.add(i))}}o.has(d)||(a.appendChild(n(e.x,e.y,`connection-dot connection-dot-end`,d)),o.add(d))}}v(new XMLSerializer().serializeToString(a))}catch{e&&v(``)}})(),()=>{e=!1}},[c,u,d,f]);let M=e=>!e||!(e instanceof Element)?null:e.closest(`[data-name]`),N=e=>!e||!(e instanceof Element)?null:e.closest(`.connection-dot`),P=e=>{let t=k.current?.getBoundingClientRect();return t?{x:e.clientX-t.left,y:e.clientY-t.top}:{x:0,y:0}},F=()=>{let e=k.current;if(!e)return;let t=e.querySelector(`.country.is-selected`);t&&t.classList.remove(`is-selected`)},I=e=>{if(A.current.isPanning){let t=e.clientX-A.current.startX,n=e.clientY-A.current.startY;E({x:A.current.originX+t,y:A.current.originY+n}),A.current.moved=!0,b(e=>({...e,visible:!1}));return}let t=N(e.target)?.dataset.countryCode;if(t){if(h){let{x:n,y:r}=P(e);h(t,n,r)}b(e=>({...e,visible:!1}));return}let n=M(e.target),r=n?.dataset.name;if(!r){b(e=>({...e,visible:!1}));return}let{x:i,y:a}=P(e);if(p){p(n.getAttribute(`id`)||``,r,i,a),b(e=>({...e,visible:!1}));return}b({name:r,x:i,y:a,visible:!0})},L=()=>{b(e=>({...e,visible:!1})),A.current.isPanning=!1,O(!1)},R=e=>{if(A.current.moved){A.current.moved=!1;return}let t=N(e.target)?.dataset.countryCode;if(t){if(g){let{x:n,y:r}=P(e);g(t,n,r)}return}let n=M(e.target),r=n?.dataset.name;if(!r){F(),S(e=>({...e,visible:!1}));return}let{x:i,y:a}=P(e);if(m){m(n.getAttribute(`id`)||``,r,i,a),S(e=>({...e,visible:!1}));return}S({name:r,x:i,y:a,visible:!0}),F(),n.classList.add(`is-selected`)},z=e=>{e.preventDefault();let t=e.deltaY>0?-1:1;w(e=>{let n=e+t*.1;return Math.min(3,Math.max(1,Number(n.toFixed(2))))})},B=e=>{e.button===0&&(e.currentTarget.setPointerCapture(e.pointerId),A.current.isPanning=!0,A.current.startX=e.clientX,A.current.startY=e.clientY,A.current.originX=T.x,A.current.originY=T.y,A.current.moved=!1,O(!0))},V=()=>{A.current.isPanning=!1,O(!1)},H={"--map-background":i||`transparent`,"--country-fill":a,"--country-hover":j.hover,"--country-selected":j.selected,"--country-stroke":j.stroke},U=[`map-container`,l].filter(Boolean).join(` `);return(0,t.jsxs)(`div`,{className:D?`${U} is-panning`.trim():U,style:H,ref:k,onPointerMove:I,onPointerLeave:L,onPointerDown:B,onPointerUp:V,onClick:R,onWheel:z,role:`img`,"aria-label":`World map with clickable countries`,children:[_?(0,t.jsx)(`div`,{className:`map-viewport`,style:{transform:`translate(${T.x}px, ${T.y}px) scale(${C})`},children:(0,t.jsx)(`div`,{className:`map-svg-wrap`,dangerouslySetInnerHTML:{__html:_}})}):(0,t.jsx)(`div`,{className:`map-loading`,children:`Loading map...`}),y.visible&&(0,t.jsx)(`div`,{className:`map-tooltip`,style:{left:y.x,top:y.y},role:`status`,children:y.name}),x.visible&&(0,t.jsx)(`div`,{className:`map-tooltip is-pinned`,style:{left:x.x,top:x.y},role:`status`,children:x.name})]})}exports.WorldMap=c,exports.default=c;