[{"data":1,"prerenderedAt":367},["ShallowReactive",2],{"navigation_docs":3,"-guides-astro":113,"-guides-astro-surround":362},[4,31,77,108],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Using the picker","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-mouse-pointer-click",{"title":26,"path":27,"stem":28,"icon":29},"Resolving picks","\u002Fgetting-started\u002Fresolve-the-picks","1.getting-started\u002F4.resolve-the-picks","i-lucide-bot",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72],{"title":38,"path":39,"stem":40,"icon":41},"Vite","\u002Fguides\u002Fvite","2.guides\u002F1.vite","i-simple-icons-vite",{"title":43,"path":44,"stem":45,"icon":46},"Nuxt","\u002Fguides\u002Fnuxt","2.guides\u002F2.nuxt","i-simple-icons-nuxtdotjs",{"title":48,"path":49,"stem":50,"icon":51},"SvelteKit","\u002Fguides\u002Fsveltekit","2.guides\u002F3.sveltekit","i-simple-icons-svelte",{"title":53,"path":54,"stem":55,"icon":56},"Astro","\u002Fguides\u002Fastro","2.guides\u002F4.astro","i-simple-icons-astro",{"title":58,"path":59,"stem":60,"icon":61},"Next.js","\u002Fguides\u002Fnext","2.guides\u002F5.next","i-simple-icons-nextdotjs",{"title":63,"path":64,"stem":65,"icon":66},"webpack","\u002Fguides\u002Fwebpack","2.guides\u002F6.webpack","i-simple-icons-webpack",{"title":68,"path":69,"stem":70,"icon":71},"Angular","\u002Fguides\u002Fangular","2.guides\u002F7.angular","i-simple-icons-angular",{"title":73,"path":74,"stem":75,"icon":76},"Plain HTML & more","\u002Fguides\u002Fvanilla","2.guides\u002F8.vanilla","i-lucide-file-code",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":30},"Reference","i-lucide-list","\u002Freference","3.reference",[83,88,93,98,103],{"title":84,"path":85,"stem":86,"icon":87},"Compatibility","\u002Freference\u002Fcompatibility","3.reference\u002F1.compatibility","i-lucide-table",{"title":89,"path":90,"stem":91,"icon":92},"Plugin options","\u002Freference\u002Fplugin-options","3.reference\u002F2.plugin-options","i-lucide-settings-2",{"title":94,"path":95,"stem":96,"icon":97},"CLI","\u002Freference\u002Fcli","3.reference\u002F3.cli","i-lucide-terminal",{"title":99,"path":100,"stem":101,"icon":102},"The pick object","\u002Freference\u002Fpick-object","3.reference\u002F4.pick-object","i-lucide-braces",{"title":104,"path":105,"stem":106,"icon":107},"FAQ & troubleshooting","\u002Freference\u002Ffaq","3.reference\u002F5.faq","i-lucide-help-circle",{"title":109,"path":110,"stem":111,"icon":112},"Sponsor","\u002Fsponsor","4.sponsor","i-lucide-heart",{"id":114,"title":53,"body":115,"description":355,"extension":356,"links":357,"meta":358,"navigation":359,"path":54,"seo":360,"stem":55,"__hash__":361},"docs\u002F2.guides\u002F4.astro.md",{"type":116,"value":117,"toc":350},"minimark",[118,122,127,157,161,279,317,320,324,327,330,343,346],[119,120,121],"p",{},"Astro uses Vite, so the plugin serves everything it normally serves. The document is Astro's own, so\nthe runtime comes in through the virtual module.",[123,124,126],"h2",{"id":125},"install","Install",[128,129,135],"pre",{"className":130,"code":131,"filename":132,"language":133,"meta":134,"style":134},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add -D vite-plugin-quello\n","Terminal","bash","",[136,137,138],"code",{"__ignoreMap":134},[139,140,143,147,151,154],"span",{"class":141,"line":142},"line",1,[139,144,146],{"class":145},"sBMFI","pnpm",[139,148,150],{"class":149},"sfazB"," add",[139,152,153],{"class":149}," -D",[139,155,156],{"class":149}," vite-plugin-quello\n",[123,158,160],{"id":159},"configure","Configure",[128,162,167],{"className":163,"code":164,"filename":165,"language":166,"meta":134,"style":134},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineConfig } from 'astro\u002Fconfig'\nimport quello from 'vite-plugin-quello'\n\nexport default defineConfig({\n  vite: { plugins: [quello()] },\n})\n","astro.config.mjs","js",[136,168,169,198,216,223,241,270],{"__ignoreMap":134},[139,170,171,175,179,183,186,189,192,195],{"class":141,"line":142},[139,172,174],{"class":173},"s7zQu","import",[139,176,178],{"class":177},"sMK4o"," {",[139,180,182],{"class":181},"sTEyZ"," defineConfig",[139,184,185],{"class":177}," }",[139,187,188],{"class":173}," from",[139,190,191],{"class":177}," '",[139,193,194],{"class":149},"astro\u002Fconfig",[139,196,197],{"class":177},"'\n",[139,199,201,203,206,209,211,214],{"class":141,"line":200},2,[139,202,174],{"class":173},[139,204,205],{"class":181}," quello ",[139,207,208],{"class":173},"from",[139,210,191],{"class":177},[139,212,213],{"class":149},"vite-plugin-quello",[139,215,197],{"class":177},[139,217,219],{"class":141,"line":218},3,[139,220,222],{"emptyLinePlaceholder":221},true,"\n",[139,224,226,229,232,235,238],{"class":141,"line":225},4,[139,227,228],{"class":173},"export",[139,230,231],{"class":173}," default",[139,233,182],{"class":234},"s2Zo4",[139,236,237],{"class":181},"(",[139,239,240],{"class":177},"{\n",[139,242,244,248,251,253,256,258,261,264,267],{"class":141,"line":243},5,[139,245,247],{"class":246},"swJcz","  vite",[139,249,250],{"class":177},":",[139,252,178],{"class":177},[139,254,255],{"class":246}," plugins",[139,257,250],{"class":177},[139,259,260],{"class":181}," [",[139,262,263],{"class":234},"quello",[139,265,266],{"class":181},"()] ",[139,268,269],{"class":177},"},\n",[139,271,273,276],{"class":141,"line":272},6,[139,274,275],{"class":177},"}",[139,277,278],{"class":181},")\n",[128,280,285],{"className":281,"code":282,"filename":283,"language":284,"meta":134,"style":134},"language-astro shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Chtml lang=\"en\">\n  \u003Cbody>\n    \u003Cslot \u002F>\n    {import.meta.env.DEV && \u003Cscript>import('virtual:quello')\u003C\u002Fscript>}\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","src\u002Flayouts\u002FBaseLayout.astro","astro",[136,286,287,292,297,302,307,312],{"__ignoreMap":134},[139,288,289],{"class":141,"line":142},[139,290,291],{},"\u003Chtml lang=\"en\">\n",[139,293,294],{"class":141,"line":200},[139,295,296],{},"  \u003Cbody>\n",[139,298,299],{"class":141,"line":218},[139,300,301],{},"    \u003Cslot \u002F>\n",[139,303,304],{"class":141,"line":225},[139,305,306],{},"    {import.meta.env.DEV && \u003Cscript>import('virtual:quello')\u003C\u002Fscript>}\n",[139,308,309],{"class":141,"line":243},[139,310,311],{},"  \u003C\u002Fbody>\n",[139,313,314],{"class":141,"line":272},[139,315,316],{},"\u003C\u002Fhtml>\n",[119,318,319],{},"Put it in whichever layout your pages share, so every page gets it.",[123,321,323],{"id":322},"what-a-pick-will-know","What a pick will know",[119,325,326],{},"On a static Astro page: the selector, the DOM path and the text — no component name.",[119,328,329],{},"That is not a limitation quello can lift. A static page ships no framework runtime, so there is no\ncomponent instance on the DOM to read. It is enough for an agent to find the code: the selector and\nthe text are usually more than a grep needs.",[331,332,333,334,338,339,342],"note",{},"Astro ",[335,336,337],"em",{},"does"," emit ",[136,340,341],{},"data-astro-source-file"," attributes, but its dev toolbar strips them from the DOM\nas it loads, and disabling the toolbar stops them being emitted at all. They are that tool's private\ndetail rather than an API, so quello does not rely on them.",[119,344,345],{},"Islands are different: an interactive Vue, React or Svelte island carries its framework's runtime,\nso picks inside one report a component like they would anywhere else.",[347,348,349],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":134,"searchDepth":200,"depth":200,"links":351},[352,353,354],{"id":125,"depth":200,"text":126},{"id":159,"depth":200,"text":160},{"id":322,"depth":200,"text":323},"Astro builds on Vite; the runtime arrives through the virtual module.","md",null,{},{"icon":56},{"title":53,"description":355},"CDkflPpqnTn-6ygJNMWZ8IflQv92E-LansgAsPSTGQI",[363,365],{"title":48,"path":49,"stem":50,"description":364,"icon":51,"children":-1},"Same route as Nuxt — the plugin plus one import.",{"title":58,"path":59,"stem":60,"description":366,"icon":61,"children":-1},"Three lines, one per file Next makes you own.",1788454296309]