[{"data":1,"prerenderedAt":464},["ShallowReactive",2],{"navigation_docs":3,"-guide-inline-svg":78,"-guide-inline-svg-surround":459},[4,26,57],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"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},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-play",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Guide","i-lucide-book-marked","\u002Fguide","2.guide",[32,37,42,47,52],{"title":33,"path":34,"stem":35,"icon":36},"Entry points","\u002Fguide\u002Fentry-points","2.guide\u002F1.entry-points","i-lucide-signpost",{"title":38,"path":39,"stem":40,"icon":41},"Inline SVG directives","\u002Fguide\u002Finline-svg","2.guide\u002F2.inline-svg","i-lucide-image",{"title":43,"path":44,"stem":45,"icon":46},"Output modes","\u002Fguide\u002Foutput-modes","2.guide\u002F3.output-modes","i-lucide-file-output",{"title":48,"path":49,"stem":50,"icon":51},"Frontmatter","\u002Fguide\u002Ffrontmatter","2.guide\u002F4.frontmatter","i-lucide-file-json",{"title":53,"path":54,"stem":55,"icon":56},"Bindings","\u002Fguide\u002Fbindings","2.guide\u002F5.bindings","i-lucide-braces",{"title":58,"icon":59,"path":60,"stem":61,"children":62,"page":25},"Reference","i-lucide-book-open","\u002Freference","3.reference",[63,68,73],{"title":64,"path":65,"stem":66,"icon":67},"Mark shortcuts","\u002Freference\u002Fmark-shortcuts","3.reference\u002F1.mark-shortcuts","i-lucide-bar-chart-3",{"title":69,"path":70,"stem":71,"icon":72},"Component props","\u002Freference\u002Fcomponent-props","3.reference\u002F2.component-props","i-lucide-list",{"title":74,"path":75,"stem":76,"icon":77},"Error handling","\u002Freference\u002Ferror-handling","3.reference\u002F3.error-handling","i-lucide-shield-alert",{"id":79,"title":38,"body":80,"description":453,"extension":108,"links":454,"meta":455,"navigation":456,"path":39,"seo":457,"stem":40,"__hash__":458},"docs\u002F2.guide\u002F2.inline-svg.md",{"type":81,"value":82,"toc":444},"minimark",[83,87,96,103,224,231,238,293,319,326,345,348,407,411,414,431,440],[84,85,86],"p",{},"For static output without a runtime component, these directives render the chart as inline SVG at parse time.",[88,89,91,95],"h2",{"id":90},"vl-vega-lite",[92,93,94],"code",{},"::vl"," — Vega-Lite",[84,97,98,99,102],{},"The spec JSON must be wrapped in a code fence inside the block body. Comark reserves ",[92,100,101],{},"{...}"," syntax in block bodies for directive attributes; a code fence is the only safe way to pass JSON without mangling.",[104,105,110],"pre",{"className":106,"code":107,"language":108,"meta":109,"style":109},"language-md shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","::vl{width=\"500\" height=\"300\" output=\"svg\"}\n```\n{\n  \"$schema\": \"https:\u002F\u002Fvega.github.io\u002Fschema\u002Fvega-lite\u002Fv6.json\",\n  \"mark\": \"bar\",\n  \"data\": {\n    \"values\": [\n      { \"product\": \"Valves\", \"sales\": 42000 },\n      { \"product\": \"Pipes\",  \"sales\": 31500 }\n    ]\n  },\n  \"encoding\": {\n    \"x\": { \"field\": \"sales\",   \"type\": \"quantitative\" },\n    \"y\": { \"field\": \"product\", \"type\": \"nominal\" }\n  }\n}\n```\n::\n","md","",[92,111,112,121,128,135,141,147,153,159,165,171,177,183,189,195,201,207,213,218],{"__ignoreMap":109},[113,114,117],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"sTEyZ","::vl{width=\"500\" height=\"300\" output=\"svg\"}\n",[113,122,124],{"class":115,"line":123},2,[113,125,127],{"class":126},"sfazB","```\n",[113,129,131],{"class":115,"line":130},3,[113,132,134],{"class":133},"sJsPd","{\n",[113,136,138],{"class":115,"line":137},4,[113,139,140],{"class":133},"  \"$schema\": \"https:\u002F\u002Fvega.github.io\u002Fschema\u002Fvega-lite\u002Fv6.json\",\n",[113,142,144],{"class":115,"line":143},5,[113,145,146],{"class":133},"  \"mark\": \"bar\",\n",[113,148,150],{"class":115,"line":149},6,[113,151,152],{"class":133},"  \"data\": {\n",[113,154,156],{"class":115,"line":155},7,[113,157,158],{"class":133},"    \"values\": [\n",[113,160,162],{"class":115,"line":161},8,[113,163,164],{"class":133},"      { \"product\": \"Valves\", \"sales\": 42000 },\n",[113,166,168],{"class":115,"line":167},9,[113,169,170],{"class":133},"      { \"product\": \"Pipes\",  \"sales\": 31500 }\n",[113,172,174],{"class":115,"line":173},10,[113,175,176],{"class":133},"    ]\n",[113,178,180],{"class":115,"line":179},11,[113,181,182],{"class":133},"  },\n",[113,184,186],{"class":115,"line":185},12,[113,187,188],{"class":133},"  \"encoding\": {\n",[113,190,192],{"class":115,"line":191},13,[113,193,194],{"class":133},"    \"x\": { \"field\": \"sales\",   \"type\": \"quantitative\" },\n",[113,196,198],{"class":115,"line":197},14,[113,199,200],{"class":133},"    \"y\": { \"field\": \"product\", \"type\": \"nominal\" }\n",[113,202,204],{"class":115,"line":203},15,[113,205,206],{"class":133},"  }\n",[113,208,210],{"class":115,"line":209},16,[113,211,212],{"class":133},"}\n",[113,214,216],{"class":115,"line":215},17,[113,217,127],{"class":126},[113,219,221],{"class":115,"line":220},18,[113,222,223],{"class":119},"::\n",[84,225,226,227,230],{},"Alias: ",[92,228,229],{},"::vega-lite",".",[88,232,234,237],{"id":233},"vg-full-vega",[92,235,236],{},"::vg"," — Full Vega",[104,239,241],{"className":106,"code":240,"language":108,"meta":109,"style":109},"::vg\n```\n{\n  \"$schema\": \"https:\u002F\u002Fvega.github.io\u002Fschema\u002Fvega\u002Fv6.json\",\n  \"width\": 300,\n  \"height\": 150,\n  \"data\": [{ \"name\": \"table\", \"values\": [{ \"x\": \"A\", \"y\": 4 }] }],\n  \"marks\": [{ \"type\": \"rect\", \"from\": { \"data\": \"table\" }, ... }]\n}\n```\n::\n",[92,242,243,248,252,256,261,266,271,276,281,285,289],{"__ignoreMap":109},[113,244,245],{"class":115,"line":116},[113,246,247],{"class":119},"::vg\n",[113,249,250],{"class":115,"line":123},[113,251,127],{"class":126},[113,253,254],{"class":115,"line":130},[113,255,134],{"class":133},[113,257,258],{"class":115,"line":137},[113,259,260],{"class":133},"  \"$schema\": \"https:\u002F\u002Fvega.github.io\u002Fschema\u002Fvega\u002Fv6.json\",\n",[113,262,263],{"class":115,"line":143},[113,264,265],{"class":133},"  \"width\": 300,\n",[113,267,268],{"class":115,"line":149},[113,269,270],{"class":133},"  \"height\": 150,\n",[113,272,273],{"class":115,"line":155},[113,274,275],{"class":133},"  \"data\": [{ \"name\": \"table\", \"values\": [{ \"x\": \"A\", \"y\": 4 }] }],\n",[113,277,278],{"class":115,"line":161},[113,279,280],{"class":133},"  \"marks\": [{ \"type\": \"rect\", \"from\": { \"data\": \"table\" }, ... }]\n",[113,282,283],{"class":115,"line":167},[113,284,212],{"class":133},[113,286,287],{"class":115,"line":173},[113,288,127],{"class":126},[113,290,291],{"class":115,"line":179},[113,292,223],{"class":119},[294,295,296,299,300,302,303,307,308,311,312,315,316,318],"note",{},[92,297,298],{},"::vega"," was previously an alias for ",[92,301,236],{},". It is now a separate ",[304,305,306],"strong",{},"component directive"," that produces a ",[92,309,310],{},"\u003CVega>"," node — see ",[313,314,33],"a",{"href":34},". Use ",[92,317,236],{}," for full-Vega inline SVG.",[88,320,322,325],{"id":321},"chart-auto-detect-engine",[92,323,324],{},"::chart"," — Auto-detect engine",[104,327,329],{"className":106,"code":328,"language":108,"meta":109,"style":109},"::chart{engine=\"vega-lite\"}\n{ ... }\n::\n",[92,330,331,336,341],{"__ignoreMap":109},[113,332,333],{"class":115,"line":116},[113,334,335],{"class":119},"::chart{engine=\"vega-lite\"}\n",[113,337,338],{"class":115,"line":123},[113,339,340],{"class":119},"{ ... }\n",[113,342,343],{"class":115,"line":130},[113,344,223],{"class":119},[84,346,347],{},"Engine is inferred in this order:",[349,350,351,366,375,381,402],"ol",{},[352,353,354,357,358,361,362,365],"li",{},[92,355,356],{},"engine="," attr (",[92,359,360],{},"vega-lite"," | ",[92,363,364],{},"vega",")",[352,367,368,369,371,372,374],{},"Directive tag (",[92,370,94],{}," → vega-lite, ",[92,373,236],{}," → vega)",[352,376,377,380],{},[92,378,379],{},"$schema"," URL in spec",[352,382,383,384,387,388,387,391,394,395,387,398,401],{},"Presence of ",[92,385,386],{},"mark","\u002F",[92,389,390],{},"layer",[92,392,393],{},"hconcat","\u002F… → vega-lite; ",[92,396,397],{},"marks",[92,399,400],{},"signals","\u002F… → vega",[352,403,404,405],{},"Default: ",[92,406,360],{},[88,408,410],{"id":409},"spec-sources-for-inline-svg","Spec sources for inline-SVG",[84,412,413],{},"The chart spec is resolved from these sources (in priority order):",[349,415,416,422],{},[352,417,418,421],{},[304,419,420],{},"Code-fenced block body"," — the recommended format. Wrapping the spec in a code fence preserves it as raw text.",[352,423,424,430],{},[304,425,426,429],{},[92,427,428],{},"spec="," attr"," — only reliable for simple, flat specs with at most one level of object nesting. Comark's attr parser may misinterpret nested braces inside quoted attr values.",[84,432,433,434,436,437,230],{},"See ",[313,435,64],{"href":65}," for sugar directives like ",[92,438,439],{},"::chart-bar",[441,442,443],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sJsPd, html code.shiki .sJsPd{--shiki-light:#90A4AE90;--shiki-default:#EEFFFF90;--shiki-dark:#BABED890}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);}",{"title":109,"searchDepth":123,"depth":123,"links":445},[446,448,450,452],{"id":90,"depth":123,"text":447},"::vl — Vega-Lite",{"id":233,"depth":123,"text":449},"::vg — Full Vega",{"id":321,"depth":123,"text":451},"::chart — Auto-detect engine",{"id":409,"depth":123,"text":410},"Parse-time chart rendering with ::vl, ::vg, ::chart, and mark shortcuts — no runtime component required.",null,{},{"icon":41},{"title":38,"description":453},"_p0ZMSxaGE097-YA0RXGOvrTmH8ZpzzNFPK1Ct_vqAw",[460,462],{"title":33,"path":34,"stem":35,"description":461,"icon":36,"children":-1},"Fenced vega blocks and ::vega component directives — both produce the same Vega AST node.",{"title":43,"path":44,"stem":45,"description":463,"icon":46,"children":-1},"Control inline SVG, base64 img, or PNG output with the output attribute or frontmatter defaults.",1791246355223]