[{"data":1,"prerenderedAt":2343},["ShallowReactive",2],{"navigation":3,"$fd9cvft0wf4ga":587,"\u002Fdocs\u002Fcomponents\u002Fcode-block":600,"surround-\u002Fdocs\u002Fcomponents\u002Fcode-block":2340},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","\u002Fdocs","docs",[9,306,332,350,438,444,461,487,500],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":305},"Components","\u002Fdocs\u002Fcomponents","docs\u002F02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002Fcomponents\u002Faccordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002Fcomponents\u002Falert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002Fcomponents\u002Falert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","\u002Fdocs\u002Fcomponents\u002Faspect-ratio","docs\u002Fcomponents\u002Faspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Attachment","\u002Fdocs\u002Fcomponents\u002Fattachment","docs\u002Fcomponents\u002Fattachment",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002Fcomponents\u002Favatar",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002Fcomponents\u002Fbadge",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002Fcomponents\u002Fbreadcrumb",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Bubble","\u002Fdocs\u002Fcomponents\u002Fbubble","docs\u002Fcomponents\u002Fbubble",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002Fcomponents\u002Fbutton",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Button Group","\u002Fdocs\u002Fcomponents\u002Fbutton-group","docs\u002Fcomponents\u002Fbutton-group",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002Fcomponents\u002Fcalendar",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002Fcomponents\u002Fcard",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002Fcomponents\u002Fcarousel",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Chart","\u002Fdocs\u002Fcomponents\u002Fchart","docs\u002Fcomponents\u002Fchart",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002Fcomponents\u002Fcheckbox",{"title":81,"path":82,"stem":83,"new":84,"type":19,"children":-1},"Code Block","\u002Fdocs\u002Fcomponents\u002Fcode-block","docs\u002Fcomponents\u002Fcode-block",true,{"title":86,"path":87,"stem":88,"new":18,"type":19,"children":-1},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002Fcomponents\u002Fcollapsible",{"title":90,"path":91,"stem":92,"new":18,"type":19,"children":-1},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002Fcomponents\u002Fcombobox",{"title":94,"path":95,"stem":96,"new":18,"type":19,"children":-1},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002Fcomponents\u002Fcommand",{"title":98,"path":99,"stem":100,"new":18,"type":19,"children":-1},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002Fcomponents\u002Fcontext-menu",{"title":102,"path":103,"stem":104,"new":18,"type":19,"children":-1},"Data Table","\u002Fdocs\u002Fcomponents\u002Fdata-table","docs\u002Fcomponents\u002Fdata-table",{"title":106,"path":107,"stem":108,"new":18,"type":19,"children":-1},"Date Picker","\u002Fdocs\u002Fcomponents\u002Fdate-picker","docs\u002Fcomponents\u002Fdate-picker",{"title":110,"path":111,"stem":112,"new":18,"type":19,"children":-1},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002Fcomponents\u002Fdialog",{"title":114,"path":115,"stem":116,"new":18,"type":19,"children":-1},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002Fcomponents\u002Fdrawer",{"title":118,"path":119,"stem":120,"new":18,"type":19,"children":-1},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002Fcomponents\u002Fdropdown-menu",{"title":122,"path":123,"stem":124,"new":18,"type":19,"children":-1},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002Fcomponents\u002Fempty",{"title":126,"path":127,"stem":128,"new":18,"type":19,"children":-1},"Field","\u002Fdocs\u002Fcomponents\u002Ffield","docs\u002Fcomponents\u002Ffield",{"title":130,"path":131,"stem":132,"new":18,"type":19,"children":-1},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002Fcomponents\u002Fform",{"title":134,"path":135,"stem":136,"new":18,"type":19,"children":-1},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002Fcomponents\u002Fhover-card",{"title":138,"path":139,"stem":140,"new":18,"type":19,"children":-1},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002Fcomponents\u002Finput",{"title":142,"path":143,"stem":144,"new":18,"type":19,"children":-1},"Input Group","\u002Fdocs\u002Fcomponents\u002Finput-group","docs\u002Fcomponents\u002Finput-group",{"title":146,"path":147,"stem":148,"new":18,"type":19,"children":-1},"Input OTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002Fcomponents\u002Finput-otp",{"title":150,"path":151,"stem":152,"new":18,"type":19,"children":-1},"Item","\u002Fdocs\u002Fcomponents\u002Fitem","docs\u002Fcomponents\u002Fitem",{"title":154,"path":155,"stem":156,"new":18,"type":19,"children":-1},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002Fcomponents\u002Fkbd",{"title":158,"path":159,"stem":160,"new":18,"type":19,"children":-1},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002Fcomponents\u002Flabel",{"title":162,"path":163,"stem":164,"new":18,"type":19,"children":-1},"Marker","\u002Fdocs\u002Fcomponents\u002Fmarker","docs\u002Fcomponents\u002Fmarker",{"title":166,"path":167,"stem":168,"new":18,"type":19,"children":-1},"Menubar","\u002Fdocs\u002Fcomponents\u002Fmenubar","docs\u002Fcomponents\u002Fmenubar",{"title":170,"path":171,"stem":172,"new":18,"type":19,"children":-1},"Message","\u002Fdocs\u002Fcomponents\u002Fmessage","docs\u002Fcomponents\u002Fmessage",{"title":174,"path":175,"stem":176,"new":18,"type":19,"children":-1},"Message Scroller","\u002Fdocs\u002Fcomponents\u002Fmessage-scroller","docs\u002Fcomponents\u002Fmessage-scroller",{"title":178,"path":179,"stem":180,"new":18,"type":19,"children":-1},"Native Select","\u002Fdocs\u002Fcomponents\u002Fnative-select","docs\u002Fcomponents\u002Fnative-select",{"title":182,"path":183,"stem":184,"new":18,"type":19,"children":-1},"Navigation Menu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002Fcomponents\u002Fnavigation-menu",{"title":186,"path":187,"stem":188,"new":18,"type":19,"children":-1},"Number Field","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002Fcomponents\u002Fnumber-field",{"title":190,"path":191,"stem":192,"new":18,"type":19,"children":-1},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002Fcomponents\u002Fpagination",{"title":194,"path":195,"stem":196,"new":18,"type":19,"children":-1},"Pin Input","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002Fcomponents\u002Fpin-input",{"title":198,"path":199,"stem":200,"new":18,"type":19,"children":-1},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002Fcomponents\u002Fpopover",{"title":202,"path":203,"stem":204,"new":18,"type":19,"children":-1},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002Fcomponents\u002Fprogress",{"title":206,"path":207,"stem":208,"new":84,"type":19,"children":-1},"Questionnaire","\u002Fdocs\u002Fcomponents\u002Fquestionnaire","docs\u002Fcomponents\u002Fquestionnaire",{"title":210,"path":211,"stem":212,"new":18,"type":19,"children":-1},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002Fcomponents\u002Fradio-group",{"title":214,"path":215,"stem":216,"new":18,"type":19,"children":-1},"Range Calendar","\u002Fdocs\u002Fcomponents\u002Frange-calendar","docs\u002Fcomponents\u002Frange-calendar",{"title":218,"path":219,"stem":220,"new":18,"type":19,"children":-1},"Resizable","\u002Fdocs\u002Fcomponents\u002Fresizable","docs\u002Fcomponents\u002Fresizable",{"title":222,"path":223,"stem":224,"new":18,"type":19,"children":-1},"Scroll Area","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002Fcomponents\u002Fscroll-area",{"title":226,"path":227,"stem":228,"new":18,"type":19,"children":-1},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002Fcomponents\u002Fselect",{"title":230,"path":231,"stem":232,"new":18,"type":19,"children":-1},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002Fcomponents\u002Fseparator",{"title":234,"path":235,"stem":236,"new":18,"type":19,"children":-1},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002Fcomponents\u002Fsheet",{"title":238,"path":239,"stem":240,"new":18,"type":19,"children":-1},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002Fcomponents\u002Fsidebar",{"title":242,"path":243,"stem":244,"new":18,"type":19,"children":-1},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002Fcomponents\u002Fskeleton",{"title":246,"path":247,"stem":248,"new":18,"type":19,"children":-1},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002Fcomponents\u002Fslider",{"title":250,"path":251,"stem":252,"new":18,"type":19,"children":-1},"Sonner","\u002Fdocs\u002Fcomponents\u002Fsonner","docs\u002Fcomponents\u002Fsonner",{"title":254,"path":255,"stem":256,"new":18,"type":19,"children":-1},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002Fcomponents\u002Fspinner",{"title":258,"path":259,"stem":260,"new":18,"type":19,"children":-1},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002Fcomponents\u002Fstepper",{"title":262,"path":263,"stem":264,"new":18,"type":19,"children":-1},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002Fcomponents\u002Fswitch",{"title":266,"path":267,"stem":268,"new":18,"type":19,"children":-1},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002Fcomponents\u002Ftable",{"title":270,"path":271,"stem":272,"new":18,"type":19,"children":-1},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002Fcomponents\u002Ftabs",{"title":274,"path":275,"stem":276,"new":18,"type":19,"children":-1},"Tags Input","\u002Fdocs\u002Fcomponents\u002Ftags-input","docs\u002Fcomponents\u002Ftags-input",{"title":278,"path":279,"stem":280,"new":18,"type":19,"children":-1},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002Fcomponents\u002Ftextarea",{"title":282,"path":283,"stem":284,"new":18,"type":19,"children":-1},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002Fcomponents\u002Ftoast",{"title":286,"path":287,"stem":288,"new":18,"type":19,"children":-1},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002Fcomponents\u002Ftoggle",{"title":290,"path":291,"stem":292,"new":18,"type":19,"children":-1},"Toggle Group","\u002Fdocs\u002Fcomponents\u002Ftoggle-group","docs\u002Fcomponents\u002Ftoggle-group",{"title":294,"path":295,"stem":296,"new":18,"type":19,"children":-1},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002Fcomponents\u002Ftooltip",{"title":298,"path":299,"stem":300,"new":84,"type":19,"children":-1},"Trace","\u002Fdocs\u002Fcomponents\u002Ftrace","docs\u002Fcomponents\u002Ftrace",{"title":302,"path":303,"stem":304,"new":18,"type":19,"children":-1},"Typography","\u002Fdocs\u002Fcomponents\u002Ftypography","docs\u002Fcomponents\u002Ftypography","group",{"title":307,"path":308,"stem":309,"children":310,"new":18,"type":305},"Installation","\u002Fdocs\u002Finstallation","docs\u002F02.installation",[311,316,320,324,328],{"title":312,"path":313,"stem":314,"new":18,"type":315,"children":-1},"Vite","\u002Fdocs\u002Finstallation\u002Fvite","docs\u002Finstallation\u002F01.vite","page",{"title":317,"path":318,"stem":319,"new":18,"type":315,"children":-1},"Nuxt","\u002Fdocs\u002Finstallation\u002Fnuxt","docs\u002Finstallation\u002F02.nuxt",{"title":321,"path":322,"stem":323,"new":18,"type":315,"children":-1},"Astro","\u002Fdocs\u002Finstallation\u002Fastro","docs\u002Finstallation\u002F03.astro",{"title":325,"path":326,"stem":327,"new":18,"type":315,"children":-1},"Laravel","\u002Fdocs\u002Finstallation\u002Flaravel","docs\u002Finstallation\u002F04.laravel",{"title":329,"path":330,"stem":331,"new":18,"type":315,"children":-1},"Manual Installation","\u002Fdocs\u002Finstallation\u002Fmanual","docs\u002Finstallation\u002F05.manual",{"title":333,"path":334,"stem":335,"children":336,"new":18,"type":305},"Dark Mode","\u002Fdocs\u002Fdark-mode","docs\u002F05.dark-mode",[337,340,343,347],{"title":312,"path":338,"stem":339,"new":18,"type":315,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fvite","docs\u002Fdark-mode\u002F01.vite",{"title":317,"path":341,"stem":342,"new":18,"type":315,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fnuxt","docs\u002Fdark-mode\u002F02.nuxt",{"title":344,"path":345,"stem":346,"new":18,"type":315,"children":-1},"Vitepress","\u002Fdocs\u002Fdark-mode\u002Fvitepress","docs\u002Fdark-mode\u002F03.vitepress",{"title":321,"path":348,"stem":349,"new":18,"type":315,"children":-1},"\u002Fdocs\u002Fdark-mode\u002Fastro","docs\u002Fdark-mode\u002F04.astro",{"title":351,"path":352,"stem":353,"children":354,"new":18,"type":305},"AI Elements","\u002Fdocs\u002Fai-elements","docs\u002Fai-elements",[355,359,363,367,371,375,379,383,386,390,394,398,402,406,410,414,418,422,426,430,434],{"title":356,"path":357,"stem":358,"new":84,"type":315,"children":-1},"Chain of Thought","\u002Fdocs\u002Fai-elements\u002Fchain-of-thought","docs\u002Fai-elements\u002Fchain-of-thought",{"title":360,"path":361,"stem":362,"new":84,"type":315,"children":-1},"Chat","\u002Fdocs\u002Fai-elements\u002Fchat","docs\u002Fai-elements\u002Fchat",{"title":364,"path":365,"stem":366,"new":84,"type":315,"children":-1},"Checkpoint","\u002Fdocs\u002Fai-elements\u002Fcheckpoint","docs\u002Fai-elements\u002Fcheckpoint",{"title":368,"path":369,"stem":370,"new":84,"type":315,"children":-1},"Confirmation","\u002Fdocs\u002Fai-elements\u002Fconfirmation","docs\u002Fai-elements\u002Fconfirmation",{"title":372,"path":373,"stem":374,"new":84,"type":315,"children":-1},"Context","\u002Fdocs\u002Fai-elements\u002Fcontext","docs\u002Fai-elements\u002Fcontext",{"title":376,"path":377,"stem":378,"new":84,"type":315,"children":-1},"File Tree","\u002Fdocs\u002Fai-elements\u002Ffile-tree","docs\u002Fai-elements\u002Ffile-tree",{"title":380,"path":381,"stem":382,"new":84,"type":315,"children":-1},"Inline Citation","\u002Fdocs\u002Fai-elements\u002Finline-citation","docs\u002Fai-elements\u002Finline-citation",{"title":170,"path":384,"stem":385,"new":84,"type":315,"children":-1},"\u002Fdocs\u002Fai-elements\u002Fmessage","docs\u002Fai-elements\u002Fmessage",{"title":387,"path":388,"stem":389,"new":84,"type":315,"children":-1},"Model Selector","\u002Fdocs\u002Fai-elements\u002Fmodel-selector","docs\u002Fai-elements\u002Fmodel-selector",{"title":391,"path":392,"stem":393,"new":84,"type":315,"children":-1},"Plan","\u002Fdocs\u002Fai-elements\u002Fplan","docs\u002Fai-elements\u002Fplan",{"title":395,"path":396,"stem":397,"new":84,"type":315,"children":-1},"Prompt Input","\u002Fdocs\u002Fai-elements\u002Fprompt-input","docs\u002Fai-elements\u002Fprompt-input",{"title":399,"path":400,"stem":401,"new":84,"type":315,"children":-1},"Queue","\u002Fdocs\u002Fai-elements\u002Fqueue","docs\u002Fai-elements\u002Fqueue",{"title":403,"path":404,"stem":405,"new":84,"type":315,"children":-1},"Reasoning","\u002Fdocs\u002Fai-elements\u002Freasoning","docs\u002Fai-elements\u002Freasoning",{"title":407,"path":408,"stem":409,"new":84,"type":315,"children":-1},"Sources","\u002Fdocs\u002Fai-elements\u002Fsources","docs\u002Fai-elements\u002Fsources",{"title":411,"path":412,"stem":413,"new":84,"type":315,"children":-1},"Stack Trace","\u002Fdocs\u002Fai-elements\u002Fstack-trace","docs\u002Fai-elements\u002Fstack-trace",{"title":415,"path":416,"stem":417,"new":84,"type":315,"children":-1},"Subagent","\u002Fdocs\u002Fai-elements\u002Fsubagent","docs\u002Fai-elements\u002Fsubagent",{"title":419,"path":420,"stem":421,"new":84,"type":315,"children":-1},"Suggestion","\u002Fdocs\u002Fai-elements\u002Fsuggestion","docs\u002Fai-elements\u002Fsuggestion",{"title":423,"path":424,"stem":425,"new":84,"type":315,"children":-1},"Task","\u002Fdocs\u002Fai-elements\u002Ftask","docs\u002Fai-elements\u002Ftask",{"title":427,"path":428,"stem":429,"new":84,"type":315,"children":-1},"Terminal","\u002Fdocs\u002Fai-elements\u002Fterminal","docs\u002Fai-elements\u002Fterminal",{"title":431,"path":432,"stem":433,"new":84,"type":315,"children":-1},"Test Results","\u002Fdocs\u002Fai-elements\u002Ftest-results","docs\u002Fai-elements\u002Ftest-results",{"title":435,"path":436,"stem":437,"new":84,"type":315,"children":-1},"Tool","\u002Fdocs\u002Fai-elements\u002Ftool","docs\u002Fai-elements\u002Ftool",{"title":439,"path":440,"stem":441,"children":442,"new":18,"type":305},"Directory","\u002Fdocs\u002Fdirectory","docs\u002Fdirectory\u002Findex",[443],{"title":439,"path":440,"stem":441,"new":18,"type":315,"children":-1},{"title":445,"path":446,"stem":447,"children":448,"new":18,"type":305},"Forms","\u002Fdocs\u002Fforms","docs\u002Fforms",[449,453,457],{"title":450,"path":451,"stem":452,"new":18,"type":315,"children":-1},"VeeValidate","\u002Fdocs\u002Fforms\u002Fvee-validate","docs\u002Fforms\u002F01.vee-validate",{"title":454,"path":455,"stem":456,"new":18,"type":315,"children":-1},"TanStack Form","\u002Fdocs\u002Fforms\u002Ftanstack-form","docs\u002Fforms\u002F02.tanstack-form",{"title":458,"path":459,"stem":460,"new":18,"type":315,"children":-1},"Formisch","\u002Fdocs\u002Fforms\u002Fformisch","docs\u002Fforms\u002F03.formisch",{"title":462,"path":463,"stem":464,"children":465,"new":18,"type":305},"Registry","\u002Fdocs\u002Fregistry","docs\u002Fregistry\u002Findex",[466,467,471,475,479,483],{"title":462,"path":463,"stem":464,"new":18,"type":315,"children":-1},{"title":468,"path":469,"stem":470,"new":18,"type":315,"children":-1},"Examples","\u002Fdocs\u002Fregistry\u002Fexamples","docs\u002Fregistry\u002Fexamples",{"title":472,"path":473,"stem":474,"new":18,"type":315,"children":-1},"FAQ","\u002Fdocs\u002Fregistry\u002Ffaq","docs\u002Fregistry\u002Ffaq",{"title":476,"path":477,"stem":478,"new":18,"type":315,"children":-1},"Getting Started","\u002Fdocs\u002Fregistry\u002Fgetting-started","docs\u002Fregistry\u002Fgetting-started",{"title":480,"path":481,"stem":482,"new":18,"type":315,"children":-1},"registry-item.json","\u002Fdocs\u002Fregistry\u002Fregistry-item-json","docs\u002Fregistry\u002Fregistry-item-json",{"title":484,"path":485,"stem":486,"new":18,"type":315,"children":-1},"registry.json","\u002Fdocs\u002Fregistry\u002Fregistry-json","docs\u002Fregistry\u002Fregistry-json",{"title":488,"path":489,"stem":490,"children":491,"page":18,"type":305},"Utilities","\u002Fdocs\u002Futilities","docs\u002Futilities",[492,496],{"title":493,"path":494,"stem":495,"new":18,"type":315,"children":-1},"scroll-fade","\u002Fdocs\u002Futilities\u002Fscroll-fade","docs\u002Futilities\u002Fscroll-fade",{"title":497,"path":498,"stem":499,"new":18,"type":315,"children":-1},"shimmer","\u002Fdocs\u002Futilities\u002Fshimmer","docs\u002Futilities\u002Fshimmer",{"path":6,"stem":7,"title":501,"type":305,"children":502},"Get Started",[503,507,514,518,522,528,532,536,540,544,548,552,575,579,583],{"title":504,"path":505,"stem":506,"new":18,"type":315,"children":-1},"Introduction","\u002Fdocs\u002Fintroduction","docs\u002F01.introduction",{"title":307,"path":308,"stem":309,"children":508,"new":18,"type":305},[509,510,511,512,513],{"title":312,"path":313,"stem":314,"new":18,"type":315,"children":-1},{"title":317,"path":318,"stem":319,"new":18,"type":315,"children":-1},{"title":321,"path":322,"stem":323,"new":18,"type":315,"children":-1},{"title":325,"path":326,"stem":327,"new":18,"type":315,"children":-1},{"title":329,"path":330,"stem":331,"new":18,"type":315,"children":-1},{"title":515,"path":516,"stem":517,"new":18,"type":315,"children":-1},"components.json","\u002Fdocs\u002Fcomponents-json","docs\u002F03.components-json",{"title":519,"path":520,"stem":521,"new":18,"type":315,"children":-1},"Theming","\u002Fdocs\u002Ftheming","docs\u002F04.theming",{"title":333,"path":334,"stem":335,"children":523,"new":18,"type":305},[524,525,526,527],{"title":312,"path":338,"stem":339,"new":18,"type":315,"children":-1},{"title":317,"path":341,"stem":342,"new":18,"type":315,"children":-1},{"title":344,"path":345,"stem":346,"new":18,"type":315,"children":-1},{"title":321,"path":348,"stem":349,"new":18,"type":315,"children":-1},{"title":529,"path":530,"stem":531,"new":18,"type":315,"children":-1},"CLI","\u002Fdocs\u002Fcli","docs\u002F06.cli",{"title":533,"path":534,"stem":535,"new":18,"type":315,"children":-1},"JavaScript","\u002Fdocs\u002Fjavascript","docs\u002F07.javascript",{"title":537,"path":538,"stem":539,"new":18,"type":315,"children":-1},"RTL","\u002Fdocs\u002Frtl","docs\u002F08.rtl",{"title":541,"path":542,"stem":543,"new":18,"type":315,"children":-1},"Figma","\u002Fdocs\u002Ffigma","docs\u002F09.figma",{"title":545,"path":546,"stem":547,"new":18,"type":315,"children":-1},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F10.changelog",{"title":549,"path":550,"stem":551,"new":18,"type":315,"children":-1},"Legacy Docs","\u002Fdocs\u002Flegacy","docs\u002F11.legacy",{"title":351,"path":352,"stem":353,"children":553,"new":18,"type":305},[554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574],{"title":356,"path":357,"stem":358,"new":84,"type":315,"children":-1},{"title":360,"path":361,"stem":362,"new":84,"type":315,"children":-1},{"title":364,"path":365,"stem":366,"new":84,"type":315,"children":-1},{"title":368,"path":369,"stem":370,"new":84,"type":315,"children":-1},{"title":372,"path":373,"stem":374,"new":84,"type":315,"children":-1},{"title":376,"path":377,"stem":378,"new":84,"type":315,"children":-1},{"title":380,"path":381,"stem":382,"new":84,"type":315,"children":-1},{"title":170,"path":384,"stem":385,"new":84,"type":315,"children":-1},{"title":387,"path":388,"stem":389,"new":84,"type":315,"children":-1},{"title":391,"path":392,"stem":393,"new":84,"type":315,"children":-1},{"title":395,"path":396,"stem":397,"new":84,"type":315,"children":-1},{"title":399,"path":400,"stem":401,"new":84,"type":315,"children":-1},{"title":403,"path":404,"stem":405,"new":84,"type":315,"children":-1},{"title":407,"path":408,"stem":409,"new":84,"type":315,"children":-1},{"title":411,"path":412,"stem":413,"new":84,"type":315,"children":-1},{"title":415,"path":416,"stem":417,"new":84,"type":315,"children":-1},{"title":419,"path":420,"stem":421,"new":84,"type":315,"children":-1},{"title":423,"path":424,"stem":425,"new":84,"type":315,"children":-1},{"title":427,"path":428,"stem":429,"new":84,"type":315,"children":-1},{"title":431,"path":432,"stem":433,"new":84,"type":315,"children":-1},{"title":435,"path":436,"stem":437,"new":84,"type":315,"children":-1},{"title":576,"path":577,"stem":578,"new":18,"type":315,"children":-1},"Skills","\u002Fdocs\u002Fskills","docs\u002Fskills",{"title":580,"path":581,"stem":582,"new":18,"type":315,"children":-1},"Typeset","\u002Fdocs\u002Ftypeset","docs\u002Ftypeset",{"title":488,"path":489,"stem":490,"children":584,"page":18,"type":305},[585,586],{"title":493,"path":494,"stem":495,"new":18,"type":315,"children":-1},{"title":497,"path":498,"stem":499,"new":18,"type":315,"children":-1},{"repo":588},{"id":589,"name":590,"repo":591,"description":592,"createdAt":593,"updatedAt":594,"pushedAt":595,"stars":596,"watchers":597,"forks":598,"defaultBranch":599},658791894,"shadcn-vue","unovue\u002Fshadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-10-15T03:21:33Z","2026-10-14T03:11:00Z",10691,36,681,"dev",{"id":601,"title":81,"body":602,"description":2333,"extension":2334,"links":2335,"meta":2336,"navigation":84,"new":84,"path":82,"rawbody":2337,"seo":2338,"stem":83,"__hash__":2339},"content\u002Fdocs\u002Fcomponents\u002Fcode-block.md",{"type":603,"value":604,"toc":2282},"minimark",[605,612,624,627,631,707,733,737,746,750,758,768,772,828,832,838,842,846,866,870,876,882,886,894,898,904,908,917,921,925,934,938,942,948,952,955,964,968,972,982,986,990,1010,1014,1018,1028,1032,1046,1050,1062,1066,1072,1077,1080,1084,1088,1103,1107,1111,1117,1121,1124,1150,1154,1157,1169,1173,1176,1183,1187,1189,1200,1204,1207,1214,1219,1223,1238,1242,1248,1251,1259,1262,1266,1272,1276,1331,1335,1342,1346,1349,1353,1366,1372,1386,1392,1396,1399,1403,1406,1431,1435,1452,1459,1465,1472,1476,1548,1552,1555,1558,1646,1649,1652,1683,1686,1689,1720,1723,1729,1760,1763,1773,1894,1897,1902,2025,2028,2031,2080,2083,2095,2128,2131,2134,2165,2168,2174,2181,2228,2231,2237,2246,2249,2255,2273,2276],[606,607],"component-preview",{"className":608,"name":610,"previewClass":611},[609],"style-rhea","CodeBlockDemo","h-auto",[613,614,615,619,620,623],"p",{},[616,617,618],"code",{},"CodeBlock"," displays code, terminal output, logs and diffs. It has a header with a title and actions, line numbers, wrapping, diff and highlighted lines, and a small size for tool output in a ",[621,622,298],"a",{"href":299},".",[613,625,626],{},"Syntax highlighting is optional and lives in a separate composable, so a block that only shows plain output stays small.",[628,629,307],"h2",{"id":630},"installation",[632,633,634,649,662],"code-tabs",{},[635,636,637,643],"tabs-list",{},[638,639,641],"tabs-trigger",{"value":640},"cli",[613,642,529],{},[638,644,646],{"value":645},"manual",[613,647,648],{},"Manual",[650,651,652],"tabs-content",{"value":640},[653,654,660],"pre",{"className":655,"code":657,"language":658,"meta":659},[656],"language-bash","npx shadcn-vue@latest add code-block\n","bash","",[616,661,657],{"__ignoreMap":659},[650,663,664],{"value":645},[665,666,667,673,679,684,690,702],"steps",{},[668,669,670],"step",{},[613,671,672],{},"Install the following dependencies:",[653,674,677],{"className":675,"code":676,"language":658,"meta":659},[656],"npm install shiki\n",[616,678,676],{"__ignoreMap":659},[668,680,681],{},[613,682,683],{},"Install the required shadcn-vue dependencies:",[653,685,688],{"className":686,"code":687,"language":658,"meta":659},[656],"npx shadcn-vue@latest add button\n",[616,689,687],{"__ignoreMap":659},[668,691,692],{},[613,693,694,695,701],{},"Copy and paste the ",[621,696,700],{"href":697,"rel":698},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fbases\u002Freka\u002Fui\u002Fcode-block",[699],"nofollow","GitHub source code"," into your project.",[668,703,704],{},[613,705,706],{},"Update the import paths to match your project setup.",[613,708,709,712,713,716,717,720,721,725,726,716,729,732],{},[616,710,711],{},"code-block"," also includes ",[616,714,715],{},"useHighlightedCode"," and ",[616,718,719],{},"CodeBlockToken"," for ",[621,722,724],{"href":723},"#syntax-highlighting","syntax highlighting",". They live in ",[616,727,728],{},"useHighlightedCode.ts",[616,730,731],{},"highlighter.ts"," in the same folder.",[628,734,736],{"id":735},"usage","Usage",[653,738,744],{"className":739,"code":741,"language":742,"meta":743},[740],"language-vue","\u003Cscript setup lang=\"ts\">\nimport {\n  CodeBlock,\n  CodeBlockActions,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFooter,\n  CodeBlockHeader,\n  CodeBlockLine,\n  CodeBlockTitle,\n} from '@\u002Fcomponents\u002Fui\u002Fcode-block'\n\nconst output = `$ pnpm add ai @ai-sdk\u002Fvue zod\nDone in 2.8s using pnpm v10.18.0`\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock>\n    \u003CCodeBlockHeader>\n      \u003CCodeBlockTitle>Terminal\u003C\u002FCodeBlockTitle>\n      \u003CCodeBlockActions>\n        \u003CCodeBlockCopyButton :value=\"output\" \u002F>\n      \u003C\u002FCodeBlockActions>\n    \u003C\u002FCodeBlockHeader>\n    \u003CCodeBlockContent>{{ output }}\u003C\u002FCodeBlockContent>\n  \u003C\u002FCodeBlock>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[616,745,741],{"__ignoreMap":659},[628,747,749],{"id":748},"composition","Composition",[653,751,756],{"className":752,"code":754,"language":755,"meta":659},[753],"language-text","CodeBlock\n├── CodeBlockHeader\n│   ├── CodeBlockTitle\n│   └── CodeBlockActions\n│       └── CodeBlockCopyButton\n├── CodeBlockActions (floating, when there is no header)\n├── CodeBlockContent\n│   └── CodeBlockLine\n│       └── CodeBlockToken\n└── CodeBlockFooter\n","text",[616,757,754],{"__ignoreMap":659},[613,759,760,763,764,767],{},[616,761,762],{},"CodeBlockContent"," takes plain text or a list of ",[616,765,766],{},"CodeBlockLine",". Use lines when you need line variants or highlighted tokens.",[628,769,771],{"id":770},"features","Features",[773,774,775,783,789,799,812,822],"ul",{},[776,777,778,782],"li",{},[779,780,781],"strong",{},"It streams cheaply."," Plain text in the slot renders as one text node, and the highlighter tokenizes only the new lines as code arrives.",[776,784,785,788],{},[779,786,787],{},"It copies cleanly."," Line numbers and diff markers are left out of a selection, and blank lines survive the copy.",[776,790,791,794,795,798],{},[779,792,793],{},"It reads left to right."," The content is always ",[616,796,797],{},"dir=\"ltr\"",". The header follows the page direction.",[776,800,801,804,805,807,808,811],{},[779,802,803],{},"It highlights without WASM."," ",[616,806,715],{}," uses Shiki's JavaScript engine, loads each language on first use and renders ANSI colors in terminal output. On the server, ",[616,809,810],{},"highlightCode"," returns the tokens without a component.",[776,813,814,817,818,821],{},[779,815,816],{},"It fits where code shows up."," Use it in a message, a Markdown fence, a Trace line, Tabs, a Dialog or a ",[616,819,820],{},"typeset"," container.",[776,823,824,827],{},[779,825,826],{},"It scrolls by keyboard."," The content is focusable, and floating actions show on focus as well as on hover.",[628,829,831],{"id":830},"basic","Basic",[613,833,834,835,837],{},"Put plain text in ",[616,836,762],{},". It renders as one text node, so it stays cheap while output streams.",[606,839],{"className":840,"name":841,"previewClass":611},[609],"CodeBlockBasicDemo",[628,843,845],{"id":844},"header","Header",[613,847,848,851,852,716,855,858,859,862,863,623],{},[616,849,850],{},"CodeBlockHeader"," holds a ",[616,853,854],{},"CodeBlockTitle",[616,856,857],{},"CodeBlockActions",". ",[616,860,861],{},"CodeBlockCopyButton"," copies its ",[616,864,865],{},"value",[606,867],{"className":868,"name":869,"previewClass":611},[609],"CodeBlockHeaderDemo",[613,871,872,873,875],{},"A long title truncates. To link the title to a file, wrap ",[616,874,854],{}," in an anchor.",[653,877,880],{"className":878,"code":879,"language":742,"meta":743},[740],"\u003Ctemplate>\n  \u003CCodeBlockHeader>\n    \u003Ca href=\"\u002Ffiles\u002Fchat.post.ts\">\n      \u003CCodeBlockTitle>server\u002Fapi\u002Fchat.post.ts\u003C\u002FCodeBlockTitle>\n    \u003C\u002Fa>\n  \u003C\u002FCodeBlockHeader>\n\u003C\u002Ftemplate>\n",[616,881,879],{"__ignoreMap":659},[628,883,885],{"id":884},"actions","Actions",[613,887,888,890,891,623],{},[616,889,857],{}," holds any number of buttons. For a wrap toggle, keep the state yourself and pass it to ",[616,892,893],{},"wrap",[606,895],{"className":896,"name":897,"previewClass":611},[609],"CodeBlockActionsDemo",[653,899,902],{"className":900,"code":901,"language":742,"meta":743},[740],"\u003Cscript setup lang=\"ts\">\nimport { WrapTextIcon } from '@lucide\u002Fvue'\nimport { useToggle } from '@vueuse\u002Fcore'\n\nconst [wrap, toggleWrap] = useToggle(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlockActions>\n    \u003CButton\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      aria-label=\"Wrap lines\"\n      :aria-pressed=\"wrap\"\n      @click=\"toggleWrap()\"\n    >\n      \u003CWrapTextIcon \u002F>\n    \u003C\u002FButton>\n    \u003CCodeBlockCopyButton :value=\"output\" \u002F>\n  \u003C\u002FCodeBlockActions>\n  \u003CCodeBlockContent :wrap=\"wrap\">\n    {{ output }}\n  \u003C\u002FCodeBlockContent>\n\u003C\u002Ftemplate>\n",[616,903,901],{"__ignoreMap":659},[628,905,907],{"id":906},"floating-actions","Floating Actions",[613,909,910,911,913,914,916],{},"Without a header, put ",[616,912,857],{}," directly inside ",[616,915,618],{},". The actions float at the top end and stay hidden until the block is hovered or focused. They always show on touch screens.",[606,918],{"className":919,"name":920,"previewClass":611},[609],"CodeBlockFloatingActionsDemo",[628,922,924],{"id":923},"line-numbers","Line Numbers",[613,926,927,928,930,931,933],{},"Add ",[616,929,923],{}," to ",[616,932,762],{},". Plain text in the slot is split into lines, and the numbers are not copied with a selection.",[606,935],{"className":936,"name":937,"previewClass":611},[609],"CodeBlockLineNumbersDemo",[628,939,941],{"id":940},"start-line","Start Line",[613,943,944,945,947],{},"Set ",[616,946,940],{}," to number lines from a given line, for a snippet from the middle of a file. The gutter grows to fit the widest number.",[606,949],{"className":950,"name":951,"previewClass":611},[609],"CodeBlockStartLineDemo",[628,953,954],{"id":893},"Wrap",[613,956,957,958,960,961,623],{},"Long lines scroll by default. Add ",[616,959,893],{}," to wrap them, which suits tool output and error messages. To let the reader toggle it, see ",[621,962,885],{"href":963},"#actions",[606,965],{"className":966,"name":967,"previewClass":611},[609],"CodeBlockWrapDemo",[628,969,971],{"id":970},"highlighted-lines","Highlighted Lines",[613,973,974,975,977,978,981],{},"Render each line as a ",[616,976,766],{}," and set ",[616,979,980],{},"variant=\"highlighted\""," on the lines to call out.",[606,983],{"className":984,"name":985,"previewClass":611},[609],"CodeBlockHighlightedLinesDemo",[628,987,989],{"id":988},"diff","Diff",[613,991,944,992,995,996,999,1000,1002,1003,995,1006,1009],{},[616,993,994],{},"variant=\"added\""," or ",[616,997,998],{},"variant=\"removed\""," on a ",[616,1001,766],{},". Each one adds a ",[616,1004,1005],{},"+",[616,1007,1008],{},"−"," marker.",[606,1011],{"className":1012,"name":1013,"previewClass":611},[609],"CodeBlockDiffDemo",[628,1015,1017],{"id":1016},"height","Height",[613,1019,1020,1021,1024,1025,1027],{},"Cap the height with a ",[616,1022,1023],{},"max-h-*"," class on ",[616,1026,762],{},". The content scrolls inside the block.",[606,1029],{"className":1030,"name":1031,"previewClass":611},[609],"CodeBlockHeightDemo",[613,1033,1034,1036,1037,1041,1042,1045],{},[616,1035,762],{}," fades its edges with ",[621,1038,1039],{"href":494},[616,1040,493],{}," as it scrolls: left and right by default, top and bottom when it wraps. Add ",[616,1043,1044],{},"scroll-fade-y"," to a capped block that does not wrap.",[628,1047,1049],{"id":1048},"show-more","Show More",[613,1051,1052,1055,1056,804,1059,1061],{},[616,1053,1054],{},"CodeBlockFooter"," is a slot below the content. For Show More, cap the content while it is collapsed and put a ghost ",[616,1057,1058],{},"xs",[616,1060,53],{}," in the footer.",[606,1063],{"className":1064,"name":1065,"previewClass":611},[609],"CodeBlockShowMoreDemo",[653,1067,1070],{"className":1068,"code":1069,"language":742,"meta":743},[740],"\u003Cscript setup lang=\"ts\">\nimport { useToggle } from '@vueuse\u002Fcore'\nimport { useId } from 'vue'\n\nconst [expanded, toggleExpanded] = useToggle(false)\nconst id = useId()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlockContent\n    :id=\"id\"\n    :class=\"expanded ? undefined : 'max-h-64 overflow-y-hidden scroll-fade-y'\"\n  >\n    {{ code }}\n  \u003C\u002FCodeBlockContent>\n  \u003CCodeBlockFooter class=\"justify-center\">\n    \u003CButton\n      variant=\"ghost\"\n      size=\"xs\"\n      :aria-expanded=\"expanded\"\n      :aria-controls=\"id\"\n      @click=\"toggleExpanded()\"\n    >\n      {{ expanded ? 'Show less' : 'Show more' }}\n    \u003C\u002FButton>\n  \u003C\u002FCodeBlockFooter>\n\u003C\u002Ftemplate>\n",[616,1071,1069],{"__ignoreMap":659},[1073,1074,1076],"h3",{"id":1075},"max-height","Max Height",[613,1078,1079],{},"To keep a long block from taking over the page, raise the cap instead of removing it. The expanded content scrolls, and the edges fade as you scroll.",[606,1081],{"className":1082,"name":1083,"previewClass":611},[609],"CodeBlockShowMoreScrollDemo",[628,1085,1087],{"id":1086},"size","Size",[613,1089,1090,1091,1094,1095,1098,1099,1102],{},"Use ",[616,1092,1093],{},"size=\"sm\""," for tool and ",[621,1096,298],{"href":1097},"#trace"," output. It has tighter padding and ",[616,1100,1101],{},"text-xs"," text.",[606,1104],{"className":1105,"name":1106,"previewClass":611},[609],"CodeBlockSizeDemo",[628,1108,1110],{"id":1109},"destructive","Destructive",[613,1112,1090,1113,1116],{},[616,1114,1115],{},"variant=\"destructive\""," for errors and failed output.",[606,1118],{"className":1119,"name":1120,"previewClass":611},[609],"CodeBlockDestructiveDemo",[628,1122,298],{"id":1123},"trace",[613,1125,1126,1127,1129,1130,1132,1133,1136,1137,1139,1140,1143,1144,1146,1147,1149],{},"Put a ",[616,1128,618],{}," with ",[616,1131,1093],{}," in ",[616,1134,1135],{},"TraceCollapsibleContent"," for tool and terminal output. Add ",[616,1138,893],{}," and a ",[616,1141,1142],{},"max-h-64"," class to ",[616,1145,762],{}," so long output wraps and scrolls inside the trace. The block sets its own text color, so ",[616,1148,1135],{}," does not mute it.",[606,1151],{"className":1152,"name":1153,"previewClass":611},[609],"CodeBlockTraceDemo",[628,1155,270],{"id":1156},"tabs",[613,1158,1159,1160,1162,1163,1165,1166,623],{},"Show several files with ",[621,1161,270],{"href":271},", one ",[616,1164,618],{}," in each ",[616,1167,1168],{},"TabsContent",[606,1170],{"className":1171,"name":1172,"previewClass":611},[609],"CodeBlockTabsDemo",[628,1174,170],{"id":1175},"message",[613,1177,1126,1178,1180,1181,623],{},[616,1179,618],{}," between paragraphs inside a ",[621,1182,170],{"href":171},[606,1184],{"className":1185,"name":1186,"previewClass":611},[609],"CodeBlockChatDemo",[628,1188,580],{"id":820},[613,1190,1191,1192,1194,1195,1199],{},"A ",[616,1193,618],{}," inside a ",[621,1196,1197],{"href":581},[616,1198,820],{}," container keeps its own styles and gets the same space above as a paragraph.",[606,1201],{"className":1202,"name":1203,"previewClass":611},[609],"CodeBlockTypesetDemo",[628,1205,537],{"id":1206},"rtl",[613,1208,1209,1210,1213],{},"To enable RTL support in shadcn-vue, see the ",[621,1211,1212],{"href":538},"RTL configuration guide",". Code always reads left to right. The header follows the page direction.",[606,1215],{"className":1216,"name":1218},[1217],"style-nova","CodeBlockRTLDemo",[628,1220,1222],{"id":1221},"syntax-highlighting","Syntax Highlighting",[613,1224,1225,1227,1228,1233,1234,1194,1236,623],{},[616,1226,715],{}," highlights with ",[621,1229,1232],{"href":1230,"rel":1231},"https:\u002F\u002Fshiki.style",[699],"Shiki"," and returns a computed list of lines. Each line is a list of tokens, which you render with ",[616,1235,719],{},[616,1237,766],{},[606,1239],{"className":1240,"name":1241,"previewClass":611},[609],"CodeBlockHighlightingDemo",[653,1243,1246],{"className":1244,"code":1245,"language":742,"meta":743},[740],"\u003Cscript setup lang=\"ts\">\nimport {\n  CodeBlock,\n  CodeBlockContent,\n  CodeBlockLine,\n  CodeBlockToken,\n  useHighlightedCode,\n} from '@\u002Fcomponents\u002Fui\u002Fcode-block'\n\nconst lines = useHighlightedCode(code, 'json')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock>\n    \u003CCodeBlockContent>\n      \u003CCodeBlockLine v-for=\"(line, index) in lines\" :key=\"index\">\n        \u003CCodeBlockToken v-for=\"(token, i) in line\" :key=\"i\" :token=\"token\" \u002F>\n      \u003C\u002FCodeBlockLine>\n    \u003C\u002FCodeBlockContent>\n  \u003C\u002FCodeBlock>\n\u003C\u002Ftemplate>\n",[616,1247,1245],{"__ignoreMap":659},[613,1249,1250],{},"Both arguments accept a plain value, a ref or a getter, so the lines update when the code or the language changes:",[653,1252,1257],{"className":1253,"code":1255,"language":1256,"meta":743},[1254],"language-ts","const props = defineProps\u003C{ code: string, language: string }>()\n\nconst lines = useHighlightedCode(() => props.code, () => props.language)\n","ts",[616,1258,1255],{"__ignoreMap":659},[613,1260,1261],{},"Shiki uses its JavaScript regex engine, so there is no WASM to load.",[1073,1263,1265],{"id":1264},"languages","Languages",[613,1267,1268,1269,1271],{},"Each language loads the first time it is used. Edit the list in ",[616,1270,731],{},". A language that is not in the list renders as plain text.",[606,1273],{"className":1274,"name":1275,"previewClass":611},[609],"CodeBlockLanguagesDemo",[613,1277,1278,1279,1281,1282,1281,1285,1281,1287,1281,1290,1281,1293,1281,1296,1281,1299,1281,1302,1281,1305,1281,1308,1281,1311,1281,1314,716,1316,1319,1320,1281,1322,1281,1325,716,1328,623],{},"The list ships with ",[616,1280,658],{},", ",[616,1283,1284],{},"css",[616,1286,988],{},[616,1288,1289],{},"html",[616,1291,1292],{},"javascript",[616,1294,1295],{},"json",[616,1297,1298],{},"jsx",[616,1300,1301],{},"markdown",[616,1303,1304],{},"python",[616,1306,1307],{},"sql",[616,1309,1310],{},"tsx",[616,1312,1313],{},"typescript",[616,1315,742],{},[616,1317,1318],{},"yaml",", plus aliases such as ",[616,1321,1256],{},[616,1323,1324],{},"js",[616,1326,1327],{},"sh",[616,1329,1330],{},"yml",[1073,1332,1334],{"id":1333},"terminal-output","Terminal Output",[613,1336,1337,1338,1341],{},"Pass ",[616,1339,1340],{},"\"ansi\""," as the language to render the colors in terminal output. Without it, escape codes show as text.",[606,1343],{"className":1344,"name":1345,"previewClass":611},[609],"CodeBlockAnsiDemo",[613,1347,1348],{},"ANSI colors do not carry from one line to the next.",[1073,1350,1352],{"id":1351},"server-rendering","Server Rendering",[613,1354,1355,1357,1358,1361,1362,1365],{},[616,1356,810],{}," is async and returns the tokens of each line, or ",[616,1359,1360],{},"null"," for a language that is not in the list. Call it from a server route or with ",[616,1363,1364],{},"useAsyncData"," so the tokens are part of the server-rendered HTML.",[653,1367,1370],{"className":1368,"code":1369,"language":742,"meta":743},[740],"\u003Cscript setup lang=\"ts\">\nimport {\n  CodeBlock,\n  CodeBlockContent,\n  CodeBlockLine,\n  CodeBlockToken,\n  highlightCode,\n} from '@\u002Fcomponents\u002Fui\u002Fcode-block'\n\nconst props = defineProps\u003C{ code: string }>()\n\nconst { data: lines } = await useAsyncData(\n  `code-${props.code}`,\n  async () =>\n    (await highlightCode(props.code, 'ts'))\n    ?? props.code.split('\\n').map(line => (line ? [{ content: line }] : [])),\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock>\n    \u003CCodeBlockContent line-numbers>\n      \u003CCodeBlockLine v-for=\"(line, index) in lines\" :key=\"index\">\n        \u003CCodeBlockToken v-for=\"(token, i) in line\" :key=\"i\" :token=\"token\" \u002F>\n      \u003C\u002FCodeBlockLine>\n    \u003C\u002FCodeBlockContent>\n  \u003C\u002FCodeBlock>\n\u003C\u002Ftemplate>\n",[616,1371,1369],{"__ignoreMap":659},[613,1373,1374,1375,1378,1379,1382,1383,1385],{},"To highlight many snippets in a row, ",[616,1376,1377],{},"loadHighlighter"," loads a language once and returns a highlighter with a synchronous ",[616,1380,1381],{},"highlight(code)"," method. It returns ",[616,1384,1360],{}," for a language that is not in the list.",[653,1387,1390],{"className":1388,"code":1389,"language":1256,"meta":743},[1254],"import { loadHighlighter } from '@\u002Fcomponents\u002Fui\u002Fcode-block'\n\nconst highlighter = await loadHighlighter('ts')\nconst { lines } = highlighter?.highlight(code) ?? { lines: [] }\n",[616,1391,1389],{"__ignoreMap":659},[1073,1393,1395],{"id":1394},"streaming","Streaming",[613,1397,1398],{},"While the code streams, the composable tokenizes only the new lines, starting where the last line left off. Lines that did not change keep the same tokens, so Vue skips them.",[606,1400],{"className":1401,"name":1402,"previewClass":611},[609],"CodeBlockStreamingDemo",[1073,1404,1405],{"id":1301},"Markdown",[613,1407,1408,1409,1414,1415,1418,1419,1421,1422,1424,1425,1427,1428,1430],{},"Render the message with ",[621,1410,1413],{"href":1411,"rel":1412},"https:\u002F\u002Fcomark.dev",[699],"Comark"," (",[616,1416,1417],{},"@comark\u002Fvue",") and route fenced code to a ",[616,1420,618],{}," with a custom ",[616,1423,653],{}," component. Comark does not run components inside ",[616,1426,653],{},", so a ",[616,1429,616],{}," component only matches inline code, and inline code stays inline.",[606,1432],{"className":1433,"name":1434,"previewClass":611},[609],"CodeBlockMarkdownDemo",[613,1436,1437,1438,1440,1441,1444,1445,1448,1449,1451],{},"The ",[616,1439,653],{}," component gets the fence's ",[616,1442,1443],{},"language"," as a prop. Declare a ",[616,1446,1447],{},"__node"," prop to receive the raw node, and read the code from it. Pass ",[616,1450,1394],{}," while the message streams, so Comark closes unfinished syntax.",[613,1453,1454,1455,1458],{},"Comark closes an unfinished fence while streaming, but does not say so. The trailing fence is still open when the text has an odd number of lines that start with ",[616,1456,1457],{},"```",". Provide its code, and disable the copy button in the block that matches it.",[653,1460,1463],{"className":1461,"code":1462,"language":742,"meta":743},[740],"\u003Cscript setup lang=\"ts\">\nimport { Markdown } from '@comark\u002Fvue'\nimport { computed, provide } from 'vue'\nimport MarkdownCodeBlock from '.\u002FMarkdownCodeBlock.vue'\n\nconst props = defineProps\u003C{ text: string, streaming?: boolean }>()\n\n\u002F\u002F The code of the trailing fence while it is still open.\nconst openFence = computed(() => {\n  const lines = props.text.trim().split('\\n')\n  const fences = lines.flatMap((line, i) => (line.startsWith('```') ? [i] : []))\n  return props.streaming && fences.length % 2\n    ? lines.slice(fences.at(-1)! + 1).join('\\n')\n    : null\n})\n\nprovide('markdown-open-fence', openFence)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMarkdown\n    :value=\"text\"\n    :components=\"{ pre: MarkdownCodeBlock }\"\n    :streaming=\"streaming\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[616,1464,1462],{"__ignoreMap":659},[653,1466,1470],{"className":1467,"code":1468,"language":742,"meta":1469},[740],"\u003Cscript setup lang=\"ts\">\nimport type { ElementNode } from '@comark\u002Fvue'\nimport type { Ref } from 'vue'\nimport { computed, inject } from 'vue'\n\nconst props = defineProps\u003C{\n  language?: string\n  __node?: ElementNode \u002F\u002F ['pre', attrs, ['code', attrs, text]]\n}>()\n\nconst code = computed(() => {\n  const child = props.__node?.[2]\n  return Array.isArray(child) && typeof child[2] === 'string' ? child[2] : ''\n})\n\n\u002F\u002F True while the closing fence has not arrived yet.\nconst openFence = inject\u003CRef\u003Cstring | null>>('markdown-open-fence')\nconst incomplete = computed(() => openFence?.value?.trimEnd() === code.value.trimEnd())\n\nconst lines = useHighlightedCode(code, () => props.language ?? '')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock>\n    \u003CCodeBlockHeader>\n      \u003CCodeBlockTitle>{{ language || 'text' }}\u003C\u002FCodeBlockTitle>\n      \u003CCodeBlockActions>\n        \u003CCodeBlockCopyButton :value=\"code\" :disabled=\"incomplete\" \u002F>\n      \u003C\u002FCodeBlockActions>\n    \u003C\u002FCodeBlockHeader>\n    \u003CCodeBlockContent>\n      \u003CCodeBlockLine v-for=\"(line, index) in lines\" :key=\"index\">\n        \u003CCodeBlockToken v-for=\"(token, i) in line\" :key=\"i\" :token=\"token\" \u002F>\n      \u003C\u002FCodeBlockLine>\n    \u003C\u002FCodeBlockContent>\n  \u003C\u002FCodeBlock>\n\u003C\u002Ftemplate>\n","showLineNumbers title=\"MarkdownCodeBlock.vue\"",[616,1471,1468],{"__ignoreMap":659},[628,1473,1475],{"id":1474},"accessibility","Accessibility",[773,1477,1478,1492,1505,1508,1511,1519,1524,1531],{},[776,1479,1480,1482,1483,1485,1486,1488,1489,1491],{},[616,1481,762],{}," is a ",[616,1484,653],{}," with a ",[616,1487,616],{}," element and always sets ",[616,1490,797],{},", so code reads left to right on an RTL page.",[776,1493,1494,1496,1497,1500,1501,1504],{},[616,1495,762],{}," has ",[616,1498,1499],{},"tabindex=\"0\"",", so keyboard users can focus it and scroll it. Pass ",[616,1502,1503],{},"tabindex=\"-1\""," to remove the tab stop.",[776,1506,1507],{},"Floating actions show when focus is inside the block, not only on hover, so keyboard users can reach them.",[776,1509,1510],{},"Line numbers are hidden from screen readers.",[776,1512,1513,1514,995,1516,1518],{},"Diff lines carry a ",[616,1515,1005],{},[616,1517,1008],{}," marker as well as a tint, so the change does not rely on color.",[776,1520,1521,1523],{},[616,1522,861],{}," is labelled \"Copy\", and a polite live region announces \"Copied\" after a successful copy.",[776,1525,1526,1527,1530],{},"Give a wrap toggle ",[616,1528,1529],{},"aria-pressed"," so its state is announced.",[776,1532,1533,1534,1537,1538,1541,1542,1545,1546,623],{},"Give a Show More button ",[616,1535,1536],{},"aria-expanded"," and point ",[616,1539,1540],{},"aria-controls"," at the ",[616,1543,1544],{},"id"," of ",[616,1547,762],{},[628,1549,1551],{"id":1550},"api-reference","API Reference",[1073,1553,618],{"id":1554},"codeblock",[613,1556,1557],{},"The surface that holds the header, the content and the footer.",[1559,1560,1561,1580],"table",{},[1562,1563,1564],"thead",{},[1565,1566,1567,1571,1574,1577],"tr",{},[1568,1569,1570],"th",{},"Prop",[1568,1572,1573],{},"Type",[1568,1575,1576],{},"Default",[1568,1578,1579],{},"Description",[1581,1582,1583,1604,1628],"tbody",{},[1565,1584,1585,1591,1596,1601],{},[1586,1587,1588],"td",{},[616,1589,1590],{},"variant",[1586,1592,1593],{},[616,1594,1595],{},"\"default\" | \"destructive\"",[1586,1597,1598],{},[616,1599,1600],{},"\"default\"",[1586,1602,1603],{},"The tone of the block.",[1565,1605,1606,1610,1615,1619],{},[1586,1607,1608],{},[616,1609,1086],{},[1586,1611,1612],{},[616,1613,1614],{},"\"default\" | \"sm\"",[1586,1616,1617],{},[616,1618,1600],{},[1586,1620,1621,1624,1625,1627],{},[616,1622,1623],{},"\"sm\""," has tighter padding and ",[616,1626,1101],{}," code, for tool output.",[1565,1629,1630,1635,1640,1643],{},[1586,1631,1632],{},[616,1633,1634],{},"class",[1586,1636,1637],{},[616,1638,1639],{},"string",[1586,1641,1642],{},"-",[1586,1644,1645],{},"Additional classes to apply to the block.",[1073,1647,850],{"id":1648},"codeblockheader",[613,1650,1651],{},"A row above the content for a title and actions.",[1559,1653,1654,1666],{},[1562,1655,1656],{},[1565,1657,1658,1660,1662,1664],{},[1568,1659,1570],{},[1568,1661,1573],{},[1568,1663,1576],{},[1568,1665,1579],{},[1581,1667,1668],{},[1565,1669,1670,1674,1678,1680],{},[1586,1671,1672],{},[616,1673,1634],{},[1586,1675,1676],{},[616,1677,1639],{},[1586,1679,1642],{},[1586,1681,1682],{},"Additional classes to apply to the header.",[1073,1684,854],{"id":1685},"codeblocktitle",[613,1687,1688],{},"A filename or a label, with an optional icon. It truncates.",[1559,1690,1691,1703],{},[1562,1692,1693],{},[1565,1694,1695,1697,1699,1701],{},[1568,1696,1570],{},[1568,1698,1573],{},[1568,1700,1576],{},[1568,1702,1579],{},[1581,1704,1705],{},[1565,1706,1707,1711,1715,1717],{},[1586,1708,1709],{},[616,1710,1634],{},[1586,1712,1713],{},[616,1714,1639],{},[1586,1716,1642],{},[1586,1718,1719],{},"Additional classes to apply to the title.",[1073,1721,857],{"id":1722},"codeblockactions",[613,1724,1725,1726,1728],{},"Holds buttons at the end of the header. As a direct child of ",[616,1727,618],{},", it floats.",[1559,1730,1731,1743],{},[1562,1732,1733],{},[1565,1734,1735,1737,1739,1741],{},[1568,1736,1570],{},[1568,1738,1573],{},[1568,1740,1576],{},[1568,1742,1579],{},[1581,1744,1745],{},[1565,1746,1747,1751,1755,1757],{},[1586,1748,1749],{},[616,1750,1634],{},[1586,1752,1753],{},[616,1754,1639],{},[1586,1756,1642],{},[1586,1758,1759],{},"Additional classes to apply to the actions.",[1073,1761,861],{"id":1762},"codeblockcopybutton",[613,1764,1765,1766,1768,1769,623],{},"A ghost icon button that copies ",[616,1767,865],{}," to the clipboard. It accepts the props of ",[621,1770,1771],{"href":54},[616,1772,53],{},[1559,1774,1775,1787],{},[1562,1776,1777],{},[1565,1778,1779,1781,1783,1785],{},[1568,1780,1570],{},[1568,1782,1573],{},[1568,1784,1576],{},[1568,1786,1579],{},[1581,1788,1789,1804,1822,1840,1859,1879],{},[1565,1790,1791,1795,1799,1801],{},[1586,1792,1793],{},[616,1794,865],{},[1586,1796,1797],{},[616,1798,1639],{},[1586,1800,1642],{},[1586,1802,1803],{},"Required. The text to copy.",[1565,1805,1806,1810,1814,1819],{},[1586,1807,1808],{},[616,1809,1590],{},[1586,1811,1812],{},[616,1813,1639],{},[1586,1815,1816],{},[616,1817,1818],{},"\"ghost\"",[1586,1820,1821],{},"The variant of the button.",[1565,1823,1824,1828,1832,1837],{},[1586,1825,1826],{},[616,1827,1086],{},[1586,1829,1830],{},[616,1831,1639],{},[1586,1833,1834],{},[616,1835,1836],{},"\"icon-xs\"",[1586,1838,1839],{},"The size of the button.",[1565,1841,1842,1847,1851,1856],{},[1586,1843,1844],{},[616,1845,1846],{},"as",[1586,1848,1849],{},[616,1850,1639],{},[1586,1852,1853],{},[616,1854,1855],{},"\"button\"",[1586,1857,1858],{},"The element or component to render as.",[1565,1860,1861,1866,1871,1876],{},[1586,1862,1863],{},[616,1864,1865],{},"as-child",[1586,1867,1868],{},[616,1869,1870],{},"boolean",[1586,1872,1873],{},[616,1874,1875],{},"false",[1586,1877,1878],{},"Render as the child element.",[1565,1880,1881,1885,1889,1891],{},[1586,1882,1883],{},[616,1884,1634],{},[1586,1886,1887],{},[616,1888,1639],{},[1586,1890,1642],{},[1586,1892,1893],{},"Additional classes to apply to the button.",[1073,1895,762],{"id":1896},"codeblockcontent",[613,1898,1437,1899,1901],{},[616,1900,653],{}," that scrolls or wraps.",[1559,1903,1904,1916],{},[1562,1905,1906],{},[1565,1907,1908,1910,1912,1914],{},[1568,1909,1570],{},[1568,1911,1573],{},[1568,1913,1576],{},[1568,1915,1579],{},[1581,1917,1918,1932,1949,1966,1988,2007],{},[1565,1919,1920,1923,1925,1927],{},[1586,1921,1922],{},"default slot",[1586,1924,1642],{},[1586,1926,1642],{},[1586,1928,1929,1930,623],{},"Plain text, or a list of ",[616,1931,766],{},[1565,1933,1934,1938,1942,1946],{},[1586,1935,1936],{},[616,1937,893],{},[1586,1939,1940],{},[616,1941,1870],{},[1586,1943,1944],{},[616,1945,1875],{},[1586,1947,1948],{},"Wrap long lines instead of scrolling.",[1565,1950,1951,1955,1959,1963],{},[1586,1952,1953],{},[616,1954,923],{},[1586,1956,1957],{},[616,1958,1870],{},[1586,1960,1961],{},[616,1962,1875],{},[1586,1964,1965],{},"Number each line. Plain text in the slot is split into lines.",[1565,1967,1968,1972,1977,1982],{},[1586,1969,1970],{},[616,1971,940],{},[1586,1973,1974],{},[616,1975,1976],{},"number",[1586,1978,1979],{},[616,1980,1981],{},"1",[1586,1983,1984,1985,1987],{},"The number of the first line, when ",[616,1986,923],{}," is set.",[1565,1989,1990,1995,1999,2004],{},[1586,1991,1992],{},[616,1993,1994],{},"tabindex",[1586,1996,1997],{},[616,1998,1976],{},[1586,2000,2001],{},[616,2002,2003],{},"0",[1586,2005,2006],{},"Makes the content focusable so it can be scrolled by keyboard.",[1565,2008,2009,2013,2017,2019],{},[1586,2010,2011],{},[616,2012,1634],{},[1586,2014,2015],{},[616,2016,1639],{},[1586,2018,1642],{},[1586,2020,2021,2022,623],{},"Additional classes to apply to the content, such as ",[616,2023,2024],{},"max-h-72",[1073,2026,766],{"id":2027},"codeblockline",[613,2029,2030],{},"One line of code.",[1559,2032,2033,2045],{},[1562,2034,2035],{},[1565,2036,2037,2039,2041,2043],{},[1568,2038,1570],{},[1568,2040,1573],{},[1568,2042,1576],{},[1568,2044,1579],{},[1581,2046,2047,2065],{},[1565,2048,2049,2053,2058,2062],{},[1586,2050,2051],{},[616,2052,1590],{},[1586,2054,2055],{},[616,2056,2057],{},"\"default\" | \"added\" | \"removed\" | \"highlighted\"",[1586,2059,2060],{},[616,2061,1600],{},[1586,2063,2064],{},"The state of the line.",[1565,2066,2067,2071,2075,2077],{},[1586,2068,2069],{},[616,2070,1634],{},[1586,2072,2073],{},[616,2074,1639],{},[1586,2076,1642],{},[1586,2078,2079],{},"Additional classes to apply to the line.",[1073,2081,719],{"id":2082},"codeblocktoken",[613,2084,2085,2086,995,2088,2090,2091,2094],{},"One highlighted token from ",[616,2087,715],{},[616,2089,810],{},". It renders a ",[616,2092,2093],{},"span"," with the light and dark theme colors.",[1559,2096,2097,2109],{},[1562,2098,2099],{},[1565,2100,2101,2103,2105,2107],{},[1568,2102,1570],{},[1568,2104,1573],{},[1568,2106,1576],{},[1568,2108,1579],{},[1581,2110,2111],{},[1565,2112,2113,2118,2123,2125],{},[1586,2114,2115],{},[616,2116,2117],{},"token",[1586,2119,2120],{},[616,2121,2122],{},"HighlightedToken",[1586,2124,1642],{},[1586,2126,2127],{},"Required. The token.",[1073,2129,1054],{"id":2130},"codeblockfooter",[613,2132,2133],{},"A row below the content, such as for a Show More button.",[1559,2135,2136,2148],{},[1562,2137,2138],{},[1565,2139,2140,2142,2144,2146],{},[1568,2141,1570],{},[1568,2143,1573],{},[1568,2145,1576],{},[1568,2147,1579],{},[1581,2149,2150],{},[1565,2151,2152,2156,2160,2162],{},[1586,2153,2154],{},[616,2155,1634],{},[1586,2157,2158],{},[616,2159,1639],{},[1586,2161,1642],{},[1586,2163,2164],{},"Additional classes to apply to the footer.",[1073,2166,715],{"id":2167},"usehighlightedcode",[653,2169,2172],{"className":2170,"code":2171,"language":1256,"meta":659},[1254],"const lines = useHighlightedCode(code, language)\n",[616,2173,2171],{"__ignoreMap":659},[613,2175,2176,2177,2180],{},"Returns a ",[616,2178,2179],{},"ComputedRef\u003CHighlightedToken[][]>",", one list of tokens per line. It returns plain lines until the first pass finishes, and for a language that is not in the list.",[1559,2182,2183,2194],{},[1562,2184,2185],{},[1565,2186,2187,2190,2192],{},[1568,2188,2189],{},"Argument",[1568,2191,1573],{},[1568,2193,1579],{},[1581,2195,2196,2210],{},[1565,2197,2198,2202,2207],{},[1586,2199,2200],{},[616,2201,616],{},[1586,2203,2204],{},[616,2205,2206],{},"MaybeRefOrGetter\u003Cstring>",[1586,2208,2209],{},"The code to highlight. A trailing newline is ignored.",[1565,2211,2212,2216,2220],{},[1586,2213,2214],{},[616,2215,1443],{},[1586,2217,2218],{},[616,2219,2206],{},[1586,2221,2222,2223,2225,2226,623],{},"A language or alias from ",[616,2224,731],{},", or ",[616,2227,1340],{},[1073,2229,810],{"id":2230},"highlightcode",[653,2232,2235],{"className":2233,"code":2234,"language":1256,"meta":659},[1254],"const lines = await highlightCode(code, language)\n",[616,2236,2234],{"__ignoreMap":659},[613,2238,2239,2240,2243,2244,1385],{},"Returns ",[616,2241,2242],{},"Promise\u003CHighlightedToken[][] | null>",", one list of tokens per line, or ",[616,2245,1360],{},[1073,2247,1377],{"id":2248},"loadhighlighter",[653,2250,2253],{"className":2251,"code":2252,"language":1256,"meta":659},[1254],"const highlighter = await loadHighlighter(language)\n",[616,2254,2252],{"__ignoreMap":659},[613,2256,2257,2258,2260,2261,2264,2265,2268,2269,2272],{},"Loads a language and returns a highlighter for it, or ",[616,2259,1360],{}," for a language that is not in the list. ",[616,2262,2263],{},"highlighter.highlight(code, state?)"," returns ",[616,2266,2267],{},"{ lines, state }",". Pass ",[616,2270,2271],{},"state"," back to continue tokenizing where the code left off.",[1073,2274,2122],{"id":2275},"highlightedtoken",[653,2277,2280],{"className":2278,"code":2279,"language":1256,"meta":659},[1254],"interface HighlightedToken {\n  content: string\n  htmlStyle?: Record\u003Cstring, string>\n}\n",[616,2281,2279],{"__ignoreMap":659},{"title":659,"searchDepth":2283,"depth":2283,"links":2284},2,[2285,2286,2287,2288,2289,2290,2291,2292,2293,2294,2295,2296,2297,2298,2299,2303,2304,2305,2306,2307,2308,2309,2310,2317,2318],{"id":630,"depth":2283,"text":307},{"id":735,"depth":2283,"text":736},{"id":748,"depth":2283,"text":749},{"id":770,"depth":2283,"text":771},{"id":830,"depth":2283,"text":831},{"id":844,"depth":2283,"text":845},{"id":884,"depth":2283,"text":885},{"id":906,"depth":2283,"text":907},{"id":923,"depth":2283,"text":924},{"id":940,"depth":2283,"text":941},{"id":893,"depth":2283,"text":954},{"id":970,"depth":2283,"text":971},{"id":988,"depth":2283,"text":989},{"id":1016,"depth":2283,"text":1017},{"id":1048,"depth":2283,"text":1049,"children":2300},[2301],{"id":1075,"depth":2302,"text":1076},3,{"id":1086,"depth":2283,"text":1087},{"id":1109,"depth":2283,"text":1110},{"id":1123,"depth":2283,"text":298},{"id":1156,"depth":2283,"text":270},{"id":1175,"depth":2283,"text":170},{"id":820,"depth":2283,"text":580},{"id":1206,"depth":2283,"text":537},{"id":1221,"depth":2283,"text":1222,"children":2311},[2312,2313,2314,2315,2316],{"id":1264,"depth":2302,"text":1265},{"id":1333,"depth":2302,"text":1334},{"id":1351,"depth":2302,"text":1352},{"id":1394,"depth":2302,"text":1395},{"id":1301,"depth":2302,"text":1405},{"id":1474,"depth":2283,"text":1475},{"id":1550,"depth":2283,"text":1551,"children":2319},[2320,2321,2322,2323,2324,2325,2326,2327,2328,2329,2330,2331,2332],{"id":1554,"depth":2302,"text":618},{"id":1648,"depth":2302,"text":850},{"id":1685,"depth":2302,"text":854},{"id":1722,"depth":2302,"text":857},{"id":1762,"depth":2302,"text":861},{"id":1896,"depth":2302,"text":762},{"id":2027,"depth":2302,"text":766},{"id":2082,"depth":2302,"text":719},{"id":2130,"depth":2302,"text":1054},{"id":2167,"depth":2302,"text":715},{"id":2230,"depth":2302,"text":810},{"id":2248,"depth":2302,"text":1377},{"id":2275,"depth":2302,"text":2122},"Displays code, terminal output and diffs with an optional header, line numbers and a copy button.","md",null,{"component":84},"---\ntitle: Code Block\ndescription: Displays code, terminal output and diffs with an optional header, line numbers and a copy button.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: CodeBlockDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n`CodeBlock` displays code, terminal output, logs and diffs. It has a header with a title and actions, line numbers, wrapping, diff and highlighted lines, and a small size for tool output in a [Trace](\u002Fdocs\u002Fcomponents\u002Ftrace).\n\nSyntax highlighting is optional and lives in a separate composable, so a block that only shows plain output stays small.\n\n## Installation\n\n:::::code-tabs\n\n:::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n:::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx shadcn-vue@latest add code-block\n```\n\n::\n\n::::tabs-content{value=\"manual\"}\n  :::steps\n    ::step\n    Install the following dependencies:\n    ::\n\n    ```bash\n    npm install shiki\n    ```\n\n    ::step\n    Install the required shadcn-vue dependencies:\n    ::\n\n    ```bash\n    npx shadcn-vue@latest add button\n    ```\n\n    ::step\n    Copy and paste the [GitHub source code](https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fbases\u002Freka\u002Fui\u002Fcode-block) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  :::\n::::\n\n:::::\n\n`code-block` also includes `useHighlightedCode` and `CodeBlockToken` for [syntax highlighting](#syntax-highlighting). They live in `useHighlightedCode.ts` and `highlighter.ts` in the same folder.\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  CodeBlock,\n  CodeBlockActions,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFooter,\n  CodeBlockHeader,\n  CodeBlockLine,\n  CodeBlockTitle,\n} from '@\u002Fcomponents\u002Fui\u002Fcode-block'\n\nconst output = `$ pnpm add ai @ai-sdk\u002Fvue zod\nDone in 2.8s using pnpm v10.18.0`\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock>\n    \u003CCodeBlockHeader>\n      \u003CCodeBlockTitle>Terminal\u003C\u002FCodeBlockTitle>\n      \u003CCodeBlockActions>\n        \u003CCodeBlockCopyButton :value=\"output\" \u002F>\n      \u003C\u002FCodeBlockActions>\n    \u003C\u002FCodeBlockHeader>\n    \u003CCodeBlockContent>{{ output }}\u003C\u002FCodeBlockContent>\n  \u003C\u002FCodeBlock>\n\u003C\u002Ftemplate>\n```\n\n## Composition\n\n```text\nCodeBlock\n├── CodeBlockHeader\n│   ├── CodeBlockTitle\n│   └── CodeBlockActions\n│       └── CodeBlockCopyButton\n├── CodeBlockActions (floating, when there is no header)\n├── CodeBlockContent\n│   └── CodeBlockLine\n│       └── CodeBlockToken\n└── CodeBlockFooter\n```\n\n`CodeBlockContent` takes plain text or a list of `CodeBlockLine`. Use lines when you need line variants or highlighted tokens.\n\n## Features\n\n- **It streams cheaply.** Plain text in the slot renders as one text node, and the highlighter tokenizes only the new lines as code arrives.\n- **It copies cleanly.** Line numbers and diff markers are left out of a selection, and blank lines survive the copy.\n- **It reads left to right.** The content is always `dir=\"ltr\"`. The header follows the page direction.\n- **It highlights without WASM.** `useHighlightedCode` uses Shiki's JavaScript engine, loads each language on first use and renders ANSI colors in terminal output. On the server, `highlightCode` returns the tokens without a component.\n- **It fits where code shows up.** Use it in a message, a Markdown fence, a Trace line, Tabs, a Dialog or a `typeset` container.\n- **It scrolls by keyboard.** The content is focusable, and floating actions show on focus as well as on hover.\n\n## Basic\n\nPut plain text in `CodeBlockContent`. It renders as one text node, so it stays cheap while output streams.\n\n::component-preview\n---\nname: CodeBlockBasicDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Header\n\n`CodeBlockHeader` holds a `CodeBlockTitle` and `CodeBlockActions`. `CodeBlockCopyButton` copies its `value`.\n\n::component-preview\n---\nname: CodeBlockHeaderDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nA long title truncates. To link the title to a file, wrap `CodeBlockTitle` in an anchor.\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CCodeBlockHeader>\n    \u003Ca href=\"\u002Ffiles\u002Fchat.post.ts\">\n      \u003CCodeBlockTitle>server\u002Fapi\u002Fchat.post.ts\u003C\u002FCodeBlockTitle>\n    \u003C\u002Fa>\n  \u003C\u002FCodeBlockHeader>\n\u003C\u002Ftemplate>\n```\n\n## Actions\n\n`CodeBlockActions` holds any number of buttons. For a wrap toggle, keep the state yourself and pass it to `wrap`.\n\n::component-preview\n---\nname: CodeBlockActionsDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { WrapTextIcon } from '@lucide\u002Fvue'\nimport { useToggle } from '@vueuse\u002Fcore'\n\nconst [wrap, toggleWrap] = useToggle(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlockActions>\n    \u003CButton\n      variant=\"ghost\"\n      size=\"icon-xs\"\n      aria-label=\"Wrap lines\"\n      :aria-pressed=\"wrap\"\n      @click=\"toggleWrap()\"\n    >\n      \u003CWrapTextIcon \u002F>\n    \u003C\u002FButton>\n    \u003CCodeBlockCopyButton :value=\"output\" \u002F>\n  \u003C\u002FCodeBlockActions>\n  \u003CCodeBlockContent :wrap=\"wrap\">\n    {{ output }}\n  \u003C\u002FCodeBlockContent>\n\u003C\u002Ftemplate>\n```\n\n## Floating Actions\n\nWithout a header, put `CodeBlockActions` directly inside `CodeBlock`. The actions float at the top end and stay hidden until the block is hovered or focused. They always show on touch screens.\n\n::component-preview\n---\nname: CodeBlockFloatingActionsDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Line Numbers\n\nAdd `line-numbers` to `CodeBlockContent`. Plain text in the slot is split into lines, and the numbers are not copied with a selection.\n\n::component-preview\n---\nname: CodeBlockLineNumbersDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Start Line\n\nSet `start-line` to number lines from a given line, for a snippet from the middle of a file. The gutter grows to fit the widest number.\n\n::component-preview\n---\nname: CodeBlockStartLineDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Wrap\n\nLong lines scroll by default. Add `wrap` to wrap them, which suits tool output and error messages. To let the reader toggle it, see [Actions](#actions).\n\n::component-preview\n---\nname: CodeBlockWrapDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Highlighted Lines\n\nRender each line as a `CodeBlockLine` and set `variant=\"highlighted\"` on the lines to call out.\n\n::component-preview\n---\nname: CodeBlockHighlightedLinesDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Diff\n\nSet `variant=\"added\"` or `variant=\"removed\"` on a `CodeBlockLine`. Each one adds a `+` or `−` marker.\n\n::component-preview\n---\nname: CodeBlockDiffDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Height\n\nCap the height with a `max-h-*` class on `CodeBlockContent`. The content scrolls inside the block.\n\n::component-preview\n---\nname: CodeBlockHeightDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n`CodeBlockContent` fades its edges with [`scroll-fade`](\u002Fdocs\u002Futilities\u002Fscroll-fade) as it scrolls: left and right by default, top and bottom when it wraps. Add `scroll-fade-y` to a capped block that does not wrap.\n\n## Show More\n\n`CodeBlockFooter` is a slot below the content. For Show More, cap the content while it is collapsed and put a ghost `xs` `Button` in the footer.\n\n::component-preview\n---\nname: CodeBlockShowMoreDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { useToggle } from '@vueuse\u002Fcore'\nimport { useId } from 'vue'\n\nconst [expanded, toggleExpanded] = useToggle(false)\nconst id = useId()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlockContent\n    :id=\"id\"\n    :class=\"expanded ? undefined : 'max-h-64 overflow-y-hidden scroll-fade-y'\"\n  >\n    {{ code }}\n  \u003C\u002FCodeBlockContent>\n  \u003CCodeBlockFooter class=\"justify-center\">\n    \u003CButton\n      variant=\"ghost\"\n      size=\"xs\"\n      :aria-expanded=\"expanded\"\n      :aria-controls=\"id\"\n      @click=\"toggleExpanded()\"\n    >\n      {{ expanded ? 'Show less' : 'Show more' }}\n    \u003C\u002FButton>\n  \u003C\u002FCodeBlockFooter>\n\u003C\u002Ftemplate>\n```\n\n### Max Height\n\nTo keep a long block from taking over the page, raise the cap instead of removing it. The expanded content scrolls, and the edges fade as you scroll.\n\n::component-preview\n---\nname: CodeBlockShowMoreScrollDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Size\n\nUse `size=\"sm\"` for tool and [Trace](#trace) output. It has tighter padding and `text-xs` text.\n\n::component-preview\n---\nname: CodeBlockSizeDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Destructive\n\nUse `variant=\"destructive\"` for errors and failed output.\n\n::component-preview\n---\nname: CodeBlockDestructiveDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Trace\n\nPut a `CodeBlock` with `size=\"sm\"` in `TraceCollapsibleContent` for tool and terminal output. Add `wrap` and a `max-h-64` class to `CodeBlockContent` so long output wraps and scrolls inside the trace. The block sets its own text color, so `TraceCollapsibleContent` does not mute it.\n\n::component-preview\n---\nname: CodeBlockTraceDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Tabs\n\nShow several files with [Tabs](\u002Fdocs\u002Fcomponents\u002Ftabs), one `CodeBlock` in each `TabsContent`.\n\n::component-preview\n---\nname: CodeBlockTabsDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Message\n\nPut a `CodeBlock` between paragraphs inside a [Message](\u002Fdocs\u002Fcomponents\u002Fmessage).\n\n::component-preview\n---\nname: CodeBlockChatDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Typeset\n\nA `CodeBlock` inside a [`typeset`](\u002Fdocs\u002Ftypeset) container keeps its own styles and gets the same space above as a paragraph.\n\n::component-preview\n---\nname: CodeBlockTypesetDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## RTL\n\nTo enable RTL support in shadcn-vue, see the [RTL configuration guide](\u002Fdocs\u002Frtl). Code always reads left to right. The header follows the page direction.\n\n::component-preview\n---\nname: CodeBlockRTLDemo\nclass: style-nova\n---\n::\n\n## Syntax Highlighting\n\n`useHighlightedCode` highlights with [Shiki](https:\u002F\u002Fshiki.style) and returns a computed list of lines. Each line is a list of tokens, which you render with `CodeBlockToken` inside a `CodeBlockLine`.\n\n::component-preview\n---\nname: CodeBlockHighlightingDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  CodeBlock,\n  CodeBlockContent,\n  CodeBlockLine,\n  CodeBlockToken,\n  useHighlightedCode,\n} from '@\u002Fcomponents\u002Fui\u002Fcode-block'\n\nconst lines = useHighlightedCode(code, 'json')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock>\n    \u003CCodeBlockContent>\n      \u003CCodeBlockLine v-for=\"(line, index) in lines\" :key=\"index\">\n        \u003CCodeBlockToken v-for=\"(token, i) in line\" :key=\"i\" :token=\"token\" \u002F>\n      \u003C\u002FCodeBlockLine>\n    \u003C\u002FCodeBlockContent>\n  \u003C\u002FCodeBlock>\n\u003C\u002Ftemplate>\n```\n\nBoth arguments accept a plain value, a ref or a getter, so the lines update when the code or the language changes:\n\n```ts showLineNumbers\nconst props = defineProps\u003C{ code: string, language: string }>()\n\nconst lines = useHighlightedCode(() => props.code, () => props.language)\n```\n\nShiki uses its JavaScript regex engine, so there is no WASM to load.\n\n### Languages\n\nEach language loads the first time it is used. Edit the list in `highlighter.ts`. A language that is not in the list renders as plain text.\n\n::component-preview\n---\nname: CodeBlockLanguagesDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nThe list ships with `bash`, `css`, `diff`, `html`, `javascript`, `json`, `jsx`, `markdown`, `python`, `sql`, `tsx`, `typescript`, `vue` and `yaml`, plus aliases such as `ts`, `js`, `sh` and `yml`.\n\n### Terminal Output\n\nPass `\"ansi\"` as the language to render the colors in terminal output. Without it, escape codes show as text.\n\n::component-preview\n---\nname: CodeBlockAnsiDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nANSI colors do not carry from one line to the next.\n\n### Server Rendering\n\n`highlightCode` is async and returns the tokens of each line, or `null` for a language that is not in the list. Call it from a server route or with `useAsyncData` so the tokens are part of the server-rendered HTML.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  CodeBlock,\n  CodeBlockContent,\n  CodeBlockLine,\n  CodeBlockToken,\n  highlightCode,\n} from '@\u002Fcomponents\u002Fui\u002Fcode-block'\n\nconst props = defineProps\u003C{ code: string }>()\n\nconst { data: lines } = await useAsyncData(\n  `code-${props.code}`,\n  async () =>\n    (await highlightCode(props.code, 'ts'))\n    ?? props.code.split('\\n').map(line => (line ? [{ content: line }] : [])),\n)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock>\n    \u003CCodeBlockContent line-numbers>\n      \u003CCodeBlockLine v-for=\"(line, index) in lines\" :key=\"index\">\n        \u003CCodeBlockToken v-for=\"(token, i) in line\" :key=\"i\" :token=\"token\" \u002F>\n      \u003C\u002FCodeBlockLine>\n    \u003C\u002FCodeBlockContent>\n  \u003C\u002FCodeBlock>\n\u003C\u002Ftemplate>\n```\n\nTo highlight many snippets in a row, `loadHighlighter` loads a language once and returns a highlighter with a synchronous `highlight(code)` method. It returns `null` for a language that is not in the list.\n\n```ts showLineNumbers\nimport { loadHighlighter } from '@\u002Fcomponents\u002Fui\u002Fcode-block'\n\nconst highlighter = await loadHighlighter('ts')\nconst { lines } = highlighter?.highlight(code) ?? { lines: [] }\n```\n\n### Streaming\n\nWhile the code streams, the composable tokenizes only the new lines, starting where the last line left off. Lines that did not change keep the same tokens, so Vue skips them.\n\n::component-preview\n---\nname: CodeBlockStreamingDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n### Markdown\n\nRender the message with [Comark](https:\u002F\u002Fcomark.dev) (`@comark\u002Fvue`) and route fenced code to a `CodeBlock` with a custom `pre` component. Comark does not run components inside `pre`, so a `code` component only matches inline code, and inline code stays inline.\n\n::component-preview\n---\nname: CodeBlockMarkdownDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nThe `pre` component gets the fence's `language` as a prop. Declare a `__node` prop to receive the raw node, and read the code from it. Pass `streaming` while the message streams, so Comark closes unfinished syntax.\n\nComark closes an unfinished fence while streaming, but does not say so. The trailing fence is still open when the text has an odd number of lines that start with ` ``` `. Provide its code, and disable the copy button in the block that matches it.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Markdown } from '@comark\u002Fvue'\nimport { computed, provide } from 'vue'\nimport MarkdownCodeBlock from '.\u002FMarkdownCodeBlock.vue'\n\nconst props = defineProps\u003C{ text: string, streaming?: boolean }>()\n\n\u002F\u002F The code of the trailing fence while it is still open.\nconst openFence = computed(() => {\n  const lines = props.text.trim().split('\\n')\n  const fences = lines.flatMap((line, i) => (line.startsWith('```') ? [i] : []))\n  return props.streaming && fences.length % 2\n    ? lines.slice(fences.at(-1)! + 1).join('\\n')\n    : null\n})\n\nprovide('markdown-open-fence', openFence)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMarkdown\n    :value=\"text\"\n    :components=\"{ pre: MarkdownCodeBlock }\"\n    :streaming=\"streaming\"\n  \u002F>\n\u003C\u002Ftemplate>\n```\n\n```vue showLineNumbers title=\"MarkdownCodeBlock.vue\"\n\u003Cscript setup lang=\"ts\">\nimport type { ElementNode } from '@comark\u002Fvue'\nimport type { Ref } from 'vue'\nimport { computed, inject } from 'vue'\n\nconst props = defineProps\u003C{\n  language?: string\n  __node?: ElementNode \u002F\u002F ['pre', attrs, ['code', attrs, text]]\n}>()\n\nconst code = computed(() => {\n  const child = props.__node?.[2]\n  return Array.isArray(child) && typeof child[2] === 'string' ? child[2] : ''\n})\n\n\u002F\u002F True while the closing fence has not arrived yet.\nconst openFence = inject\u003CRef\u003Cstring | null>>('markdown-open-fence')\nconst incomplete = computed(() => openFence?.value?.trimEnd() === code.value.trimEnd())\n\nconst lines = useHighlightedCode(code, () => props.language ?? '')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCodeBlock>\n    \u003CCodeBlockHeader>\n      \u003CCodeBlockTitle>{{ language || 'text' }}\u003C\u002FCodeBlockTitle>\n      \u003CCodeBlockActions>\n        \u003CCodeBlockCopyButton :value=\"code\" :disabled=\"incomplete\" \u002F>\n      \u003C\u002FCodeBlockActions>\n    \u003C\u002FCodeBlockHeader>\n    \u003CCodeBlockContent>\n      \u003CCodeBlockLine v-for=\"(line, index) in lines\" :key=\"index\">\n        \u003CCodeBlockToken v-for=\"(token, i) in line\" :key=\"i\" :token=\"token\" \u002F>\n      \u003C\u002FCodeBlockLine>\n    \u003C\u002FCodeBlockContent>\n  \u003C\u002FCodeBlock>\n\u003C\u002Ftemplate>\n```\n\n## Accessibility\n\n- `CodeBlockContent` is a `pre` with a `code` element and always sets `dir=\"ltr\"`, so code reads left to right on an RTL page.\n- `CodeBlockContent` has `tabindex=\"0\"`, so keyboard users can focus it and scroll it. Pass `tabindex=\"-1\"` to remove the tab stop.\n- Floating actions show when focus is inside the block, not only on hover, so keyboard users can reach them.\n- Line numbers are hidden from screen readers.\n- Diff lines carry a `+` or `−` marker as well as a tint, so the change does not rely on color.\n- `CodeBlockCopyButton` is labelled \"Copy\", and a polite live region announces \"Copied\" after a successful copy.\n- Give a wrap toggle `aria-pressed` so its state is announced.\n- Give a Show More button `aria-expanded` and point `aria-controls` at the `id` of `CodeBlockContent`.\n\n## API Reference\n\n### CodeBlock\n\nThe surface that holds the header, the content and the footer.\n\n| Prop      | Type                         | Default     | Description                                                     |\n| --------- | ---------------------------- | ----------- | --------------------------------------------------------------- |\n| `variant` | `\"default\" \\| \"destructive\"` | `\"default\"` | The tone of the block.                                          |\n| `size`    | `\"default\" \\| \"sm\"`          | `\"default\"` | `\"sm\"` has tighter padding and `text-xs` code, for tool output. |\n| `class`   | `string`                     | -           | Additional classes to apply to the block.                       |\n\n### CodeBlockHeader\n\nA row above the content for a title and actions.\n\n| Prop    | Type     | Default | Description                                |\n| ------- | -------- | ------- | ------------------------------------------ |\n| `class` | `string` | -       | Additional classes to apply to the header. |\n\n### CodeBlockTitle\n\nA filename or a label, with an optional icon. It truncates.\n\n| Prop    | Type     | Default | Description                               |\n| ------- | -------- | ------- | ----------------------------------------- |\n| `class` | `string` | -       | Additional classes to apply to the title. |\n\n### CodeBlockActions\n\nHolds buttons at the end of the header. As a direct child of `CodeBlock`, it floats.\n\n| Prop    | Type     | Default | Description                                 |\n| ------- | -------- | ------- | ------------------------------------------- |\n| `class` | `string` | -       | Additional classes to apply to the actions. |\n\n### CodeBlockCopyButton\n\nA ghost icon button that copies `value` to the clipboard. It accepts the props of [`Button`](\u002Fdocs\u002Fcomponents\u002Fbutton).\n\n| Prop       | Type      | Default     | Description                                |\n| ---------- | --------- | ----------- | ------------------------------------------ |\n| `value`    | `string`  | -           | Required. The text to copy.                |\n| `variant`  | `string`  | `\"ghost\"`   | The variant of the button.                 |\n| `size`     | `string`  | `\"icon-xs\"` | The size of the button.                    |\n| `as`       | `string`  | `\"button\"`  | The element or component to render as.     |\n| `as-child` | `boolean` | `false`     | Render as the child element.               |\n| `class`    | `string`  | -           | Additional classes to apply to the button. |\n\n### CodeBlockContent\n\nThe `pre` that scrolls or wraps.\n\n| Prop           | Type      | Default | Description                                                     |\n| -------------- | --------- | ------- | --------------------------------------------------------------- |\n| default slot   | -         | -       | Plain text, or a list of `CodeBlockLine`.                       |\n| `wrap`         | `boolean` | `false` | Wrap long lines instead of scrolling.                           |\n| `line-numbers` | `boolean` | `false` | Number each line. Plain text in the slot is split into lines.   |\n| `start-line`   | `number`  | `1`     | The number of the first line, when `line-numbers` is set.       |\n| `tabindex`     | `number`  | `0`     | Makes the content focusable so it can be scrolled by keyboard.  |\n| `class`        | `string`  | -       | Additional classes to apply to the content, such as `max-h-72`. |\n\n### CodeBlockLine\n\nOne line of code.\n\n| Prop      | Type                                                 | Default     | Description                              |\n| --------- | ---------------------------------------------------- | ----------- | ---------------------------------------- |\n| `variant` | `\"default\" \\| \"added\" \\| \"removed\" \\| \"highlighted\"` | `\"default\"` | The state of the line.                   |\n| `class`   | `string`                                             | -           | Additional classes to apply to the line. |\n\n### CodeBlockToken\n\nOne highlighted token from `useHighlightedCode` or `highlightCode`. It renders a `span` with the light and dark theme colors.\n\n| Prop    | Type               | Default | Description            |\n| ------- | ------------------ | ------- | ---------------------- |\n| `token` | `HighlightedToken` | -       | Required. The token.   |\n\n### CodeBlockFooter\n\nA row below the content, such as for a Show More button.\n\n| Prop    | Type     | Default | Description                                |\n| ------- | -------- | ------- | ------------------------------------------ |\n| `class` | `string` | -       | Additional classes to apply to the footer. |\n\n### useHighlightedCode\n\n```ts\nconst lines = useHighlightedCode(code, language)\n```\n\nReturns a `ComputedRef\u003CHighlightedToken[][]>`, one list of tokens per line. It returns plain lines until the first pass finishes, and for a language that is not in the list.\n\n| Argument   | Type                          | Description                                                  |\n| ---------- | ----------------------------- | ------------------------------------------------------------ |\n| `code`     | `MaybeRefOrGetter\u003Cstring>`    | The code to highlight. A trailing newline is ignored.        |\n| `language` | `MaybeRefOrGetter\u003Cstring>`    | A language or alias from `highlighter.ts`, or `\"ansi\"`.      |\n\n### highlightCode\n\n```ts\nconst lines = await highlightCode(code, language)\n```\n\nReturns `Promise\u003CHighlightedToken[][] | null>`, one list of tokens per line, or `null` for a language that is not in the list.\n\n### loadHighlighter\n\n```ts\nconst highlighter = await loadHighlighter(language)\n```\n\nLoads a language and returns a highlighter for it, or `null` for a language that is not in the list. `highlighter.highlight(code, state?)` returns `{ lines, state }`. Pass `state` back to continue tokenizing where the code left off.\n\n### HighlightedToken\n\n```ts\ninterface HighlightedToken {\n  content: string\n  htmlStyle?: Record\u003Cstring, string>\n}\n```\n",{"title":81,"description":2333},"BBYrNV376DWymC6AhKrOZ7GCKIoKYD4Nuu0aq6p9TgY",[2341,2342],{"title":77,"path":78,"stem":79,"children":-1},{"title":86,"path":87,"stem":88,"children":-1},1792076481135]