[{"data":1,"prerenderedAt":2591},["ShallowReactive",2],{"navigation_docs":3,"-guide-positioning-virtual-anchors":226,"-guide-positioning-virtual-anchors-surround":2586},[4,90],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":28},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,29,51,68],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":28},"Getting Started","i-lucide-rocket","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",[16,20,24],{"title":17,"path":18,"stem":19},"Introduction","\u002Fguide\u002Fgetting-started\u002Fintroduction","1.guide\u002F1.getting-started\u002F1.introduction",{"title":21,"path":22,"stem":23},"First Tooltip","\u002Fguide\u002Fgetting-started\u002Ffirst-tooltip","1.guide\u002F1.getting-started\u002F2.first-tooltip",{"title":25,"path":26,"stem":27},"First Menu","\u002Fguide\u002Fgetting-started\u002Ffirst-menu","1.guide\u002F1.getting-started\u002F3.first-menu",false,{"title":30,"icon":31,"path":32,"stem":33,"children":34,"page":28},"Core Concepts","i-lucide-boxes","\u002Fguide\u002Fcore-concepts","1.guide\u002F2.core-concepts",[35,39,43,47],{"title":36,"path":37,"stem":38},"Floating node","\u002Fguide\u002Fcore-concepts\u002Ffloating-node","1.guide\u002F2.core-concepts\u002F1.floating-node",{"title":40,"path":41,"stem":42},"Positioning","\u002Fguide\u002Fcore-concepts\u002Fpositioning","1.guide\u002F2.core-concepts\u002F2.positioning",{"title":44,"path":45,"stem":46},"Interaction model","\u002Fguide\u002Fcore-concepts\u002Finteraction-model","1.guide\u002F2.core-concepts\u002F3.interaction-model",{"title":48,"path":49,"stem":50},"Hierarchy","\u002Fguide\u002Fcore-concepts\u002Fhierarchy","1.guide\u002F2.core-concepts\u002F4.hierarchy",{"title":40,"icon":52,"path":53,"stem":54,"children":55,"page":28},"i-lucide-crosshair","\u002Fguide\u002Fpositioning","1.guide\u002F3.positioning",[56,60,64],{"title":57,"path":58,"stem":59},"Middlewares","\u002Fguide\u002Fpositioning\u002Fmiddlewares","1.guide\u002F3.positioning\u002F1.middlewares",{"title":61,"path":62,"stem":63},"Virtual Anchors","\u002Fguide\u002Fpositioning\u002Fvirtual-anchors","1.guide\u002F3.positioning\u002F2.virtual-anchors",{"title":65,"path":66,"stem":67},"Animations and Transitions","\u002Fguide\u002Fpositioning\u002Fanimations-and-transitions","1.guide\u002F3.positioning\u002F3.animations-and-transitions",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":28},"Accessibility","i-lucide-person-standing","\u002Fguide\u002Faccessibility","1.guide\u002F4.accessibility",[74,78,82,86],{"title":75,"path":76,"stem":77},"ARIA & Semantics","\u002Fguide\u002Faccessibility\u002Faria-and-semantics","1.guide\u002F4.accessibility\u002F1.aria-and-semantics",{"title":79,"path":80,"stem":81},"Focus Models","\u002Fguide\u002Faccessibility\u002Ffocus-models","1.guide\u002F4.accessibility\u002F2.focus-models",{"title":83,"path":84,"stem":85},"Keyboard Navigation","\u002Fguide\u002Faccessibility\u002Fkeyboard-navigation","1.guide\u002F4.accessibility\u002F3.keyboard-navigation",{"title":87,"path":88,"stem":89},"Hover & Dismissal","\u002Fguide\u002Faccessibility\u002Fhover-and-dismissal","1.guide\u002F4.accessibility\u002F4.hover-and-dismissal",{"title":91,"icon":92,"path":93,"stem":94,"children":95},"API Reference","i-lucide-code-xml","\u002Fapi","2.api",[96,100,110,120,137,171,188],{"title":97,"path":93,"stem":98,"icon":99},"Overview","2.api\u002Findex","i-lucide-file-text",{"title":101,"icon":102,"path":103,"stem":104,"children":105,"page":28},"Reference","i-lucide-braces","\u002Fapi\u002Foverview","2.api\u002F1.overview",[106],{"title":107,"path":108,"stem":109},"Types","\u002Fapi\u002Foverview\u002Ftypes","2.api\u002F1.overview\u002F1.types",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":28},"Core","i-lucide-box","\u002Fapi\u002Fcore","2.api\u002F2.core",[116],{"title":117,"path":118,"stem":119},"useFloatingNode","\u002Fapi\u002Fcore\u002Fuse-floating-node","2.api\u002F2.core\u002F1.use-floating-node",{"title":40,"icon":121,"path":122,"stem":123,"children":124,"page":28},"i-lucide-move","\u002Fapi\u002Fpositioning","2.api\u002F3.positioning",[125,129,133],{"title":126,"path":127,"stem":128},"usePosition","\u002Fapi\u002Fpositioning\u002Fuse-position","2.api\u002F3.positioning\u002F1.use-position",{"title":130,"path":131,"stem":132},"useArrow","\u002Fapi\u002Fpositioning\u002Fuse-arrow","2.api\u002F3.positioning\u002F2.use-arrow",{"title":134,"path":135,"stem":136},"useClientPoint","\u002Fapi\u002Fpositioning\u002Fuse-client-point","2.api\u002F3.positioning\u002F3.use-client-point",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":28},"Interactions","i-lucide-mouse-pointer-click","\u002Fapi\u002Finteractions","2.api\u002F4.interactions",[143,147,151,155,159,163,167],{"title":144,"path":145,"stem":146},"useClick","\u002Fapi\u002Finteractions\u002Fuse-click","2.api\u002F4.interactions\u002F1.use-click",{"title":148,"path":149,"stem":150},"useHover","\u002Fapi\u002Finteractions\u002Fuse-hover","2.api\u002F4.interactions\u002F2.use-hover",{"title":152,"path":153,"stem":154},"useFocus","\u002Fapi\u002Finteractions\u002Fuse-focus","2.api\u002F4.interactions\u002F3.use-focus",{"title":156,"path":157,"stem":158},"useFocusTrap","\u002Fapi\u002Finteractions\u002Fuse-focus-trap","2.api\u002F4.interactions\u002F4.use-focus-trap",{"title":160,"path":161,"stem":162},"useOutsideClick","\u002Fapi\u002Finteractions\u002Fuse-outside-click","2.api\u002F4.interactions\u002F5.use-outside-click",{"title":164,"path":165,"stem":166},"useEscapeKey","\u002Fapi\u002Finteractions\u002Fuse-escape-key","2.api\u002F4.interactions\u002F6.use-escape-key",{"title":168,"path":169,"stem":170},"useRole","\u002Fapi\u002Finteractions\u002Fuse-role","2.api\u002F4.interactions\u002F7.use-role",{"title":83,"icon":172,"path":173,"stem":174,"children":175,"page":28},"i-lucide-keyboard","\u002Fapi\u002Fkeyboard-navigation","2.api\u002F5.keyboard-navigation",[176,180,184],{"title":177,"path":178,"stem":179},"useRovingFocus","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-roving-focus","2.api\u002F5.keyboard-navigation\u002F1.use-roving-focus",{"title":181,"path":182,"stem":183},"useAriaActivedescendant","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-aria-activedescendant","2.api\u002F5.keyboard-navigation\u002F2.use-aria-activedescendant",{"title":185,"path":186,"stem":187},"useTypeahead","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-typeahead","2.api\u002F5.keyboard-navigation\u002F3.use-typeahead",{"title":189,"icon":190,"path":191,"stem":192,"children":193,"page":28},"Middleware","i-lucide-blocks","\u002Fapi\u002Fmiddleware","2.api\u002F6.middleware",[194,198,202,206,210,214,218,222],{"title":195,"path":196,"stem":197},"offset","\u002Fapi\u002Fmiddleware\u002Foffset","2.api\u002F6.middleware\u002F1.offset",{"title":199,"path":200,"stem":201},"flip","\u002Fapi\u002Fmiddleware\u002Fflip","2.api\u002F6.middleware\u002F2.flip",{"title":203,"path":204,"stem":205},"shift","\u002Fapi\u002Fmiddleware\u002Fshift","2.api\u002F6.middleware\u002F3.shift",{"title":207,"path":208,"stem":209},"autoPlacement","\u002Fapi\u002Fmiddleware\u002Fautoplacement","2.api\u002F6.middleware\u002F4.autoplacement",{"title":211,"path":212,"stem":213},"size","\u002Fapi\u002Fmiddleware\u002Fsize","2.api\u002F6.middleware\u002F5.size",{"title":215,"path":216,"stem":217},"inline","\u002Fapi\u002Fmiddleware\u002Finline","2.api\u002F6.middleware\u002F6.inline",{"title":219,"path":220,"stem":221},"arrow","\u002Fapi\u002Fmiddleware\u002Farrow","2.api\u002F6.middleware\u002F7.arrow",{"title":223,"path":224,"stem":225},"hide","\u002Fapi\u002Fmiddleware\u002Fhide","2.api\u002F6.middleware\u002F8.hide",{"id":227,"title":61,"body":228,"description":2580,"extension":2581,"links":2582,"meta":2583,"navigation":480,"path":62,"seo":2584,"stem":63,"__hash__":2585},"docs\u002F1.guide\u002F3.positioning\u002F2.virtual-anchors.md",{"type":229,"value":230,"toc":2561},"minimark",[231,235,243,248,264,326,329,352,358,363,368,375,892,897,901,904,1562,1565,1569,1586,1696,1699,1703,1711,1715,1718,2410,2420,2424,2428,2441,2456,2463,2474,2487,2491,2502,2505,2531,2535,2557],[232,233,234],"p",{},"Sometimes there is no real DOM element to serve as an anchor. You may need to position a panel at the mouse cursor, pin a context menu to right-click coordinates, or anchor a formatting toolbar to a highlighted text selection.",[232,236,237,238,242],{},"VFloat supports these scenarios through ",[239,240,241],"strong",{},"virtual anchors",".",[244,245,247],"h2",{"id":246},"mental-model-geometry-over-dom-elements","Mental model: geometry over DOM elements",[232,249,250,251,255,256,259,260,263],{},"VFloat only requires a ",[252,253,254],"code",{},"getBoundingClientRect()"," implementation to compute coordinates. An anchor does not need to be an ",[252,257,258],{},"HTMLElement",". Any object that satisfies the ",[252,261,262],{},"VirtualElement"," contract can serve as an anchor:",[265,266,271],"pre",{"className":267,"code":268,"language":269,"meta":270,"style":270},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","interface VirtualElement {\n  getBoundingClientRect(): DOMRect;\n  contextElement?: Element;\n}\n","ts","",[252,272,273,290,306,320],{"__ignoreMap":270},[274,275,278,282,286],"span",{"class":276,"line":277},"line",1,[274,279,281],{"class":280},"spNyl","interface",[274,283,285],{"class":284},"sBMFI"," VirtualElement",[274,287,289],{"class":288},"sMK4o"," {\n",[274,291,293,297,300,303],{"class":276,"line":292},2,[274,294,296],{"class":295},"swJcz","  getBoundingClientRect",[274,298,299],{"class":288},"():",[274,301,302],{"class":284}," DOMRect",[274,304,305],{"class":288},";\n",[274,307,309,312,315,318],{"class":276,"line":308},3,[274,310,311],{"class":295},"  contextElement",[274,313,314],{"class":288},"?:",[274,316,317],{"class":284}," Element",[274,319,305],{"class":288},[274,321,323],{"class":276,"line":322},4,[274,324,325],{"class":288},"}\n",[232,327,328],{},"VFloat provides two practical approaches for virtual anchors:",[330,331,332,344],"ol",{},[333,334,335,343],"li",{},[239,336,337,342],{},[338,339,340],"a",{"href":135},[252,341,134],{},":"," Automated pointer tracking for cursor-driven floating surfaces.",[333,345,346,351],{},[239,347,348,349,342],{},"Manual ",[252,350,262],{}," Explicit coordinate rectangles for text selections, canvas nodes, and external events.",[244,353,355,356],{"id":354},"pointer-driven-positioning-with-useclientpoint","Pointer-driven positioning with ",[252,357,134],{},[232,359,360,362],{},[252,361,134],{}," listens to pointer events and dynamically updates a virtual anchor reflecting the cursor's client coordinates.",[364,365,367],"h3",{"id":366},"follow-the-cursor","Follow the cursor",[232,369,370,371,374],{},"In ",[252,372,373],{},"\"follow\""," mode, the floating surface continuously tracks cursor movement while open:",[265,376,380],{"className":377,"code":378,"language":379,"meta":270,"style":270},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClientPoint, useFloatingNode, useHover, usePosition } from \"v-float\";\n\nconst trackingAreaEl = ref\u003CHTMLElement | null>(null);\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node, {\n  placement: \"right-start\",\n  middlewares: {\n    offset: 12,\n  },\n});\n\nuseClientPoint(node, {\n  trackingAreaEl,\n  trackingMode: \"follow\",\n});\n\nuseHover(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"trackingAreaEl\" class=\"interactive-canvas\">\n    Hover anywhere in this area to inspect coordinates.\n\n    \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" class=\"cursor-tooltip\">Inspection panel\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[252,381,382,410,438,476,482,520,550,580,585,616,628,646,656,670,676,685,690,701,709,726,735,740,750,760,765,775,809,815,820,873,883],{"__ignoreMap":270},[274,383,384,387,390,393,396,399,402,405,407],{"class":276,"line":277},[274,385,386],{"class":288},"\u003C",[274,388,389],{"class":295},"script",[274,391,392],{"class":280}," setup",[274,394,395],{"class":280}," lang",[274,397,398],{"class":288},"=",[274,400,401],{"class":288},"\"",[274,403,269],{"class":404},"sfazB",[274,406,401],{"class":288},[274,408,409],{"class":288},">\n",[274,411,412,416,419,423,426,429,432,434,436],{"class":276,"line":292},[274,413,415],{"class":414},"s7zQu","import",[274,417,418],{"class":288}," {",[274,420,422],{"class":421},"sTEyZ"," ref",[274,424,425],{"class":288}," }",[274,427,428],{"class":414}," from",[274,430,431],{"class":288}," \"",[274,433,379],{"class":404},[274,435,401],{"class":288},[274,437,305],{"class":288},[274,439,440,442,444,447,450,453,455,458,460,463,465,467,469,472,474],{"class":276,"line":308},[274,441,415],{"class":414},[274,443,418],{"class":288},[274,445,446],{"class":421}," useClientPoint",[274,448,449],{"class":288},",",[274,451,452],{"class":421}," useFloatingNode",[274,454,449],{"class":288},[274,456,457],{"class":421}," useHover",[274,459,449],{"class":288},[274,461,462],{"class":421}," usePosition",[274,464,425],{"class":288},[274,466,428],{"class":414},[274,468,431],{"class":288},[274,470,471],{"class":404},"v-float",[274,473,401],{"class":288},[274,475,305],{"class":288},[274,477,478],{"class":276,"line":322},[274,479,481],{"emptyLinePlaceholder":480},true,"\n",[274,483,485,488,491,493,496,498,500,503,506,509,512,515,518],{"class":276,"line":484},5,[274,486,487],{"class":280},"const",[274,489,490],{"class":421}," trackingAreaEl ",[274,492,398],{"class":288},[274,494,422],{"class":495},"s2Zo4",[274,497,386],{"class":288},[274,499,258],{"class":284},[274,501,502],{"class":288}," |",[274,504,505],{"class":284}," null",[274,507,508],{"class":288},">",[274,510,511],{"class":421},"(",[274,513,514],{"class":288},"null",[274,516,517],{"class":421},")",[274,519,305],{"class":288},[274,521,523,525,528,530,532,534,536,538,540,542,544,546,548],{"class":276,"line":522},6,[274,524,487],{"class":280},[274,526,527],{"class":421}," anchorEl ",[274,529,398],{"class":288},[274,531,422],{"class":495},[274,533,386],{"class":288},[274,535,258],{"class":284},[274,537,502],{"class":288},[274,539,505],{"class":284},[274,541,508],{"class":288},[274,543,511],{"class":421},[274,545,514],{"class":288},[274,547,517],{"class":421},[274,549,305],{"class":288},[274,551,553,555,558,560,562,564,566,568,570,572,574,576,578],{"class":276,"line":552},7,[274,554,487],{"class":280},[274,556,557],{"class":421}," floatingEl ",[274,559,398],{"class":288},[274,561,422],{"class":495},[274,563,386],{"class":288},[274,565,258],{"class":284},[274,567,502],{"class":288},[274,569,505],{"class":284},[274,571,508],{"class":288},[274,573,511],{"class":421},[274,575,514],{"class":288},[274,577,517],{"class":421},[274,579,305],{"class":288},[274,581,583],{"class":276,"line":582},8,[274,584,481],{"emptyLinePlaceholder":480},[274,586,588,590,593,595,597,599,602,605,607,609,612,614],{"class":276,"line":587},9,[274,589,487],{"class":280},[274,591,592],{"class":421}," node ",[274,594,398],{"class":288},[274,596,452],{"class":495},[274,598,511],{"class":421},[274,600,601],{"class":288},"{",[274,603,604],{"class":421}," anchorEl",[274,606,449],{"class":288},[274,608,557],{"class":421},[274,610,611],{"class":288},"}",[274,613,517],{"class":421},[274,615,305],{"class":288},[274,617,619,621,624,626],{"class":276,"line":618},10,[274,620,126],{"class":495},[274,622,623],{"class":421},"(node",[274,625,449],{"class":288},[274,627,289],{"class":288},[274,629,631,634,636,638,641,643],{"class":276,"line":630},11,[274,632,633],{"class":295},"  placement",[274,635,342],{"class":288},[274,637,431],{"class":288},[274,639,640],{"class":404},"right-start",[274,642,401],{"class":288},[274,644,645],{"class":288},",\n",[274,647,649,652,654],{"class":276,"line":648},12,[274,650,651],{"class":295},"  middlewares",[274,653,342],{"class":288},[274,655,289],{"class":288},[274,657,659,662,664,668],{"class":276,"line":658},13,[274,660,661],{"class":295},"    offset",[274,663,342],{"class":288},[274,665,667],{"class":666},"sbssI"," 12",[274,669,645],{"class":288},[274,671,673],{"class":276,"line":672},14,[274,674,675],{"class":288},"  },\n",[274,677,679,681,683],{"class":276,"line":678},15,[274,680,611],{"class":288},[274,682,517],{"class":421},[274,684,305],{"class":288},[274,686,688],{"class":276,"line":687},16,[274,689,481],{"emptyLinePlaceholder":480},[274,691,693,695,697,699],{"class":276,"line":692},17,[274,694,134],{"class":495},[274,696,623],{"class":421},[274,698,449],{"class":288},[274,700,289],{"class":288},[274,702,704,707],{"class":276,"line":703},18,[274,705,706],{"class":421},"  trackingAreaEl",[274,708,645],{"class":288},[274,710,712,715,717,719,722,724],{"class":276,"line":711},19,[274,713,714],{"class":295},"  trackingMode",[274,716,342],{"class":288},[274,718,431],{"class":288},[274,720,721],{"class":404},"follow",[274,723,401],{"class":288},[274,725,645],{"class":288},[274,727,729,731,733],{"class":276,"line":728},20,[274,730,611],{"class":288},[274,732,517],{"class":421},[274,734,305],{"class":288},[274,736,738],{"class":276,"line":737},21,[274,739,481],{"emptyLinePlaceholder":480},[274,741,743,745,748],{"class":276,"line":742},22,[274,744,148],{"class":495},[274,746,747],{"class":421},"(node)",[274,749,305],{"class":288},[274,751,753,756,758],{"class":276,"line":752},23,[274,754,755],{"class":288},"\u003C\u002F",[274,757,389],{"class":295},[274,759,409],{"class":288},[274,761,763],{"class":276,"line":762},24,[274,764,481],{"emptyLinePlaceholder":480},[274,766,768,770,773],{"class":276,"line":767},25,[274,769,386],{"class":288},[274,771,772],{"class":295},"template",[274,774,409],{"class":288},[274,776,778,781,784,786,788,790,793,795,798,800,802,805,807],{"class":276,"line":777},26,[274,779,780],{"class":288},"  \u003C",[274,782,783],{"class":295},"div",[274,785,422],{"class":280},[274,787,398],{"class":288},[274,789,401],{"class":288},[274,791,792],{"class":404},"trackingAreaEl",[274,794,401],{"class":288},[274,796,797],{"class":280}," class",[274,799,398],{"class":288},[274,801,401],{"class":288},[274,803,804],{"class":404},"interactive-canvas",[274,806,401],{"class":288},[274,808,409],{"class":288},[274,810,812],{"class":276,"line":811},27,[274,813,814],{"class":421},"    Hover anywhere in this area to inspect coordinates.\n",[274,816,818],{"class":276,"line":817},28,[274,819,481],{"emptyLinePlaceholder":480},[274,821,823,826,828,831,833,835,838,840,842,844,846,849,851,853,855,857,860,862,864,867,869,871],{"class":276,"line":822},29,[274,824,825],{"class":288},"    \u003C",[274,827,783],{"class":295},[274,829,830],{"class":280}," v-if",[274,832,398],{"class":288},[274,834,401],{"class":288},[274,836,837],{"class":404},"node.open.value",[274,839,401],{"class":288},[274,841,422],{"class":280},[274,843,398],{"class":288},[274,845,401],{"class":288},[274,847,848],{"class":404},"floatingEl",[274,850,401],{"class":288},[274,852,797],{"class":280},[274,854,398],{"class":288},[274,856,401],{"class":288},[274,858,859],{"class":404},"cursor-tooltip",[274,861,401],{"class":288},[274,863,508],{"class":288},[274,865,866],{"class":421},"Inspection panel",[274,868,755],{"class":288},[274,870,783],{"class":295},[274,872,409],{"class":288},[274,874,876,879,881],{"class":276,"line":875},30,[274,877,878],{"class":288},"  \u003C\u002F",[274,880,783],{"class":295},[274,882,409],{"class":288},[274,884,886,888,890],{"class":276,"line":885},31,[274,887,755],{"class":288},[274,889,772],{"class":295},[274,891,409],{"class":288},[232,893,370,894,896],{},[252,895,373],{}," mode, each mouse move event updates the virtual anchor and triggers repositioning.",[364,898,900],{"id":899},"keep-the-opening-point-static-context-menus","Keep the opening point static (Context menus)",[232,902,903],{},"For context menus and right-click inspectors, you want the menu to open at the pointer's location at click time and remain fixed there, even as the cursor moves toward menu items:",[265,905,907],{"className":377,"code":906,"language":379,"meta":270,"style":270},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport {\n  useClientPoint,\n  useEscapeKey,\n  useFloatingNode,\n  useOutsideClick,\n  usePosition,\n} from \"v-float\";\n\nconst areaEl = ref\u003CHTMLElement | null>(null);\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n\nuseClientPoint(node, {\n  trackingAreaEl: areaEl,\n  trackingMode: \"static\",\n});\n\nuseOutsideClick(node);\nuseEscapeKey(node);\n\nfunction onContextMenu(e: MouseEvent) {\n  e.preventDefault();\n  node.open.value = true;\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"areaEl\" class=\"context-zone\" @contextmenu=\"onContextMenu\">\n    Right-click inside this container.\n\n    \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" class=\"context-menu\">\n      \u003Cul>\n        \u003Cli>Inspect element\u003C\u002Fli>\n        \u003Cli>Copy link\u003C\u002Fli>\n        \u003Cli>Reload\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[252,908,909,929,949,955,962,969,976,983,990,1004,1008,1037,1065,1093,1097,1123,1133,1148,1156,1169,1189,1193,1201,1205,1215,1226,1241,1249,1253,1261,1269,1273,1297,1313,1336,1341,1350,1355,1364,1407,1413,1418,1458,1469,1488,1506,1524,1534,1544,1553],{"__ignoreMap":270},[274,910,911,913,915,917,919,921,923,925,927],{"class":276,"line":277},[274,912,386],{"class":288},[274,914,389],{"class":295},[274,916,392],{"class":280},[274,918,395],{"class":280},[274,920,398],{"class":288},[274,922,401],{"class":288},[274,924,269],{"class":404},[274,926,401],{"class":288},[274,928,409],{"class":288},[274,930,931,933,935,937,939,941,943,945,947],{"class":276,"line":292},[274,932,415],{"class":414},[274,934,418],{"class":288},[274,936,422],{"class":421},[274,938,425],{"class":288},[274,940,428],{"class":414},[274,942,431],{"class":288},[274,944,379],{"class":404},[274,946,401],{"class":288},[274,948,305],{"class":288},[274,950,951,953],{"class":276,"line":308},[274,952,415],{"class":414},[274,954,289],{"class":288},[274,956,957,960],{"class":276,"line":322},[274,958,959],{"class":421},"  useClientPoint",[274,961,645],{"class":288},[274,963,964,967],{"class":276,"line":484},[274,965,966],{"class":421},"  useEscapeKey",[274,968,645],{"class":288},[274,970,971,974],{"class":276,"line":522},[274,972,973],{"class":421},"  useFloatingNode",[274,975,645],{"class":288},[274,977,978,981],{"class":276,"line":552},[274,979,980],{"class":421},"  useOutsideClick",[274,982,645],{"class":288},[274,984,985,988],{"class":276,"line":582},[274,986,987],{"class":421},"  usePosition",[274,989,645],{"class":288},[274,991,992,994,996,998,1000,1002],{"class":276,"line":587},[274,993,611],{"class":288},[274,995,428],{"class":414},[274,997,431],{"class":288},[274,999,471],{"class":404},[274,1001,401],{"class":288},[274,1003,305],{"class":288},[274,1005,1006],{"class":276,"line":618},[274,1007,481],{"emptyLinePlaceholder":480},[274,1009,1010,1012,1015,1017,1019,1021,1023,1025,1027,1029,1031,1033,1035],{"class":276,"line":630},[274,1011,487],{"class":280},[274,1013,1014],{"class":421}," areaEl ",[274,1016,398],{"class":288},[274,1018,422],{"class":495},[274,1020,386],{"class":288},[274,1022,258],{"class":284},[274,1024,502],{"class":288},[274,1026,505],{"class":284},[274,1028,508],{"class":288},[274,1030,511],{"class":421},[274,1032,514],{"class":288},[274,1034,517],{"class":421},[274,1036,305],{"class":288},[274,1038,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061,1063],{"class":276,"line":648},[274,1040,487],{"class":280},[274,1042,527],{"class":421},[274,1044,398],{"class":288},[274,1046,422],{"class":495},[274,1048,386],{"class":288},[274,1050,258],{"class":284},[274,1052,502],{"class":288},[274,1054,505],{"class":284},[274,1056,508],{"class":288},[274,1058,511],{"class":421},[274,1060,514],{"class":288},[274,1062,517],{"class":421},[274,1064,305],{"class":288},[274,1066,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091],{"class":276,"line":658},[274,1068,487],{"class":280},[274,1070,557],{"class":421},[274,1072,398],{"class":288},[274,1074,422],{"class":495},[274,1076,386],{"class":288},[274,1078,258],{"class":284},[274,1080,502],{"class":288},[274,1082,505],{"class":284},[274,1084,508],{"class":288},[274,1086,511],{"class":421},[274,1088,514],{"class":288},[274,1090,517],{"class":421},[274,1092,305],{"class":288},[274,1094,1095],{"class":276,"line":672},[274,1096,481],{"emptyLinePlaceholder":480},[274,1098,1099,1101,1103,1105,1107,1109,1111,1113,1115,1117,1119,1121],{"class":276,"line":678},[274,1100,487],{"class":280},[274,1102,592],{"class":421},[274,1104,398],{"class":288},[274,1106,452],{"class":495},[274,1108,511],{"class":421},[274,1110,601],{"class":288},[274,1112,604],{"class":421},[274,1114,449],{"class":288},[274,1116,557],{"class":421},[274,1118,611],{"class":288},[274,1120,517],{"class":421},[274,1122,305],{"class":288},[274,1124,1125,1127,1129,1131],{"class":276,"line":687},[274,1126,126],{"class":495},[274,1128,623],{"class":421},[274,1130,449],{"class":288},[274,1132,289],{"class":288},[274,1134,1135,1137,1139,1141,1144,1146],{"class":276,"line":692},[274,1136,633],{"class":295},[274,1138,342],{"class":288},[274,1140,431],{"class":288},[274,1142,1143],{"class":404},"bottom-start",[274,1145,401],{"class":288},[274,1147,645],{"class":288},[274,1149,1150,1152,1154],{"class":276,"line":703},[274,1151,651],{"class":295},[274,1153,342],{"class":288},[274,1155,289],{"class":288},[274,1157,1158,1161,1163,1167],{"class":276,"line":711},[274,1159,1160],{"class":295},"    flip",[274,1162,342],{"class":288},[274,1164,1166],{"class":1165},"sfNiH"," true",[274,1168,645],{"class":288},[274,1170,1171,1174,1176,1178,1181,1183,1186],{"class":276,"line":728},[274,1172,1173],{"class":295},"    shift",[274,1175,342],{"class":288},[274,1177,418],{"class":288},[274,1179,1180],{"class":295}," padding",[274,1182,342],{"class":288},[274,1184,1185],{"class":666}," 8",[274,1187,1188],{"class":288}," },\n",[274,1190,1191],{"class":276,"line":737},[274,1192,675],{"class":288},[274,1194,1195,1197,1199],{"class":276,"line":742},[274,1196,611],{"class":288},[274,1198,517],{"class":421},[274,1200,305],{"class":288},[274,1202,1203],{"class":276,"line":752},[274,1204,481],{"emptyLinePlaceholder":480},[274,1206,1207,1209,1211,1213],{"class":276,"line":762},[274,1208,134],{"class":495},[274,1210,623],{"class":421},[274,1212,449],{"class":288},[274,1214,289],{"class":288},[274,1216,1217,1219,1221,1224],{"class":276,"line":767},[274,1218,706],{"class":295},[274,1220,342],{"class":288},[274,1222,1223],{"class":421}," areaEl",[274,1225,645],{"class":288},[274,1227,1228,1230,1232,1234,1237,1239],{"class":276,"line":777},[274,1229,714],{"class":295},[274,1231,342],{"class":288},[274,1233,431],{"class":288},[274,1235,1236],{"class":404},"static",[274,1238,401],{"class":288},[274,1240,645],{"class":288},[274,1242,1243,1245,1247],{"class":276,"line":811},[274,1244,611],{"class":288},[274,1246,517],{"class":421},[274,1248,305],{"class":288},[274,1250,1251],{"class":276,"line":817},[274,1252,481],{"emptyLinePlaceholder":480},[274,1254,1255,1257,1259],{"class":276,"line":822},[274,1256,160],{"class":495},[274,1258,747],{"class":421},[274,1260,305],{"class":288},[274,1262,1263,1265,1267],{"class":276,"line":875},[274,1264,164],{"class":495},[274,1266,747],{"class":421},[274,1268,305],{"class":288},[274,1270,1271],{"class":276,"line":885},[274,1272,481],{"emptyLinePlaceholder":480},[274,1274,1276,1279,1282,1284,1288,1290,1293,1295],{"class":276,"line":1275},32,[274,1277,1278],{"class":280},"function",[274,1280,1281],{"class":495}," onContextMenu",[274,1283,511],{"class":288},[274,1285,1287],{"class":1286},"sHdIc","e",[274,1289,342],{"class":288},[274,1291,1292],{"class":284}," MouseEvent",[274,1294,517],{"class":288},[274,1296,289],{"class":288},[274,1298,1300,1303,1305,1308,1311],{"class":276,"line":1299},33,[274,1301,1302],{"class":421},"  e",[274,1304,242],{"class":288},[274,1306,1307],{"class":495},"preventDefault",[274,1309,1310],{"class":295},"()",[274,1312,305],{"class":288},[274,1314,1316,1319,1321,1324,1326,1329,1332,1334],{"class":276,"line":1315},34,[274,1317,1318],{"class":421},"  node",[274,1320,242],{"class":288},[274,1322,1323],{"class":421},"open",[274,1325,242],{"class":288},[274,1327,1328],{"class":421},"value",[274,1330,1331],{"class":288}," =",[274,1333,1166],{"class":1165},[274,1335,305],{"class":288},[274,1337,1339],{"class":276,"line":1338},35,[274,1340,325],{"class":288},[274,1342,1344,1346,1348],{"class":276,"line":1343},36,[274,1345,755],{"class":288},[274,1347,389],{"class":295},[274,1349,409],{"class":288},[274,1351,1353],{"class":276,"line":1352},37,[274,1354,481],{"emptyLinePlaceholder":480},[274,1356,1358,1360,1362],{"class":276,"line":1357},38,[274,1359,386],{"class":288},[274,1361,772],{"class":295},[274,1363,409],{"class":288},[274,1365,1367,1369,1371,1373,1375,1377,1380,1382,1384,1386,1388,1391,1393,1396,1398,1400,1403,1405],{"class":276,"line":1366},39,[274,1368,780],{"class":288},[274,1370,783],{"class":295},[274,1372,422],{"class":280},[274,1374,398],{"class":288},[274,1376,401],{"class":288},[274,1378,1379],{"class":404},"areaEl",[274,1381,401],{"class":288},[274,1383,797],{"class":280},[274,1385,398],{"class":288},[274,1387,401],{"class":288},[274,1389,1390],{"class":404},"context-zone",[274,1392,401],{"class":288},[274,1394,1395],{"class":280}," @contextmenu",[274,1397,398],{"class":288},[274,1399,401],{"class":288},[274,1401,1402],{"class":404},"onContextMenu",[274,1404,401],{"class":288},[274,1406,409],{"class":288},[274,1408,1410],{"class":276,"line":1409},40,[274,1411,1412],{"class":421},"    Right-click inside this container.\n",[274,1414,1416],{"class":276,"line":1415},41,[274,1417,481],{"emptyLinePlaceholder":480},[274,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447,1449,1451,1454,1456],{"class":276,"line":1420},42,[274,1422,825],{"class":288},[274,1424,783],{"class":295},[274,1426,830],{"class":280},[274,1428,398],{"class":288},[274,1430,401],{"class":288},[274,1432,837],{"class":404},[274,1434,401],{"class":288},[274,1436,422],{"class":280},[274,1438,398],{"class":288},[274,1440,401],{"class":288},[274,1442,848],{"class":404},[274,1444,401],{"class":288},[274,1446,797],{"class":280},[274,1448,398],{"class":288},[274,1450,401],{"class":288},[274,1452,1453],{"class":404},"context-menu",[274,1455,401],{"class":288},[274,1457,409],{"class":288},[274,1459,1461,1464,1467],{"class":276,"line":1460},43,[274,1462,1463],{"class":288},"      \u003C",[274,1465,1466],{"class":295},"ul",[274,1468,409],{"class":288},[274,1470,1472,1475,1477,1479,1482,1484,1486],{"class":276,"line":1471},44,[274,1473,1474],{"class":288},"        \u003C",[274,1476,333],{"class":295},[274,1478,508],{"class":288},[274,1480,1481],{"class":421},"Inspect element",[274,1483,755],{"class":288},[274,1485,333],{"class":295},[274,1487,409],{"class":288},[274,1489,1491,1493,1495,1497,1500,1502,1504],{"class":276,"line":1490},45,[274,1492,1474],{"class":288},[274,1494,333],{"class":295},[274,1496,508],{"class":288},[274,1498,1499],{"class":421},"Copy link",[274,1501,755],{"class":288},[274,1503,333],{"class":295},[274,1505,409],{"class":288},[274,1507,1509,1511,1513,1515,1518,1520,1522],{"class":276,"line":1508},46,[274,1510,1474],{"class":288},[274,1512,333],{"class":295},[274,1514,508],{"class":288},[274,1516,1517],{"class":421},"Reload",[274,1519,755],{"class":288},[274,1521,333],{"class":295},[274,1523,409],{"class":288},[274,1525,1527,1530,1532],{"class":276,"line":1526},47,[274,1528,1529],{"class":288},"      \u003C\u002F",[274,1531,1466],{"class":295},[274,1533,409],{"class":288},[274,1535,1537,1540,1542],{"class":276,"line":1536},48,[274,1538,1539],{"class":288},"    \u003C\u002F",[274,1541,783],{"class":295},[274,1543,409],{"class":288},[274,1545,1547,1549,1551],{"class":276,"line":1546},49,[274,1548,878],{"class":288},[274,1550,783],{"class":295},[274,1552,409],{"class":288},[274,1554,1556,1558,1560],{"class":276,"line":1555},50,[274,1557,755],{"class":288},[274,1559,772],{"class":295},[274,1561,409],{"class":288},[232,1563,1564],{},"Static mode captures coordinates at the triggering interaction and holds them steady, preventing the menu from drifting across the screen as the user navigates menu items.",[364,1566,1568],{"id":1567},"controlled-programmatic-coordinates","Controlled programmatic coordinates",[232,1570,1571,1572,1575,1576,1579,1580,1582,1583,1585],{},"You can pass reactive ",[252,1573,1574],{},"x"," and ",[252,1577,1578],{},"y"," refs directly to ",[252,1581,134],{},". When both resolve to valid numbers, ",[252,1584,134],{}," enters controlled mode and pointer event tracking detaches:",[265,1587,1589],{"className":267,"code":1588,"language":269,"meta":270,"style":270},"const cursorX = ref\u003Cnumber | null>(null);\nconst cursorY = ref\u003Cnumber | null>(null);\n\nuseClientPoint(node, {\n  x: cursorX,\n  y: cursorY,\n});\n",[252,1590,1591,1621,1650,1654,1664,1676,1688],{"__ignoreMap":270},[274,1592,1593,1595,1598,1600,1602,1604,1607,1609,1611,1613,1615,1617,1619],{"class":276,"line":277},[274,1594,487],{"class":280},[274,1596,1597],{"class":421}," cursorX ",[274,1599,398],{"class":288},[274,1601,422],{"class":495},[274,1603,386],{"class":288},[274,1605,1606],{"class":284},"number",[274,1608,502],{"class":288},[274,1610,505],{"class":284},[274,1612,508],{"class":288},[274,1614,511],{"class":421},[274,1616,514],{"class":288},[274,1618,517],{"class":421},[274,1620,305],{"class":288},[274,1622,1623,1625,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646,1648],{"class":276,"line":292},[274,1624,487],{"class":280},[274,1626,1627],{"class":421}," cursorY ",[274,1629,398],{"class":288},[274,1631,422],{"class":495},[274,1633,386],{"class":288},[274,1635,1606],{"class":284},[274,1637,502],{"class":288},[274,1639,505],{"class":284},[274,1641,508],{"class":288},[274,1643,511],{"class":421},[274,1645,514],{"class":288},[274,1647,517],{"class":421},[274,1649,305],{"class":288},[274,1651,1652],{"class":276,"line":308},[274,1653,481],{"emptyLinePlaceholder":480},[274,1655,1656,1658,1660,1662],{"class":276,"line":322},[274,1657,134],{"class":495},[274,1659,623],{"class":421},[274,1661,449],{"class":288},[274,1663,289],{"class":288},[274,1665,1666,1669,1671,1674],{"class":276,"line":484},[274,1667,1668],{"class":295},"  x",[274,1670,342],{"class":288},[274,1672,1673],{"class":421}," cursorX",[274,1675,645],{"class":288},[274,1677,1678,1681,1683,1686],{"class":276,"line":522},[274,1679,1680],{"class":295},"  y",[274,1682,342],{"class":288},[274,1684,1685],{"class":421}," cursorY",[274,1687,645],{"class":288},[274,1689,1690,1692,1694],{"class":276,"line":552},[274,1691,611],{"class":288},[274,1693,517],{"class":421},[274,1695,305],{"class":288},[232,1697,1698],{},"This is useful when positioning coordinates are supplied by external state, such as WebSockets or canvas interaction engines.",[244,1700,1702],{"id":1701},"manual-virtual-anchors","Manual virtual anchors",[232,1704,1705,1706,1708,1709,342],{},"When positioning against browser selections or non-pointer geometry, you can construct a ",[252,1707,262],{}," directly and pass it to ",[252,1710,117],{},[364,1712,1714],{"id":1713},"text-selection-toolbar","Text selection toolbar",[232,1716,1717],{},"A common virtual anchor pattern is a floating formatting toolbar anchored to the user's highlighted text:",[265,1719,1721],{"className":377,"code":1720,"language":379,"meta":270,"style":270},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { type VirtualElement, useFloatingNode, usePosition } from \"v-float\";\n\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst anchorEl = ref\u003CVirtualElement | null>(null);\nconst open = ref(false);\n\nconst node = useFloatingNode({ anchorEl, floatingEl, open });\nusePosition(node, {\n  placement: \"top\",\n  middlewares: {\n    offset: 8,\n    shift: { padding: 8 },\n  },\n});\n\nfunction onMouseUp() {\n  const selection = window.getSelection();\n\n  if (!selection || selection.isCollapsed) {\n    open.value = false;\n    anchorEl.value = null;\n    return;\n  }\n\n  const range = selection.getRangeAt(0);\n\n  anchorEl.value = {\n    getBoundingClientRect() {\n      return range.getBoundingClientRect();\n    },\n  };\n  open.value = true;\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"prose\" @mouseup=\"onMouseUp\">\n    \u003Cp>Select any text in this paragraph to see the toolbar appear.\u003C\u002Fp>\n\n    \u003Cdiv v-if=\"open\" ref=\"floatingEl\" class=\"toolbar\">\n      \u003Cbutton type=\"button\">Bold\u003C\u002Fbutton>\n      \u003Cbutton type=\"button\">Italic\u003C\u002Fbutton>\n      \u003Cbutton type=\"button\">Link\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[252,1722,1723,1743,1763,1794,1798,1826,1854,1874,1878,1909,1919,1934,1942,1952,1968,1972,1980,1984,1995,2017,2021,2051,2067,2081,2088,2093,2097,2122,2126,2139,2148,2164,2169,2174,2189,2193,2201,2205,2213,2244,2261,2265,2304,2332,2359,2386,2394,2402],{"__ignoreMap":270},[274,1724,1725,1727,1729,1731,1733,1735,1737,1739,1741],{"class":276,"line":277},[274,1726,386],{"class":288},[274,1728,389],{"class":295},[274,1730,392],{"class":280},[274,1732,395],{"class":280},[274,1734,398],{"class":288},[274,1736,401],{"class":288},[274,1738,269],{"class":404},[274,1740,401],{"class":288},[274,1742,409],{"class":288},[274,1744,1745,1747,1749,1751,1753,1755,1757,1759,1761],{"class":276,"line":292},[274,1746,415],{"class":414},[274,1748,418],{"class":288},[274,1750,422],{"class":421},[274,1752,425],{"class":288},[274,1754,428],{"class":414},[274,1756,431],{"class":288},[274,1758,379],{"class":404},[274,1760,401],{"class":288},[274,1762,305],{"class":288},[274,1764,1765,1767,1769,1772,1774,1776,1778,1780,1782,1784,1786,1788,1790,1792],{"class":276,"line":308},[274,1766,415],{"class":414},[274,1768,418],{"class":288},[274,1770,1771],{"class":414}," type",[274,1773,285],{"class":421},[274,1775,449],{"class":288},[274,1777,452],{"class":421},[274,1779,449],{"class":288},[274,1781,462],{"class":421},[274,1783,425],{"class":288},[274,1785,428],{"class":414},[274,1787,431],{"class":288},[274,1789,471],{"class":404},[274,1791,401],{"class":288},[274,1793,305],{"class":288},[274,1795,1796],{"class":276,"line":322},[274,1797,481],{"emptyLinePlaceholder":480},[274,1799,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818,1820,1822,1824],{"class":276,"line":484},[274,1801,487],{"class":280},[274,1803,557],{"class":421},[274,1805,398],{"class":288},[274,1807,422],{"class":495},[274,1809,386],{"class":288},[274,1811,258],{"class":284},[274,1813,502],{"class":288},[274,1815,505],{"class":284},[274,1817,508],{"class":288},[274,1819,511],{"class":421},[274,1821,514],{"class":288},[274,1823,517],{"class":421},[274,1825,305],{"class":288},[274,1827,1828,1830,1832,1834,1836,1838,1840,1842,1844,1846,1848,1850,1852],{"class":276,"line":522},[274,1829,487],{"class":280},[274,1831,527],{"class":421},[274,1833,398],{"class":288},[274,1835,422],{"class":495},[274,1837,386],{"class":288},[274,1839,262],{"class":284},[274,1841,502],{"class":288},[274,1843,505],{"class":284},[274,1845,508],{"class":288},[274,1847,511],{"class":421},[274,1849,514],{"class":288},[274,1851,517],{"class":421},[274,1853,305],{"class":288},[274,1855,1856,1858,1861,1863,1865,1867,1870,1872],{"class":276,"line":552},[274,1857,487],{"class":280},[274,1859,1860],{"class":421}," open ",[274,1862,398],{"class":288},[274,1864,422],{"class":495},[274,1866,511],{"class":421},[274,1868,1869],{"class":1165},"false",[274,1871,517],{"class":421},[274,1873,305],{"class":288},[274,1875,1876],{"class":276,"line":582},[274,1877,481],{"emptyLinePlaceholder":480},[274,1879,1880,1882,1884,1886,1888,1890,1892,1894,1896,1899,1901,1903,1905,1907],{"class":276,"line":587},[274,1881,487],{"class":280},[274,1883,592],{"class":421},[274,1885,398],{"class":288},[274,1887,452],{"class":495},[274,1889,511],{"class":421},[274,1891,601],{"class":288},[274,1893,604],{"class":421},[274,1895,449],{"class":288},[274,1897,1898],{"class":421}," floatingEl",[274,1900,449],{"class":288},[274,1902,1860],{"class":421},[274,1904,611],{"class":288},[274,1906,517],{"class":421},[274,1908,305],{"class":288},[274,1910,1911,1913,1915,1917],{"class":276,"line":618},[274,1912,126],{"class":495},[274,1914,623],{"class":421},[274,1916,449],{"class":288},[274,1918,289],{"class":288},[274,1920,1921,1923,1925,1927,1930,1932],{"class":276,"line":630},[274,1922,633],{"class":295},[274,1924,342],{"class":288},[274,1926,431],{"class":288},[274,1928,1929],{"class":404},"top",[274,1931,401],{"class":288},[274,1933,645],{"class":288},[274,1935,1936,1938,1940],{"class":276,"line":648},[274,1937,651],{"class":295},[274,1939,342],{"class":288},[274,1941,289],{"class":288},[274,1943,1944,1946,1948,1950],{"class":276,"line":658},[274,1945,661],{"class":295},[274,1947,342],{"class":288},[274,1949,1185],{"class":666},[274,1951,645],{"class":288},[274,1953,1954,1956,1958,1960,1962,1964,1966],{"class":276,"line":672},[274,1955,1173],{"class":295},[274,1957,342],{"class":288},[274,1959,418],{"class":288},[274,1961,1180],{"class":295},[274,1963,342],{"class":288},[274,1965,1185],{"class":666},[274,1967,1188],{"class":288},[274,1969,1970],{"class":276,"line":678},[274,1971,675],{"class":288},[274,1973,1974,1976,1978],{"class":276,"line":687},[274,1975,611],{"class":288},[274,1977,517],{"class":421},[274,1979,305],{"class":288},[274,1981,1982],{"class":276,"line":692},[274,1983,481],{"emptyLinePlaceholder":480},[274,1985,1986,1988,1991,1993],{"class":276,"line":703},[274,1987,1278],{"class":280},[274,1989,1990],{"class":495}," onMouseUp",[274,1992,1310],{"class":288},[274,1994,289],{"class":288},[274,1996,1997,2000,2003,2005,2008,2010,2013,2015],{"class":276,"line":711},[274,1998,1999],{"class":280},"  const",[274,2001,2002],{"class":421}," selection",[274,2004,1331],{"class":288},[274,2006,2007],{"class":421}," window",[274,2009,242],{"class":288},[274,2011,2012],{"class":495},"getSelection",[274,2014,1310],{"class":295},[274,2016,305],{"class":288},[274,2018,2019],{"class":276,"line":728},[274,2020,481],{"emptyLinePlaceholder":480},[274,2022,2023,2026,2029,2032,2035,2038,2040,2042,2045,2048],{"class":276,"line":737},[274,2024,2025],{"class":414},"  if",[274,2027,2028],{"class":295}," (",[274,2030,2031],{"class":288},"!",[274,2033,2034],{"class":421},"selection",[274,2036,2037],{"class":288}," ||",[274,2039,2002],{"class":421},[274,2041,242],{"class":288},[274,2043,2044],{"class":421},"isCollapsed",[274,2046,2047],{"class":295},") ",[274,2049,2050],{"class":288},"{\n",[274,2052,2053,2056,2058,2060,2062,2065],{"class":276,"line":742},[274,2054,2055],{"class":421},"    open",[274,2057,242],{"class":288},[274,2059,1328],{"class":421},[274,2061,1331],{"class":288},[274,2063,2064],{"class":1165}," false",[274,2066,305],{"class":288},[274,2068,2069,2072,2074,2076,2078],{"class":276,"line":752},[274,2070,2071],{"class":421},"    anchorEl",[274,2073,242],{"class":288},[274,2075,1328],{"class":421},[274,2077,1331],{"class":288},[274,2079,2080],{"class":288}," null;\n",[274,2082,2083,2086],{"class":276,"line":762},[274,2084,2085],{"class":414},"    return",[274,2087,305],{"class":288},[274,2089,2090],{"class":276,"line":767},[274,2091,2092],{"class":288},"  }\n",[274,2094,2095],{"class":276,"line":777},[274,2096,481],{"emptyLinePlaceholder":480},[274,2098,2099,2101,2104,2106,2108,2110,2113,2115,2118,2120],{"class":276,"line":811},[274,2100,1999],{"class":280},[274,2102,2103],{"class":421}," range",[274,2105,1331],{"class":288},[274,2107,2002],{"class":421},[274,2109,242],{"class":288},[274,2111,2112],{"class":495},"getRangeAt",[274,2114,511],{"class":295},[274,2116,2117],{"class":666},"0",[274,2119,517],{"class":295},[274,2121,305],{"class":288},[274,2123,2124],{"class":276,"line":817},[274,2125,481],{"emptyLinePlaceholder":480},[274,2127,2128,2131,2133,2135,2137],{"class":276,"line":822},[274,2129,2130],{"class":421},"  anchorEl",[274,2132,242],{"class":288},[274,2134,1328],{"class":421},[274,2136,1331],{"class":288},[274,2138,289],{"class":288},[274,2140,2141,2144,2146],{"class":276,"line":875},[274,2142,2143],{"class":295},"    getBoundingClientRect",[274,2145,1310],{"class":288},[274,2147,289],{"class":288},[274,2149,2150,2153,2155,2157,2160,2162],{"class":276,"line":885},[274,2151,2152],{"class":414},"      return",[274,2154,2103],{"class":421},[274,2156,242],{"class":288},[274,2158,2159],{"class":495},"getBoundingClientRect",[274,2161,1310],{"class":295},[274,2163,305],{"class":288},[274,2165,2166],{"class":276,"line":1275},[274,2167,2168],{"class":288},"    },\n",[274,2170,2171],{"class":276,"line":1299},[274,2172,2173],{"class":288},"  };\n",[274,2175,2176,2179,2181,2183,2185,2187],{"class":276,"line":1315},[274,2177,2178],{"class":421},"  open",[274,2180,242],{"class":288},[274,2182,1328],{"class":421},[274,2184,1331],{"class":288},[274,2186,1166],{"class":1165},[274,2188,305],{"class":288},[274,2190,2191],{"class":276,"line":1338},[274,2192,325],{"class":288},[274,2194,2195,2197,2199],{"class":276,"line":1343},[274,2196,755],{"class":288},[274,2198,389],{"class":295},[274,2200,409],{"class":288},[274,2202,2203],{"class":276,"line":1352},[274,2204,481],{"emptyLinePlaceholder":480},[274,2206,2207,2209,2211],{"class":276,"line":1357},[274,2208,386],{"class":288},[274,2210,772],{"class":295},[274,2212,409],{"class":288},[274,2214,2215,2217,2219,2221,2223,2225,2228,2230,2233,2235,2237,2240,2242],{"class":276,"line":1366},[274,2216,780],{"class":288},[274,2218,783],{"class":295},[274,2220,797],{"class":280},[274,2222,398],{"class":288},[274,2224,401],{"class":288},[274,2226,2227],{"class":404},"prose",[274,2229,401],{"class":288},[274,2231,2232],{"class":280}," @mouseup",[274,2234,398],{"class":288},[274,2236,401],{"class":288},[274,2238,2239],{"class":404},"onMouseUp",[274,2241,401],{"class":288},[274,2243,409],{"class":288},[274,2245,2246,2248,2250,2252,2255,2257,2259],{"class":276,"line":1409},[274,2247,825],{"class":288},[274,2249,232],{"class":295},[274,2251,508],{"class":288},[274,2253,2254],{"class":421},"Select any text in this paragraph to see the toolbar appear.",[274,2256,755],{"class":288},[274,2258,232],{"class":295},[274,2260,409],{"class":288},[274,2262,2263],{"class":276,"line":1415},[274,2264,481],{"emptyLinePlaceholder":480},[274,2266,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2287,2289,2291,2293,2295,2297,2300,2302],{"class":276,"line":1420},[274,2268,825],{"class":288},[274,2270,783],{"class":295},[274,2272,830],{"class":280},[274,2274,398],{"class":288},[274,2276,401],{"class":288},[274,2278,1323],{"class":404},[274,2280,401],{"class":288},[274,2282,422],{"class":280},[274,2284,398],{"class":288},[274,2286,401],{"class":288},[274,2288,848],{"class":404},[274,2290,401],{"class":288},[274,2292,797],{"class":280},[274,2294,398],{"class":288},[274,2296,401],{"class":288},[274,2298,2299],{"class":404},"toolbar",[274,2301,401],{"class":288},[274,2303,409],{"class":288},[274,2305,2306,2308,2311,2313,2315,2317,2319,2321,2323,2326,2328,2330],{"class":276,"line":1460},[274,2307,1463],{"class":288},[274,2309,2310],{"class":295},"button",[274,2312,1771],{"class":280},[274,2314,398],{"class":288},[274,2316,401],{"class":288},[274,2318,2310],{"class":404},[274,2320,401],{"class":288},[274,2322,508],{"class":288},[274,2324,2325],{"class":421},"Bold",[274,2327,755],{"class":288},[274,2329,2310],{"class":295},[274,2331,409],{"class":288},[274,2333,2334,2336,2338,2340,2342,2344,2346,2348,2350,2353,2355,2357],{"class":276,"line":1471},[274,2335,1463],{"class":288},[274,2337,2310],{"class":295},[274,2339,1771],{"class":280},[274,2341,398],{"class":288},[274,2343,401],{"class":288},[274,2345,2310],{"class":404},[274,2347,401],{"class":288},[274,2349,508],{"class":288},[274,2351,2352],{"class":421},"Italic",[274,2354,755],{"class":288},[274,2356,2310],{"class":295},[274,2358,409],{"class":288},[274,2360,2361,2363,2365,2367,2369,2371,2373,2375,2377,2380,2382,2384],{"class":276,"line":1490},[274,2362,1463],{"class":288},[274,2364,2310],{"class":295},[274,2366,1771],{"class":280},[274,2368,398],{"class":288},[274,2370,401],{"class":288},[274,2372,2310],{"class":404},[274,2374,401],{"class":288},[274,2376,508],{"class":288},[274,2378,2379],{"class":421},"Link",[274,2381,755],{"class":288},[274,2383,2310],{"class":295},[274,2385,409],{"class":288},[274,2387,2388,2390,2392],{"class":276,"line":1508},[274,2389,1539],{"class":288},[274,2391,783],{"class":295},[274,2393,409],{"class":288},[274,2395,2396,2398,2400],{"class":276,"line":1526},[274,2397,878],{"class":288},[274,2399,783],{"class":295},[274,2401,409],{"class":288},[274,2403,2404,2406,2408],{"class":276,"line":1536},[274,2405,755],{"class":288},[274,2407,772],{"class":295},[274,2409,409],{"class":288},[232,2411,2412,2413,2416,2417,2419],{},"Whenever the user highlights text, ",[252,2414,2415],{},"range.getBoundingClientRect()"," supplies the selection box, and ",[252,2418,126],{}," places the toolbar above the selected text.",[244,2421,2423],{"id":2422},"real-world-gotchas-and-realities","Real-world gotchas and realities",[364,2425,2427],{"id":2426},"the-placeholder-anchor-ref","The placeholder anchor ref",[232,2429,2430,2431,2433,2434,2437,2438,242],{},"When using ",[252,2432,134],{},", you must still pass an initial ",[252,2435,2436],{},"anchorEl"," ref to ",[252,2439,2440],{},"useFloatingNode({ anchorEl, floatingEl })",[232,2442,2443,2445,2446,2449,2450,2452,2453,2455],{},[252,2444,134],{}," overwrites ",[252,2447,2448],{},"node.refs.anchorEl"," with its internal virtual element when tracking starts. The initial ",[252,2451,2436],{}," is simply a placeholder required by ",[252,2454,117],{},"'s signature until the composable runs.",[364,2457,2459,2462],{"id":2458},"trackingmode-is-not-reactive-after-setup",[252,2460,2461],{},"trackingMode"," is not reactive after setup",[232,2464,2465,2028,2467,2469,2470,2473],{},[252,2466,2461],{},[252,2468,373],{}," vs ",[252,2471,2472],{},"\"static\"",") is read during composable setup. Pick the mode up-front based on the surface type:",[1466,2475,2476,2482],{},[333,2477,2478,2479,2481],{},"Use ",[252,2480,373],{}," for hover inspect panels, cursor tooltips, and crosshairs.",[333,2483,2478,2484,2486],{},[252,2485,2472],{}," for context menus, dropdowns opened at click points, and radial menus.",[364,2488,2490],{"id":2489},"virtual-anchors-carry-geometry-not-semantics","Virtual anchors carry geometry, not semantics",[232,2492,2493,2494,2497,2498,2501],{},"A virtual anchor provides coordinates, but it does not represent an actual HTML ",[252,2495,2496],{},"\u003Cbutton>"," or ",[252,2499,2500],{},"\u003Cinput>",". It does not dispatch DOM events, manage tab index, receive focus rings, or carry ARIA attributes.",[232,2503,2504],{},"When building virtual anchor surfaces, you must handle accessibility deliberately:",[330,2506,2507,2519,2525],{},[333,2508,2509,2512,2513,2497,2516,242],{},[239,2510,2511],{},"Focus ownership:"," When opening a context menu at cursor coordinates, explicitly move focus into the menu panel or first menu item using ",[252,2514,2515],{},"nextTick()",[252,2517,2518],{},"watch(open)",[333,2520,2521,2524],{},[239,2522,2523],{},"Keyboard activation:"," Provide keyboard alternatives for right-click context menus (such as the Shift+F10 key or a visible menu button).",[333,2526,2527,2530],{},[239,2528,2529],{},"Restoration:"," When closing a virtual anchor surface, decide where keyboard focus should return (such as the containing canvas or card element).",[244,2532,2534],{"id":2533},"where-to-go-next","Where to go next",[1466,2536,2537,2543,2548],{},[333,2538,2539,2540,2542],{},"Read ",[338,2541,57],{"href":58}," to configure collision handling, offset spacing, and boundary shifts.",[333,2544,2539,2545,2547],{},[338,2546,65],{"href":66}," to animate virtual-anchored surfaces cleanly.",[333,2549,2550,2551,2556],{},"Inspect the ",[338,2552,2553,2555],{"href":135},[252,2554,134],{}," API Reference"," for options and defaults.",[2558,2559,2560],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":270,"searchDepth":292,"depth":292,"links":2562},[2563,2564,2570,2573,2579],{"id":246,"depth":292,"text":247},{"id":354,"depth":292,"text":2565,"children":2566},"Pointer-driven positioning with useClientPoint",[2567,2568,2569],{"id":366,"depth":308,"text":367},{"id":899,"depth":308,"text":900},{"id":1567,"depth":308,"text":1568},{"id":1701,"depth":292,"text":1702,"children":2571},[2572],{"id":1713,"depth":308,"text":1714},{"id":2422,"depth":292,"text":2423,"children":2574},[2575,2576,2578],{"id":2426,"depth":308,"text":2427},{"id":2458,"depth":308,"text":2577},"trackingMode is not reactive after setup",{"id":2489,"depth":308,"text":2490},{"id":2533,"depth":292,"text":2534},"Position floating content from pointer coordinates, synthetic rectangles, and dynamic selections.","md",null,{},{"title":61,"description":2580},"DUpLlXoRA_lG3c2FsahY2c8mW4Xp6xRiXbYM29pDSPQ",[2587,2589],{"title":57,"path":58,"stem":59,"description":2588,"children":-1},"Configure positioning middlewares to handle spacing, collisions, sizing, and boundary constraints.",{"title":65,"path":66,"stem":67,"description":2590,"children":-1},"Animate floating elements with Vue transitions and CSS without layout jumps or origin flashes.",1791268047290]