[{"data":1,"prerenderedAt":1890},["ShallowReactive",2],{"navigation_docs":3,"-guide-positioning-use-virtual-anchors":271,"-guide-positioning-use-virtual-anchors-surround":1885},[4,135],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":28},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,29,51,73,91,109],{"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 Popover","\u002Fguide\u002Fgetting-started\u002Ffirst-popover","1.guide\u002F1.getting-started\u002F3.first-popover",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},"Placement & Positioning","\u002Fguide\u002Fcore-concepts\u002Fplacement-and-positioning","1.guide\u002F2.core-concepts\u002F2.placement-and-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},"Tree Coordination","\u002Fguide\u002Fcore-concepts\u002Ftree-coordination-explained","1.guide\u002F2.core-concepts\u002F4.tree-coordination-explained",{"title":52,"icon":53,"path":54,"stem":55,"children":56,"page":28},"Patterns","i-lucide-component","\u002Fguide\u002Fcomponents","1.guide\u002F3.components",[57,61,65,69],{"title":58,"path":59,"stem":60},"Tooltips","\u002Fguide\u002Fcomponents\u002Fbuild-accessible-tooltips","1.guide\u002F3.components\u002F1.build-accessible-tooltips",{"title":62,"path":63,"stem":64},"Popovers & Dropdowns","\u002Fguide\u002Fcomponents\u002Fbuild-popovers-and-dropdowns","1.guide\u002F3.components\u002F2.build-popovers-and-dropdowns",{"title":66,"path":67,"stem":68},"Dialogs & Modals","\u002Fguide\u002Fcomponents\u002Fbuild-dialogs-and-modals","1.guide\u002F3.components\u002F3.build-dialogs-and-modals",{"title":70,"path":71,"stem":72},"Nested Menus","\u002Fguide\u002Fcomponents\u002Fbuild-nested-menus","1.guide\u002F3.components\u002F4.build-nested-menus",{"title":74,"icon":75,"path":76,"stem":77,"children":78,"page":28},"Positioning","i-lucide-crosshair","\u002Fguide\u002Fpositioning","1.guide\u002F4.positioning",[79,83,87],{"title":80,"path":81,"stem":82},"Keep in View","\u002Fguide\u002Fpositioning\u002Fkeep-content-in-view","1.guide\u002F4.positioning\u002F1.keep-content-in-view",{"title":84,"path":85,"stem":86},"Virtual Anchors","\u002Fguide\u002Fpositioning\u002Fuse-virtual-anchors","1.guide\u002F4.positioning\u002F2.use-virtual-anchors",{"title":88,"path":89,"stem":90},"Middleware Pipeline","\u002Fguide\u002Fpositioning\u002Fmiddleware-pipeline","1.guide\u002F4.positioning\u002F3.middleware-pipeline",{"title":92,"icon":93,"path":94,"stem":95,"children":96,"page":28},"Accessibility","i-lucide-person-standing","\u002Fguide\u002Faccessibility","1.guide\u002F5.accessibility",[97,101,105],{"title":98,"path":99,"stem":100},"Open State","\u002Fguide\u002Faccessibility\u002Fcontrol-open-state","1.guide\u002F5.accessibility\u002F1.control-open-state",{"title":102,"path":103,"stem":104},"Focus Models","\u002Fguide\u002Faccessibility\u002Ffocus-models","1.guide\u002F5.accessibility\u002F2.focus-models",{"title":106,"path":107,"stem":108},"Keyboard Navigation","\u002Fguide\u002Faccessibility\u002Fkeyboard-navigation","1.guide\u002F5.accessibility\u002F3.keyboard-navigation",{"title":110,"icon":111,"path":112,"stem":113,"children":114,"page":28},"Advanced","i-lucide-cpu","\u002Fguide\u002Fadvanced","1.guide\u002F6.advanced",[115,119,123,127,131],{"title":116,"path":117,"stem":118},"Controlled vs Uncontrolled","\u002Fguide\u002Fadvanced\u002Fcontrolled-vs-uncontrolled","1.guide\u002F6.advanced\u002F1.controlled-vs-uncontrolled",{"title":120,"path":121,"stem":122},"Safe Polygons","\u002Fguide\u002Fadvanced\u002Fsafe-polygon-gotchas","1.guide\u002F6.advanced\u002F2.safe-polygon-gotchas",{"title":124,"path":125,"stem":126},"Virtual Anchor Gotchas","\u002Fguide\u002Fadvanced\u002Fvirtual-anchor-gotchas","1.guide\u002F6.advanced\u002F3.virtual-anchor-gotchas",{"title":128,"path":129,"stem":130},"Middleware Ordering","\u002Fguide\u002Fadvanced\u002Fmiddleware-ordering-gotchas","1.guide\u002F6.advanced\u002F4.middleware-ordering-gotchas",{"title":132,"path":133,"stem":134},"List Navigation","\u002Fguide\u002Fadvanced\u002Flist-navigation-gotchas","1.guide\u002F6.advanced\u002F5.list-navigation-gotchas",{"title":136,"icon":137,"path":138,"stem":139,"children":140},"API Reference","i-lucide-code-xml","\u002Fapi","2.api",[141,145,155,165,182,216,233],{"title":142,"path":138,"stem":143,"icon":144},"Overview","2.api\u002Findex","i-lucide-file-text",{"title":146,"icon":147,"path":148,"stem":149,"children":150,"page":28},"Reference","i-lucide-braces","\u002Fapi\u002Foverview","2.api\u002F1.overview",[151],{"title":152,"path":153,"stem":154},"Types","\u002Fapi\u002Foverview\u002Ftypes","2.api\u002F1.overview\u002F1.types",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":28},"Core","i-lucide-box","\u002Fapi\u002Fcore","2.api\u002F2.core",[161],{"title":162,"path":163,"stem":164},"useFloatingNode","\u002Fapi\u002Fcore\u002Fuse-floating-node","2.api\u002F2.core\u002F1.use-floating-node",{"title":74,"icon":166,"path":167,"stem":168,"children":169,"page":28},"i-lucide-move","\u002Fapi\u002Fpositioning","2.api\u002F3.positioning",[170,174,178],{"title":171,"path":172,"stem":173},"usePosition","\u002Fapi\u002Fpositioning\u002Fuse-position","2.api\u002F3.positioning\u002F1.use-position",{"title":175,"path":176,"stem":177},"useArrow","\u002Fapi\u002Fpositioning\u002Fuse-arrow","2.api\u002F3.positioning\u002F2.use-arrow",{"title":179,"path":180,"stem":181},"useClientPoint","\u002Fapi\u002Fpositioning\u002Fuse-client-point","2.api\u002F3.positioning\u002F3.use-client-point",{"title":183,"icon":184,"path":185,"stem":186,"children":187,"page":28},"Interactions","i-lucide-mouse-pointer-click","\u002Fapi\u002Finteractions","2.api\u002F4.interactions",[188,192,196,200,204,208,212],{"title":189,"path":190,"stem":191},"useClick","\u002Fapi\u002Finteractions\u002Fuse-click","2.api\u002F4.interactions\u002F1.use-click",{"title":193,"path":194,"stem":195},"useHover","\u002Fapi\u002Finteractions\u002Fuse-hover","2.api\u002F4.interactions\u002F2.use-hover",{"title":197,"path":198,"stem":199},"useFocus","\u002Fapi\u002Finteractions\u002Fuse-focus","2.api\u002F4.interactions\u002F3.use-focus",{"title":201,"path":202,"stem":203},"useFocusTrap","\u002Fapi\u002Finteractions\u002Fuse-focus-trap","2.api\u002F4.interactions\u002F4.use-focus-trap",{"title":205,"path":206,"stem":207},"useOutsideClick","\u002Fapi\u002Finteractions\u002Fuse-outside-click","2.api\u002F4.interactions\u002F5.use-outside-click",{"title":209,"path":210,"stem":211},"useEscapeKey","\u002Fapi\u002Finteractions\u002Fuse-escape-key","2.api\u002F4.interactions\u002F6.use-escape-key",{"title":213,"path":214,"stem":215},"useRole","\u002Fapi\u002Finteractions\u002Fuse-role","2.api\u002F4.interactions\u002F7.use-role",{"title":106,"icon":217,"path":218,"stem":219,"children":220,"page":28},"i-lucide-keyboard","\u002Fapi\u002Fkeyboard-navigation","2.api\u002F5.keyboard-navigation",[221,225,229],{"title":222,"path":223,"stem":224},"useRovingFocus","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-roving-focus","2.api\u002F5.keyboard-navigation\u002F1.use-roving-focus",{"title":226,"path":227,"stem":228},"useAriaActivedescendant","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-aria-activedescendant","2.api\u002F5.keyboard-navigation\u002F2.use-aria-activedescendant",{"title":230,"path":231,"stem":232},"useTypeahead","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-typeahead","2.api\u002F5.keyboard-navigation\u002F3.use-typeahead",{"title":234,"icon":235,"path":236,"stem":237,"children":238,"page":28},"Middleware","i-lucide-blocks","\u002Fapi\u002Fmiddleware","2.api\u002F6.middleware",[239,243,247,251,255,259,263,267],{"title":240,"path":241,"stem":242},"offset","\u002Fapi\u002Fmiddleware\u002Foffset","2.api\u002F6.middleware\u002F1.offset",{"title":244,"path":245,"stem":246},"flip","\u002Fapi\u002Fmiddleware\u002Fflip","2.api\u002F6.middleware\u002F2.flip",{"title":248,"path":249,"stem":250},"shift","\u002Fapi\u002Fmiddleware\u002Fshift","2.api\u002F6.middleware\u002F3.shift",{"title":252,"path":253,"stem":254},"autoPlacement","\u002Fapi\u002Fmiddleware\u002Fautoplacement","2.api\u002F6.middleware\u002F4.autoplacement",{"title":256,"path":257,"stem":258},"size","\u002Fapi\u002Fmiddleware\u002Fsize","2.api\u002F6.middleware\u002F5.size",{"title":260,"path":261,"stem":262},"inline","\u002Fapi\u002Fmiddleware\u002Finline","2.api\u002F6.middleware\u002F6.inline",{"title":264,"path":265,"stem":266},"arrow","\u002Fapi\u002Fmiddleware\u002Farrow","2.api\u002F6.middleware\u002F7.arrow",{"title":268,"path":269,"stem":270},"hide","\u002Fapi\u002Fmiddleware\u002Fhide","2.api\u002F6.middleware\u002F8.hide",{"id":272,"title":84,"body":273,"description":1879,"extension":1880,"links":1881,"meta":1882,"navigation":464,"path":85,"seo":1883,"stem":86,"__hash__":1884},"docs\u002F1.guide\u002F4.positioning\u002F2.use-virtual-anchors.md",{"type":274,"value":275,"toc":1872},"minimark",[276,280,283,286,306,311,314,325,329,346,856,863,867,870,1482,1485,1489,1506,1850,1854,1868],[277,278,279],"p",{},"Sometimes there is no real DOM element that should act as the anchor. You may want to position a surface at the cursor, at a saved coordinate, or against a synthetic rectangle such as a text selection.",[277,281,282],{},"That is where virtual anchors come in.",[277,284,285],{},"This guide covers two practical paths:",[287,288,289,299],"ul",{},[290,291,292,293],"li",{},"Pointer-driven positioning with ",[294,295,296],"a",{"href":180},[297,298,179],"code",{},[290,300,301,302],{},"Manual virtual anchors passed into ",[294,303,304],{"href":163},[297,305,162],{},[307,308,310],"h2",{"id":309},"when-to-use-a-virtual-anchor","When to use a virtual anchor",[277,312,313],{},"Use a virtual anchor when:",[287,315,316,319,322],{},[290,317,318],{},"The surface should appear at a pointer location",[290,320,321],{},"The anchor geometry is computed rather than tied to one DOM element",[290,323,324],{},"You are building a context menu, inspection tool, or selection-based UI",[307,326,328],{"id":327},"follow-the-pointer","Follow the pointer",[277,330,331,332,335,336,338,339,342,343,345],{},"Point ",[297,333,334],{},"trackingAreaEl"," at the container element that listens for pointer movement. ",[297,337,179],{}," replaces the node's anchor with a virtual element that tracks the cursor, so the initial ",[297,340,341],{},"anchorEl"," passed to ",[297,344,162],{}," acts as a placeholder until tracking starts:",[347,348,353],"pre",{"className":349,"code":350,"language":351,"meta":352,"style":352},"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});\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\">\n      Cursor inspection panel\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[297,354,355,390,420,459,466,506,536,566,571,602,615,634,643,648,659,667,684,693,698,708,718,723,733,766,772,777,821,827,837,847],{"__ignoreMap":352},[356,357,360,364,368,372,375,378,381,385,387],"span",{"class":358,"line":359},"line",1,[356,361,363],{"class":362},"sMK4o","\u003C",[356,365,367],{"class":366},"swJcz","script",[356,369,371],{"class":370},"spNyl"," setup",[356,373,374],{"class":370}," lang",[356,376,377],{"class":362},"=",[356,379,380],{"class":362},"\"",[356,382,384],{"class":383},"sfazB","ts",[356,386,380],{"class":362},[356,388,389],{"class":362},">\n",[356,391,393,397,400,404,407,410,413,415,417],{"class":358,"line":392},2,[356,394,396],{"class":395},"s7zQu","import",[356,398,399],{"class":362}," {",[356,401,403],{"class":402},"sTEyZ"," ref",[356,405,406],{"class":362}," }",[356,408,409],{"class":395}," from",[356,411,412],{"class":362}," \"",[356,414,351],{"class":383},[356,416,380],{"class":362},[356,418,419],{"class":362},";\n",[356,421,423,425,427,430,433,436,438,441,443,446,448,450,452,455,457],{"class":358,"line":422},3,[356,424,396],{"class":395},[356,426,399],{"class":362},[356,428,429],{"class":402}," useClientPoint",[356,431,432],{"class":362},",",[356,434,435],{"class":402}," useFloatingNode",[356,437,432],{"class":362},[356,439,440],{"class":402}," useHover",[356,442,432],{"class":362},[356,444,445],{"class":402}," usePosition",[356,447,406],{"class":362},[356,449,409],{"class":395},[356,451,412],{"class":362},[356,453,454],{"class":383},"v-float",[356,456,380],{"class":362},[356,458,419],{"class":362},[356,460,462],{"class":358,"line":461},4,[356,463,465],{"emptyLinePlaceholder":464},true,"\n",[356,467,469,472,475,477,480,482,486,489,492,495,498,501,504],{"class":358,"line":468},5,[356,470,471],{"class":370},"const",[356,473,474],{"class":402}," trackingAreaEl ",[356,476,377],{"class":362},[356,478,403],{"class":479},"s2Zo4",[356,481,363],{"class":362},[356,483,485],{"class":484},"sBMFI","HTMLElement",[356,487,488],{"class":362}," |",[356,490,491],{"class":484}," null",[356,493,494],{"class":362},">",[356,496,497],{"class":402},"(",[356,499,500],{"class":362},"null",[356,502,503],{"class":402},")",[356,505,419],{"class":362},[356,507,509,511,514,516,518,520,522,524,526,528,530,532,534],{"class":358,"line":508},6,[356,510,471],{"class":370},[356,512,513],{"class":402}," anchorEl ",[356,515,377],{"class":362},[356,517,403],{"class":479},[356,519,363],{"class":362},[356,521,485],{"class":484},[356,523,488],{"class":362},[356,525,491],{"class":484},[356,527,494],{"class":362},[356,529,497],{"class":402},[356,531,500],{"class":362},[356,533,503],{"class":402},[356,535,419],{"class":362},[356,537,539,541,544,546,548,550,552,554,556,558,560,562,564],{"class":358,"line":538},7,[356,540,471],{"class":370},[356,542,543],{"class":402}," floatingEl ",[356,545,377],{"class":362},[356,547,403],{"class":479},[356,549,363],{"class":362},[356,551,485],{"class":484},[356,553,488],{"class":362},[356,555,491],{"class":484},[356,557,494],{"class":362},[356,559,497],{"class":402},[356,561,500],{"class":362},[356,563,503],{"class":402},[356,565,419],{"class":362},[356,567,569],{"class":358,"line":568},8,[356,570,465],{"emptyLinePlaceholder":464},[356,572,574,576,579,581,583,585,588,591,593,595,598,600],{"class":358,"line":573},9,[356,575,471],{"class":370},[356,577,578],{"class":402}," node ",[356,580,377],{"class":362},[356,582,435],{"class":479},[356,584,497],{"class":402},[356,586,587],{"class":362},"{",[356,589,590],{"class":402}," anchorEl",[356,592,432],{"class":362},[356,594,543],{"class":402},[356,596,597],{"class":362},"}",[356,599,503],{"class":402},[356,601,419],{"class":362},[356,603,605,607,610,612],{"class":358,"line":604},10,[356,606,171],{"class":479},[356,608,609],{"class":402},"(node",[356,611,432],{"class":362},[356,613,614],{"class":362}," {\n",[356,616,618,621,624,626,629,631],{"class":358,"line":617},11,[356,619,620],{"class":366},"  placement",[356,622,623],{"class":362},":",[356,625,412],{"class":362},[356,627,628],{"class":383},"right-start",[356,630,380],{"class":362},[356,632,633],{"class":362},",\n",[356,635,637,639,641],{"class":358,"line":636},12,[356,638,597],{"class":362},[356,640,503],{"class":402},[356,642,419],{"class":362},[356,644,646],{"class":358,"line":645},13,[356,647,465],{"emptyLinePlaceholder":464},[356,649,651,653,655,657],{"class":358,"line":650},14,[356,652,179],{"class":479},[356,654,609],{"class":402},[356,656,432],{"class":362},[356,658,614],{"class":362},[356,660,662,665],{"class":358,"line":661},15,[356,663,664],{"class":402},"  trackingAreaEl",[356,666,633],{"class":362},[356,668,670,673,675,677,680,682],{"class":358,"line":669},16,[356,671,672],{"class":366},"  trackingMode",[356,674,623],{"class":362},[356,676,412],{"class":362},[356,678,679],{"class":383},"follow",[356,681,380],{"class":362},[356,683,633],{"class":362},[356,685,687,689,691],{"class":358,"line":686},17,[356,688,597],{"class":362},[356,690,503],{"class":402},[356,692,419],{"class":362},[356,694,696],{"class":358,"line":695},18,[356,697,465],{"emptyLinePlaceholder":464},[356,699,701,703,706],{"class":358,"line":700},19,[356,702,193],{"class":479},[356,704,705],{"class":402},"(node)",[356,707,419],{"class":362},[356,709,711,714,716],{"class":358,"line":710},20,[356,712,713],{"class":362},"\u003C\u002F",[356,715,367],{"class":366},[356,717,389],{"class":362},[356,719,721],{"class":358,"line":720},21,[356,722,465],{"emptyLinePlaceholder":464},[356,724,726,728,731],{"class":358,"line":725},22,[356,727,363],{"class":362},[356,729,730],{"class":366},"template",[356,732,389],{"class":362},[356,734,736,739,742,744,746,748,750,752,755,757,759,762,764],{"class":358,"line":735},23,[356,737,738],{"class":362},"  \u003C",[356,740,741],{"class":366},"div",[356,743,403],{"class":370},[356,745,377],{"class":362},[356,747,380],{"class":362},[356,749,334],{"class":383},[356,751,380],{"class":362},[356,753,754],{"class":370}," class",[356,756,377],{"class":362},[356,758,380],{"class":362},[356,760,761],{"class":383},"interactive-canvas",[356,763,380],{"class":362},[356,765,389],{"class":362},[356,767,769],{"class":358,"line":768},24,[356,770,771],{"class":402},"    Hover anywhere in this area to inspect coordinates.\n",[356,773,775],{"class":358,"line":774},25,[356,776,465],{"emptyLinePlaceholder":464},[356,778,780,783,785,788,790,792,795,797,799,801,803,806,808,810,812,814,817,819],{"class":358,"line":779},26,[356,781,782],{"class":362},"    \u003C",[356,784,741],{"class":366},[356,786,787],{"class":370}," v-if",[356,789,377],{"class":362},[356,791,380],{"class":362},[356,793,794],{"class":383},"node.open.value",[356,796,380],{"class":362},[356,798,403],{"class":370},[356,800,377],{"class":362},[356,802,380],{"class":362},[356,804,805],{"class":383},"floatingEl",[356,807,380],{"class":362},[356,809,754],{"class":370},[356,811,377],{"class":362},[356,813,380],{"class":362},[356,815,816],{"class":383},"cursor-tooltip",[356,818,380],{"class":362},[356,820,389],{"class":362},[356,822,824],{"class":358,"line":823},27,[356,825,826],{"class":402},"      Cursor inspection panel\n",[356,828,830,833,835],{"class":358,"line":829},28,[356,831,832],{"class":362},"    \u003C\u002F",[356,834,741],{"class":366},[356,836,389],{"class":362},[356,838,840,843,845],{"class":358,"line":839},29,[356,841,842],{"class":362},"  \u003C\u002F",[356,844,741],{"class":366},[356,846,389],{"class":362},[356,848,850,852,854],{"class":358,"line":849},30,[356,851,713],{"class":362},[356,853,730],{"class":366},[356,855,389],{"class":362},[277,857,858,859,862],{},"In ",[297,860,861],{},"\"follow\""," mode, pointer movement continuously updates the virtual anchor and the floating surface tracks the cursor position while open.",[307,864,866],{"id":865},"keep-the-opening-point-static","Keep the opening point static",[277,868,869],{},"For context menus and right-click inspectors, you want the surface to open at the pointer's location at click time and remain fixed there even if the pointer moves afterward:",[347,871,873],{"className":349,"code":872,"language":351,"meta":352,"style":352},"\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});\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",[297,874,875,895,915,921,928,935,942,949,956,970,974,1003,1031,1059,1063,1089,1099,1114,1122,1126,1136,1147,1162,1170,1174,1182,1190,1194,1217,1233,1257,1263,1272,1277,1286,1329,1335,1340,1380,1390,1409,1427,1445,1455,1464,1473],{"__ignoreMap":352},[356,876,877,879,881,883,885,887,889,891,893],{"class":358,"line":359},[356,878,363],{"class":362},[356,880,367],{"class":366},[356,882,371],{"class":370},[356,884,374],{"class":370},[356,886,377],{"class":362},[356,888,380],{"class":362},[356,890,384],{"class":383},[356,892,380],{"class":362},[356,894,389],{"class":362},[356,896,897,899,901,903,905,907,909,911,913],{"class":358,"line":392},[356,898,396],{"class":395},[356,900,399],{"class":362},[356,902,403],{"class":402},[356,904,406],{"class":362},[356,906,409],{"class":395},[356,908,412],{"class":362},[356,910,351],{"class":383},[356,912,380],{"class":362},[356,914,419],{"class":362},[356,916,917,919],{"class":358,"line":422},[356,918,396],{"class":395},[356,920,614],{"class":362},[356,922,923,926],{"class":358,"line":461},[356,924,925],{"class":402},"  useClientPoint",[356,927,633],{"class":362},[356,929,930,933],{"class":358,"line":468},[356,931,932],{"class":402},"  useEscapeKey",[356,934,633],{"class":362},[356,936,937,940],{"class":358,"line":508},[356,938,939],{"class":402},"  useFloatingNode",[356,941,633],{"class":362},[356,943,944,947],{"class":358,"line":538},[356,945,946],{"class":402},"  useOutsideClick",[356,948,633],{"class":362},[356,950,951,954],{"class":358,"line":568},[356,952,953],{"class":402},"  usePosition",[356,955,633],{"class":362},[356,957,958,960,962,964,966,968],{"class":358,"line":573},[356,959,597],{"class":362},[356,961,409],{"class":395},[356,963,412],{"class":362},[356,965,454],{"class":383},[356,967,380],{"class":362},[356,969,419],{"class":362},[356,971,972],{"class":358,"line":604},[356,973,465],{"emptyLinePlaceholder":464},[356,975,976,978,981,983,985,987,989,991,993,995,997,999,1001],{"class":358,"line":617},[356,977,471],{"class":370},[356,979,980],{"class":402}," areaEl ",[356,982,377],{"class":362},[356,984,403],{"class":479},[356,986,363],{"class":362},[356,988,485],{"class":484},[356,990,488],{"class":362},[356,992,491],{"class":484},[356,994,494],{"class":362},[356,996,497],{"class":402},[356,998,500],{"class":362},[356,1000,503],{"class":402},[356,1002,419],{"class":362},[356,1004,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029],{"class":358,"line":636},[356,1006,471],{"class":370},[356,1008,513],{"class":402},[356,1010,377],{"class":362},[356,1012,403],{"class":479},[356,1014,363],{"class":362},[356,1016,485],{"class":484},[356,1018,488],{"class":362},[356,1020,491],{"class":484},[356,1022,494],{"class":362},[356,1024,497],{"class":402},[356,1026,500],{"class":362},[356,1028,503],{"class":402},[356,1030,419],{"class":362},[356,1032,1033,1035,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057],{"class":358,"line":645},[356,1034,471],{"class":370},[356,1036,543],{"class":402},[356,1038,377],{"class":362},[356,1040,403],{"class":479},[356,1042,363],{"class":362},[356,1044,485],{"class":484},[356,1046,488],{"class":362},[356,1048,491],{"class":484},[356,1050,494],{"class":362},[356,1052,497],{"class":402},[356,1054,500],{"class":362},[356,1056,503],{"class":402},[356,1058,419],{"class":362},[356,1060,1061],{"class":358,"line":650},[356,1062,465],{"emptyLinePlaceholder":464},[356,1064,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087],{"class":358,"line":661},[356,1066,471],{"class":370},[356,1068,578],{"class":402},[356,1070,377],{"class":362},[356,1072,435],{"class":479},[356,1074,497],{"class":402},[356,1076,587],{"class":362},[356,1078,590],{"class":402},[356,1080,432],{"class":362},[356,1082,543],{"class":402},[356,1084,597],{"class":362},[356,1086,503],{"class":402},[356,1088,419],{"class":362},[356,1090,1091,1093,1095,1097],{"class":358,"line":669},[356,1092,171],{"class":479},[356,1094,609],{"class":402},[356,1096,432],{"class":362},[356,1098,614],{"class":362},[356,1100,1101,1103,1105,1107,1110,1112],{"class":358,"line":686},[356,1102,620],{"class":366},[356,1104,623],{"class":362},[356,1106,412],{"class":362},[356,1108,1109],{"class":383},"bottom-start",[356,1111,380],{"class":362},[356,1113,633],{"class":362},[356,1115,1116,1118,1120],{"class":358,"line":695},[356,1117,597],{"class":362},[356,1119,503],{"class":402},[356,1121,419],{"class":362},[356,1123,1124],{"class":358,"line":700},[356,1125,465],{"emptyLinePlaceholder":464},[356,1127,1128,1130,1132,1134],{"class":358,"line":710},[356,1129,179],{"class":479},[356,1131,609],{"class":402},[356,1133,432],{"class":362},[356,1135,614],{"class":362},[356,1137,1138,1140,1142,1145],{"class":358,"line":720},[356,1139,664],{"class":366},[356,1141,623],{"class":362},[356,1143,1144],{"class":402}," areaEl",[356,1146,633],{"class":362},[356,1148,1149,1151,1153,1155,1158,1160],{"class":358,"line":725},[356,1150,672],{"class":366},[356,1152,623],{"class":362},[356,1154,412],{"class":362},[356,1156,1157],{"class":383},"static",[356,1159,380],{"class":362},[356,1161,633],{"class":362},[356,1163,1164,1166,1168],{"class":358,"line":735},[356,1165,597],{"class":362},[356,1167,503],{"class":402},[356,1169,419],{"class":362},[356,1171,1172],{"class":358,"line":768},[356,1173,465],{"emptyLinePlaceholder":464},[356,1175,1176,1178,1180],{"class":358,"line":774},[356,1177,205],{"class":479},[356,1179,705],{"class":402},[356,1181,419],{"class":362},[356,1183,1184,1186,1188],{"class":358,"line":779},[356,1185,209],{"class":479},[356,1187,705],{"class":402},[356,1189,419],{"class":362},[356,1191,1192],{"class":358,"line":823},[356,1193,465],{"emptyLinePlaceholder":464},[356,1195,1196,1199,1202,1204,1208,1210,1213,1215],{"class":358,"line":829},[356,1197,1198],{"class":370},"function",[356,1200,1201],{"class":479}," onContextMenu",[356,1203,497],{"class":362},[356,1205,1207],{"class":1206},"sHdIc","e",[356,1209,623],{"class":362},[356,1211,1212],{"class":484}," MouseEvent",[356,1214,503],{"class":362},[356,1216,614],{"class":362},[356,1218,1219,1222,1225,1228,1231],{"class":358,"line":839},[356,1220,1221],{"class":402},"  e",[356,1223,1224],{"class":362},".",[356,1226,1227],{"class":479},"preventDefault",[356,1229,1230],{"class":366},"()",[356,1232,419],{"class":362},[356,1234,1235,1238,1240,1243,1245,1248,1251,1255],{"class":358,"line":849},[356,1236,1237],{"class":402},"  node",[356,1239,1224],{"class":362},[356,1241,1242],{"class":402},"open",[356,1244,1224],{"class":362},[356,1246,1247],{"class":402},"value",[356,1249,1250],{"class":362}," =",[356,1252,1254],{"class":1253},"sfNiH"," true",[356,1256,419],{"class":362},[356,1258,1260],{"class":358,"line":1259},31,[356,1261,1262],{"class":362},"}\n",[356,1264,1266,1268,1270],{"class":358,"line":1265},32,[356,1267,713],{"class":362},[356,1269,367],{"class":366},[356,1271,389],{"class":362},[356,1273,1275],{"class":358,"line":1274},33,[356,1276,465],{"emptyLinePlaceholder":464},[356,1278,1280,1282,1284],{"class":358,"line":1279},34,[356,1281,363],{"class":362},[356,1283,730],{"class":366},[356,1285,389],{"class":362},[356,1287,1289,1291,1293,1295,1297,1299,1302,1304,1306,1308,1310,1313,1315,1318,1320,1322,1325,1327],{"class":358,"line":1288},35,[356,1290,738],{"class":362},[356,1292,741],{"class":366},[356,1294,403],{"class":370},[356,1296,377],{"class":362},[356,1298,380],{"class":362},[356,1300,1301],{"class":383},"areaEl",[356,1303,380],{"class":362},[356,1305,754],{"class":370},[356,1307,377],{"class":362},[356,1309,380],{"class":362},[356,1311,1312],{"class":383},"context-zone",[356,1314,380],{"class":362},[356,1316,1317],{"class":370}," @contextmenu",[356,1319,377],{"class":362},[356,1321,380],{"class":362},[356,1323,1324],{"class":383},"onContextMenu",[356,1326,380],{"class":362},[356,1328,389],{"class":362},[356,1330,1332],{"class":358,"line":1331},36,[356,1333,1334],{"class":402},"    Right click inside this container.\n",[356,1336,1338],{"class":358,"line":1337},37,[356,1339,465],{"emptyLinePlaceholder":464},[356,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1373,1376,1378],{"class":358,"line":1342},38,[356,1344,782],{"class":362},[356,1346,741],{"class":366},[356,1348,787],{"class":370},[356,1350,377],{"class":362},[356,1352,380],{"class":362},[356,1354,794],{"class":383},[356,1356,380],{"class":362},[356,1358,403],{"class":370},[356,1360,377],{"class":362},[356,1362,380],{"class":362},[356,1364,805],{"class":383},[356,1366,380],{"class":362},[356,1368,754],{"class":370},[356,1370,377],{"class":362},[356,1372,380],{"class":362},[356,1374,1375],{"class":383},"context-menu",[356,1377,380],{"class":362},[356,1379,389],{"class":362},[356,1381,1383,1386,1388],{"class":358,"line":1382},39,[356,1384,1385],{"class":362},"      \u003C",[356,1387,287],{"class":366},[356,1389,389],{"class":362},[356,1391,1393,1396,1398,1400,1403,1405,1407],{"class":358,"line":1392},40,[356,1394,1395],{"class":362},"        \u003C",[356,1397,290],{"class":366},[356,1399,494],{"class":362},[356,1401,1402],{"class":402},"Inspect element",[356,1404,713],{"class":362},[356,1406,290],{"class":366},[356,1408,389],{"class":362},[356,1410,1412,1414,1416,1418,1421,1423,1425],{"class":358,"line":1411},41,[356,1413,1395],{"class":362},[356,1415,290],{"class":366},[356,1417,494],{"class":362},[356,1419,1420],{"class":402},"Copy link",[356,1422,713],{"class":362},[356,1424,290],{"class":366},[356,1426,389],{"class":362},[356,1428,1430,1432,1434,1436,1439,1441,1443],{"class":358,"line":1429},42,[356,1431,1395],{"class":362},[356,1433,290],{"class":366},[356,1435,494],{"class":362},[356,1437,1438],{"class":402},"Reload",[356,1440,713],{"class":362},[356,1442,290],{"class":366},[356,1444,389],{"class":362},[356,1446,1448,1451,1453],{"class":358,"line":1447},43,[356,1449,1450],{"class":362},"      \u003C\u002F",[356,1452,287],{"class":366},[356,1454,389],{"class":362},[356,1456,1458,1460,1462],{"class":358,"line":1457},44,[356,1459,832],{"class":362},[356,1461,741],{"class":366},[356,1463,389],{"class":362},[356,1465,1467,1469,1471],{"class":358,"line":1466},45,[356,1468,842],{"class":362},[356,1470,741],{"class":366},[356,1472,389],{"class":362},[356,1474,1476,1478,1480],{"class":358,"line":1475},46,[356,1477,713],{"class":362},[356,1479,730],{"class":366},[356,1481,389],{"class":362},[277,1483,1484],{},"Static mode captures coordinates at the triggering interaction and holds them steady, preventing the menu from drifting across the screen as the user moves toward menu items.",[307,1486,1488],{"id":1487},"manual-virtual-anchors","Manual virtual anchors",[277,1490,1491,1492,1495,1496,1499,1500,1503,1504,623],{},"If you already have coordinates or a computed bounding box (such as a browser ",[297,1493,1494],{},"Selection.getRangeAt(0)","), you do not need ",[297,1497,1498],{},"useClientPoint()",". You can pass a manual ",[297,1501,1502],{},"VirtualElement"," object directly as ",[297,1505,341],{},[347,1507,1509],{"className":349,"code":1508,"language":351,"meta":352,"style":352},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { type VirtualElement, useFloatingNode, usePosition } from \"v-float\";\n\nconst floatingEl = ref\u003CHTMLElement | null>(null);\nconst open = ref(true);\n\nconst virtualAnchor: VirtualElement = {\n  getBoundingClientRect() {\n    return new DOMRect(160, 120, 0, 0);\n  },\n};\n\nconst anchorEl = ref(virtualAnchor);\n\nconst node = useFloatingNode({ anchorEl, floatingEl, open });\nusePosition(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" class=\"fixed-floating\">\n    Anchored to coordinates (160, 120)\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[297,1510,1511,1531,1551,1583,1587,1615,1635,1639,1654,1663,1698,1703,1708,1712,1727,1731,1762,1770,1778,1782,1790,1829,1834,1842],{"__ignoreMap":352},[356,1512,1513,1515,1517,1519,1521,1523,1525,1527,1529],{"class":358,"line":359},[356,1514,363],{"class":362},[356,1516,367],{"class":366},[356,1518,371],{"class":370},[356,1520,374],{"class":370},[356,1522,377],{"class":362},[356,1524,380],{"class":362},[356,1526,384],{"class":383},[356,1528,380],{"class":362},[356,1530,389],{"class":362},[356,1532,1533,1535,1537,1539,1541,1543,1545,1547,1549],{"class":358,"line":392},[356,1534,396],{"class":395},[356,1536,399],{"class":362},[356,1538,403],{"class":402},[356,1540,406],{"class":362},[356,1542,409],{"class":395},[356,1544,412],{"class":362},[356,1546,351],{"class":383},[356,1548,380],{"class":362},[356,1550,419],{"class":362},[356,1552,1553,1555,1557,1560,1563,1565,1567,1569,1571,1573,1575,1577,1579,1581],{"class":358,"line":422},[356,1554,396],{"class":395},[356,1556,399],{"class":362},[356,1558,1559],{"class":395}," type",[356,1561,1562],{"class":402}," VirtualElement",[356,1564,432],{"class":362},[356,1566,435],{"class":402},[356,1568,432],{"class":362},[356,1570,445],{"class":402},[356,1572,406],{"class":362},[356,1574,409],{"class":395},[356,1576,412],{"class":362},[356,1578,454],{"class":383},[356,1580,380],{"class":362},[356,1582,419],{"class":362},[356,1584,1585],{"class":358,"line":461},[356,1586,465],{"emptyLinePlaceholder":464},[356,1588,1589,1591,1593,1595,1597,1599,1601,1603,1605,1607,1609,1611,1613],{"class":358,"line":468},[356,1590,471],{"class":370},[356,1592,543],{"class":402},[356,1594,377],{"class":362},[356,1596,403],{"class":479},[356,1598,363],{"class":362},[356,1600,485],{"class":484},[356,1602,488],{"class":362},[356,1604,491],{"class":484},[356,1606,494],{"class":362},[356,1608,497],{"class":402},[356,1610,500],{"class":362},[356,1612,503],{"class":402},[356,1614,419],{"class":362},[356,1616,1617,1619,1622,1624,1626,1628,1631,1633],{"class":358,"line":508},[356,1618,471],{"class":370},[356,1620,1621],{"class":402}," open ",[356,1623,377],{"class":362},[356,1625,403],{"class":479},[356,1627,497],{"class":402},[356,1629,1630],{"class":1253},"true",[356,1632,503],{"class":402},[356,1634,419],{"class":362},[356,1636,1637],{"class":358,"line":538},[356,1638,465],{"emptyLinePlaceholder":464},[356,1640,1641,1643,1646,1648,1650,1652],{"class":358,"line":568},[356,1642,471],{"class":370},[356,1644,1645],{"class":402}," virtualAnchor",[356,1647,623],{"class":362},[356,1649,1562],{"class":484},[356,1651,1250],{"class":362},[356,1653,614],{"class":362},[356,1655,1656,1659,1661],{"class":358,"line":573},[356,1657,1658],{"class":366},"  getBoundingClientRect",[356,1660,1230],{"class":362},[356,1662,614],{"class":362},[356,1664,1665,1668,1671,1674,1676,1680,1682,1685,1687,1690,1692,1694,1696],{"class":358,"line":604},[356,1666,1667],{"class":395},"    return",[356,1669,1670],{"class":362}," new",[356,1672,1673],{"class":479}," DOMRect",[356,1675,497],{"class":366},[356,1677,1679],{"class":1678},"sbssI","160",[356,1681,432],{"class":362},[356,1683,1684],{"class":1678}," 120",[356,1686,432],{"class":362},[356,1688,1689],{"class":1678}," 0",[356,1691,432],{"class":362},[356,1693,1689],{"class":1678},[356,1695,503],{"class":366},[356,1697,419],{"class":362},[356,1699,1700],{"class":358,"line":617},[356,1701,1702],{"class":362},"  },\n",[356,1704,1705],{"class":358,"line":636},[356,1706,1707],{"class":362},"};\n",[356,1709,1710],{"class":358,"line":645},[356,1711,465],{"emptyLinePlaceholder":464},[356,1713,1714,1716,1718,1720,1722,1725],{"class":358,"line":650},[356,1715,471],{"class":370},[356,1717,513],{"class":402},[356,1719,377],{"class":362},[356,1721,403],{"class":479},[356,1723,1724],{"class":402},"(virtualAnchor)",[356,1726,419],{"class":362},[356,1728,1729],{"class":358,"line":661},[356,1730,465],{"emptyLinePlaceholder":464},[356,1732,1733,1735,1737,1739,1741,1743,1745,1747,1749,1752,1754,1756,1758,1760],{"class":358,"line":669},[356,1734,471],{"class":370},[356,1736,578],{"class":402},[356,1738,377],{"class":362},[356,1740,435],{"class":479},[356,1742,497],{"class":402},[356,1744,587],{"class":362},[356,1746,590],{"class":402},[356,1748,432],{"class":362},[356,1750,1751],{"class":402}," floatingEl",[356,1753,432],{"class":362},[356,1755,1621],{"class":402},[356,1757,597],{"class":362},[356,1759,503],{"class":402},[356,1761,419],{"class":362},[356,1763,1764,1766,1768],{"class":358,"line":686},[356,1765,171],{"class":479},[356,1767,705],{"class":402},[356,1769,419],{"class":362},[356,1771,1772,1774,1776],{"class":358,"line":695},[356,1773,713],{"class":362},[356,1775,367],{"class":366},[356,1777,389],{"class":362},[356,1779,1780],{"class":358,"line":700},[356,1781,465],{"emptyLinePlaceholder":464},[356,1783,1784,1786,1788],{"class":358,"line":710},[356,1785,363],{"class":362},[356,1787,730],{"class":366},[356,1789,389],{"class":362},[356,1791,1792,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816,1818,1820,1822,1825,1827],{"class":358,"line":720},[356,1793,738],{"class":362},[356,1795,741],{"class":366},[356,1797,787],{"class":370},[356,1799,377],{"class":362},[356,1801,380],{"class":362},[356,1803,794],{"class":383},[356,1805,380],{"class":362},[356,1807,403],{"class":370},[356,1809,377],{"class":362},[356,1811,380],{"class":362},[356,1813,805],{"class":383},[356,1815,380],{"class":362},[356,1817,754],{"class":370},[356,1819,377],{"class":362},[356,1821,380],{"class":362},[356,1823,1824],{"class":383},"fixed-floating",[356,1826,380],{"class":362},[356,1828,389],{"class":362},[356,1830,1831],{"class":358,"line":725},[356,1832,1833],{"class":402},"    Anchored to coordinates (160, 120)\n",[356,1835,1836,1838,1840],{"class":358,"line":735},[356,1837,842],{"class":362},[356,1839,741],{"class":366},[356,1841,389],{"class":362},[356,1843,1844,1846,1848],{"class":358,"line":768},[356,1845,713],{"class":362},[356,1847,730],{"class":366},[356,1849,389],{"class":362},[307,1851,1853],{"id":1852},"where-to-go-next","Where to go next",[287,1855,1856,1862],{},[290,1857,1858,1859,1861],{},"Read ",[294,1860,124],{"href":125}," for common pitfalls with tracking modes and synthetic events.",[290,1863,1858,1864,1867],{},[294,1865,1866],{"href":41},"Placement and Positioning"," for the geometry model behind virtual anchors.",[1869,1870,1871],"style",{},"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 pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":352,"searchDepth":392,"depth":392,"links":1873},[1874,1875,1876,1877,1878],{"id":309,"depth":392,"text":310},{"id":327,"depth":392,"text":328},{"id":865,"depth":392,"text":866},{"id":1487,"depth":392,"text":1488},{"id":1852,"depth":392,"text":1853},"Position floating content from pointer coordinates or other virtual anchors.","md",null,{},{"title":84,"description":1879},"81LR7t1cpc9fUll5TGbp-HfBCtWHX9XHLe7Fsm3uiLs",[1886,1888],{"title":80,"path":81,"stem":82,"description":1887,"children":-1},"Keep floating content within the viewport with middleware and sizing rules.",{"title":88,"path":89,"stem":90,"description":1889,"children":-1},"Understand how middleware runs and how each step affects positioning.",1791046165701]