[{"data":1,"prerenderedAt":1826},["ShallowReactive",2],{"navigation":3,"$fd9cvft0wf4ga":587,"\u002Fdocs\u002Fcomponents\u002Ftrace":600,"surround-\u002Fdocs\u002Fcomponents\u002Ftrace":1823},[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":298,"body":602,"description":1816,"extension":1817,"links":1818,"meta":1819,"navigation":84,"new":84,"path":299,"rawbody":1820,"seo":1821,"stem":300,"__hash__":1822},"content\u002Fdocs\u002Fcomponents\u002Ftrace.md",{"type":603,"value":604,"toc":1781},"minimark",[605,612,619,625,638,643,652,771,774,839,843,850,859,866,872,876,879,887,891,897,902,906,946,950,955,959,963,972,976,1027,1031,1042,1046,1049,1065,1069,1073,1086,1090,1096,1102,1106,1112,1116,1122,1125,1130,1134,1140,1143,1146,1150,1153,1161,1165,1168,1174,1178,1184,1187,1190,1194,1200,1204,1210,1214,1218,1224,1228,1231,1243,1247,1251,1254,1260,1264,1268,1272,1277,1339,1343,1347,1352,1388,1391,1394,1441,1444,1447,1478,1481,1484,1515,1518,1521,1552,1555,1562,1670,1673,1679,1710,1713,1716,1765],[606,607],"component-preview",{"className":608,"name":610,"previewClass":611},[609],"style-rhea","TraceDemo","h-auto",[613,614,615,618],"p",{},[616,617,298],"code",{}," is a list of lines. Each line has an icon, a title, and an optional description and status. A line can expand to show more detail, link to a page, or open a dialog or sheet.",[613,620,621,622,624],{},"Every line has the same shape, so reasoning, tool calls, sources and plans built from ",[616,623,298],{}," look and behave the same.",[613,626,627,628,630,631,634,635,637],{},"Use ",[616,629,298],{}," for the steps an agent takes, like calling a tool, running a subagent or editing a file. Use ",[632,633,170],"a",{"href":171}," for its reply, and ",[632,636,162],{"href":163}," for notes and dividers between turns.",[639,640,642],"h2",{"id":641},"built-with-trace","Built with Trace",[613,644,645,646,648,649,651],{},"Every pattern below is a composition of ",[616,647,298],{}," parts. See ",[632,650,351],{"href":352}," for examples and code.",[653,654,655,668],"table",{},[656,657,658],"thead",{},[659,660,661,665],"tr",{},[662,663,664],"th",{},"Pattern",[662,666,667],{},"Shows",[669,670,671,681,690,699,708,717,726,735,744,753,762],"tbody",{},[659,672,673,678],{},[674,675,676],"td",{},[632,677,356],{"href":357},[674,679,680],{},"A summary that expands into the steps behind it.",[659,682,683,687],{},[674,684,685],{},[632,686,391],{"href":392},[674,688,689],{},"The steps the agent plans to take, and how far it has got.",[659,691,692,696],{},[674,693,694],{},[632,695,399],{"href":400},[674,697,698],{},"The agent's todo list, split into what is left and what is done.",[659,700,701,705],{},[674,702,703],{},[632,704,403],{"href":404},[674,706,707],{},"The agent's thinking as it streams.",[659,709,710,714],{},[674,711,712],{},[632,713,407],{"href":408},[674,715,716],{},"The links the agent used for a reply.",[659,718,719,723],{},[674,720,721],{},[632,722,411],{"href":412},[674,724,725],{},"A failed tool call and its stack frames.",[659,727,728,732],{},[674,729,730],{},[632,731,415],{"href":416},[674,733,734],{},"A subagent run, with its tool calls and result.",[659,736,737,741],{},[674,738,739],{},[632,740,423],{"href":424},[674,742,743],{},"The steps the agent takes, as it takes them.",[659,745,746,750],{},[674,747,748],{},[632,749,427],{"href":428},[674,751,752],{},"A command the agent runs, with its output as it streams.",[659,754,755,759],{},[674,756,757],{},[632,758,431],{"href":432},[674,760,761],{},"A test run by the agent, with its suites and failures.",[659,763,764,768],{},[674,765,766],{},[632,767,435],{"href":436},[674,769,770],{},"A tool call the agent makes, from input to output.",[639,772,307],{"id":773},"installation",[775,776,777,792,805],"code-tabs",{},[778,779,780,786],"tabs-list",{},[781,782,784],"tabs-trigger",{"value":783},"cli",[613,785,529],{},[781,787,789],{"value":788},"manual",[613,790,791],{},"Manual",[793,794,795],"tabs-content",{"value":783},[796,797,803],"pre",{"className":798,"code":800,"language":801,"meta":802},[799],"language-bash","npx shadcn-vue@latest add trace\n","bash","",[616,804,800],{"__ignoreMap":802},[793,806,807],{"value":788},[808,809,810,816,822,834],"steps",{},[811,812,813],"step",{},[613,814,815],{},"Install the required shadcn-vue dependencies:",[796,817,820],{"className":818,"code":819,"language":801,"meta":802},[799],"npx shadcn-vue@latest add collapsible\n",[616,821,819],{"__ignoreMap":802},[811,823,824],{},[613,825,826,827,833],{},"Copy and paste the ",[632,828,832],{"href":829,"rel":830},"https:\u002F\u002Fgithub.com\u002Funovue\u002Fshadcn-vue\u002Ftree\u002Fdev\u002Fapps\u002Fv4\u002Fregistry\u002Fbases\u002Freka\u002Fui\u002Ftrace",[831],"nofollow","GitHub source code"," into your project.",[811,835,836],{},[613,837,838],{},"Update the import paths to match your project setup.",[639,840,842],{"id":841},"usage","Usage",[613,844,845,846,849],{},"Use a ",[616,847,848],{},"TraceLine"," for a single step:",[796,851,857],{"className":852,"code":854,"language":855,"meta":856},[853],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { SearchIcon } from '@lucide\u002Fvue'\nimport { Trace, TraceIcon, TraceLine, TraceTitle } from '@\u002Fcomponents\u002Fui\u002Ftrace'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTrace>\n    \u003CTraceLine>\n      \u003CTraceIcon>\n        \u003CSearchIcon \u002F>\n      \u003C\u002FTraceIcon>\n      \u003CTraceTitle>Searched for minimumReleaseAge\u003C\u002FTraceTitle>\n    \u003C\u002FTraceLine>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n","vue","showLineNumbers",[616,858,854],{"__ignoreMap":802},[613,860,861,862,865],{},"Wrap the line in a ",[616,863,864],{},"TraceCollapsible"," to show more detail when it expands:",[796,867,870],{"className":868,"code":869,"language":855,"meta":856},[853],"\u003Cscript setup lang=\"ts\">\nimport { TerminalIcon } from '@lucide\u002Fvue'\nimport {\n  Trace,\n  TraceCollapsible,\n  TraceCollapsibleContent,\n  TraceCollapsibleTrigger,\n  TraceIcon,\n  TraceLine,\n  TraceTitle,\n} from '@\u002Fcomponents\u002Fui\u002Ftrace'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTrace>\n    \u003CTraceCollapsible>\n      \u003CTraceCollapsibleTrigger>\n        \u003CTraceLine>\n          \u003CTraceIcon>\n            \u003CTerminalIcon \u002F>\n          \u003C\u002FTraceIcon>\n          \u003CTraceTitle>Ran node --version\u003C\u002FTraceTitle>\n        \u003C\u002FTraceLine>\n      \u003C\u002FTraceCollapsibleTrigger>\n      \u003CTraceCollapsibleContent>v24.18.0\u003C\u002FTraceCollapsibleContent>\n    \u003C\u002FTraceCollapsible>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n",[616,871,869],{"__ignoreMap":802},[639,873,875],{"id":874},"composition","Composition",[613,877,878],{},"Use the following composition to build a trace line:",[796,880,885],{"className":881,"code":883,"language":884,"meta":802},[882],"language-text","Trace\n└── TraceLine\n    ├── TraceIcon\n    ├── TraceTitle\n    ├── TraceDescription\n    └── TraceIcon\n","text",[616,886,883],{"__ignoreMap":802},[613,888,861,889,865],{},[616,890,864],{},[796,892,895],{"className":893,"code":894,"language":884,"meta":802},[882],"Trace\n└── TraceCollapsible\n    ├── TraceCollapsibleTrigger\n    │   └── TraceLine\n    └── TraceCollapsibleContent\n",[616,896,894],{"__ignoreMap":802},[613,898,899,901],{},[616,900,848],{}," is always the line. To make a line do something, wrap it in that thing's trigger.",[639,903,905],{"id":904},"features","Features",[907,908,909,913,916,930,933,936,939],"ul",{},[910,911,912],"li",{},"One row for reasoning, tool calls, sources, plans and tasks",[910,914,915],{},"Rows that expand, link out, or open a dialog, sheet, drawer or popover",[910,917,918,921,922,925,926,929],{},[616,919,920],{},"running",", ",[616,923,924],{},"error"," and ",[616,927,928],{},"pending"," states, with a shimmer while running",[910,931,932],{},"Nested rows, so a summary expands into steps and a step into its output",[910,934,935],{},"Works with reasoning, tool and source parts from the AI SDK",[910,937,938],{},"Keyboard and screen reader support from the trigger that wraps each row",[910,940,941,942,945],{},"Customizable styling through the ",[616,943,944],{},"class"," prop on every part",[639,947,949],{"id":948},"trace-line","Trace Line",[613,951,845,952,954],{},[616,953,848],{}," on its own for a step with no detail to show. It reads as plain text.",[606,956],{"className":957,"name":958,"previewClass":611},[609],"TraceStaticDemo",[639,960,962],{"id":961},"status","Status",[613,964,965,966,968,969,971],{},"Set ",[616,967,961],{}," on ",[616,970,848],{}," when a step is running, has failed or hasn't started yet.",[606,973],{"className":974,"name":975,"previewClass":611},[609],"TraceStatusDemo",[653,977,978,987],{},[656,979,980],{},[659,981,982,984],{},[662,983,962],{},[662,985,986],{},"Use for",[669,988,989,997,1007,1017],{},[659,990,991,994],{},[674,992,993],{},"none",[674,995,996],{},"Work that is done: \"Ran pnpm install\".",[659,998,999,1004],{},[674,1000,1001],{},[616,1002,1003],{},"\"error\"",[674,1005,1006],{},"Work that failed. Say so in the title: \"Failed to run pnpm lint\".",[659,1008,1009,1014],{},[674,1010,1011],{},[616,1012,1013],{},"\"running\"",[674,1015,1016],{},"Work in progress. Write the title in the present tense: \"Running pnpm build\".",[659,1018,1019,1024],{},[674,1020,1021],{},[616,1022,1023],{},"\"pending\"",[674,1025,1026],{},"Work that has not started, such as a plan step: \"Run pnpm test\".",[639,1028,1030],{"id":1029},"description","Description",[613,1032,1033,1034,1037,1038,1041],{},"Put secondary text such as a diff stat, a duration or a count in a ",[616,1035,1036],{},"TraceDescription"," after the ",[616,1039,1040],{},"TraceTitle",". It does not truncate.",[606,1043],{"className":1044,"name":1045,"previewClass":611},[609],"TraceDescriptionDemo",[639,1047,86],{"id":1048},"collapsible",[613,1050,861,1051,1053,1054,1056,1057,1060,1061,1064],{},[616,1052,864],{}," to show more detail when it expands. Put the ",[616,1055,848],{}," inside ",[616,1058,1059],{},"TraceCollapsibleTrigger"," and the detail in ",[616,1062,1063],{},"TraceCollapsibleContent",".",[606,1066],{"className":1067,"name":1068,"previewClass":611},[609],"TraceCollapsibleDemo",[639,1070,1072],{"id":1071},"open-state","Open State",[613,1074,1075,1076,968,1079,1081,1082,1085],{},"Rows start closed. Use ",[616,1077,1078],{},"default-open",[616,1080,864],{}," to start open, or ",[616,1083,1084],{},"v-model:open"," to control a row.",[606,1087],{"className":1088,"name":1089,"previewClass":611},[609],"TraceOpenDemo",[613,1091,1092,1093,1064],{},"To open a row while it streams and let the reader's click win, pass ",[616,1094,1095],{},"open ?? running",[796,1097,1100],{"className":1098,"code":1099,"language":855,"meta":856},[853],"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst props = defineProps\u003C{ text: string, running: boolean }>()\n\nconst open = ref\u003Cboolean>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTraceCollapsible\n    :open=\"open ?? props.running\"\n    @update:open=\"open = $event\"\n  >\n    \u003CTraceCollapsibleTrigger>\n      \u003CTraceLine :status=\"props.running ? 'running' : undefined\">\n        …\n      \u003C\u002FTraceLine>\n    \u003C\u002FTraceCollapsibleTrigger>\n    \u003CTraceCollapsibleContent>{{ props.text }}\u003C\u002FTraceCollapsibleContent>\n  \u003C\u002FTraceCollapsible>\n\u003C\u002Ftemplate>\n",[616,1101,1099],{"__ignoreMap":802},[639,1103,1105],{"id":1104},"link","Link",[613,1107,1108,1109,1111],{},"Wrap the ",[616,1110,848],{}," in an anchor. For a new tab, use an arrow-up-right icon and sr-only \"(opens in a new tab)\".",[606,1113],{"className":1114,"name":1115,"previewClass":611},[609],"TraceLinkDemo",[796,1117,1120],{"className":1118,"code":1119,"language":855,"meta":856},[853],"\u003Ctemplate>\n  \u003Ca href=\"https:\u002F\u002Fdocs.astro.build\" target=\"_blank\" rel=\"noreferrer\">\n    \u003CTraceLine>\n      \u003CTraceTitle>\n        Install Astro\n        \u003Cspan class=\"sr-only\"> (opens in a new tab)\u003C\u002Fspan>\n      \u003C\u002FTraceTitle>\n      \u003CTraceIcon>\n        \u003CArrowUpRightIcon \u002F>\n      \u003C\u002FTraceIcon>\n    \u003C\u002FTraceLine>\n  \u003C\u002Fa>\n\u003C\u002Ftemplate>\n",[616,1121,1119],{"__ignoreMap":802},[639,1123,110],{"id":1124},"dialog",[613,1126,1108,1127,1129],{},[616,1128,848],{}," in the dialog's trigger. The dialog owns its open state, Escape and focus return.",[606,1131],{"className":1132,"name":1133,"previewClass":611},[609],"TraceDialogDemo",[796,1135,1138],{"className":1136,"code":1137,"language":855,"meta":856},[853],"\u003Ctemplate>\n  \u003CDialog>\n    \u003CDialogTrigger as-child>\n      \u003Cbutton type=\"button\">\n        \u003CTraceLine>\n          \u003CTraceTitle>Searched the web for cache keys\u003C\u002FTraceTitle>\n          \u003CTraceIcon>\n            \u003CChevronRightIcon \u002F>\n          \u003C\u002FTraceIcon>\n        \u003C\u002FTraceLine>\n      \u003C\u002Fbutton>\n    \u003C\u002FDialogTrigger>\n    \u003CDialogContent>…\u003C\u002FDialogContent>\n  \u003C\u002FDialog>\n\u003C\u002Ftemplate>\n",[616,1139,1137],{"__ignoreMap":802},[639,1141,234],{"id":1142},"sheet",[613,1144,1145],{},"The same shape as the dialog. Drawer and Popover work the same way.",[606,1147],{"className":1148,"name":1149,"previewClass":611},[609],"TraceSheetDemo",[639,1151,1152],{"id":305},"Group",[613,1154,1155,1156,1158,1159,1064],{},"Put rows that sit next to each other in a ",[616,1157,298],{},". It also styles any trigger or link that wraps a ",[616,1160,848],{},[606,1162],{"className":1163,"name":1164,"previewClass":611},[609],"TraceGroupDemo",[639,1166,407],{"id":1167},"sources",[613,1169,1170,1171,1173],{},"A collapsible row whose detail is a ",[616,1172,298],{}," of link rows.",[606,1175],{"className":1176,"name":1177,"previewClass":611},[609],"TraceSourcesDemo",[613,1179,1180,1181,1183],{},"See ",[632,1182,407],{"href":408}," for more examples.",[639,1185,356],{"id":1186},"chain-of-thought",[613,1188,1189],{},"A chain of thought is a collapsible row with step rows inside. Set the parent's status and title from its children.",[606,1191],{"className":1192,"name":1193,"previewClass":611},[609],"TraceStepsDemo",[613,1195,1180,1196,925,1198,1183],{},[632,1197,356],{"href":357},[632,1199,423],{"href":424},[639,1201,1203],{"id":1202},"commit","Commit",[613,1205,1206,1207,1064],{},"A commit is a collapsible row with a line for each changed file. Say what changed in the title, Added, Edited or Deleted, and put the line counts in the description. Each file opens its diff in a ",[632,1208,234],{"href":1209},"#sheet",[606,1211],{"className":1212,"name":1213,"previewClass":611},[609],"TraceCommitDemo",[639,1215,1217],{"id":1216},"whole-turn","Whole Turn",[613,1219,1220,1221,1223],{},"Three levels: the turn, a summary, and the rows. Text between steps sits between two ",[616,1222,298],{}," lists.",[606,1225],{"className":1226,"name":1227,"previewClass":611},[609],"TraceTurnDemo",[639,1229,403],{"id":1230},"reasoning",[613,1232,1233,1234,1236,1237,1239,1240,1064],{},"Render a ",[616,1235,1230],{}," part from the AI SDK. The row is a ",[616,1238,848],{}," until the first text arrives. See ",[632,1241,1072],{"href":1242},"#open-state",[606,1244],{"className":1245,"name":1246,"previewClass":611},[609],"TraceThinkingDemo",[613,1248,1180,1249,1183],{},[632,1250,403],{"href":404},[639,1252,435],{"id":1253},"tool",[613,1255,1256,1257,1064],{},"Render tool parts from the AI SDK. Map the tool part as in ",[632,1258,435],{"href":1259},"\u002Fdocs\u002Fai-elements\u002Ftool#states",[606,1261],{"className":1262,"name":1263,"previewClass":611},[609],"TraceToolCallsDemo",[613,1265,1180,1266,1183],{},[632,1267,435],{"href":436},[639,1269,1271],{"id":1270},"accessibility","Accessibility",[613,1273,1274,1276],{},[616,1275,298],{}," adds no roles of its own. Each line gets its semantics from the element that wraps it.",[907,1278,1279,1289,1299,1308,1314,1317,1320,1326],{},[910,1280,1281,1282,1284,1285,1288],{},"A ",[616,1283,848],{}," on its own is a ",[616,1286,1287],{},"span",". It is read as text and is not a tab stop.",[910,1290,1291,1292,1294,1295,1298],{},"Wrap it in a ",[616,1293,1059],{}," and it becomes a button with ",[616,1296,1297],{},"aria-expanded",". Wrap it in a link, or in the trigger for a dialog or sheet, and it takes the keyboard and focus behavior of that element.",[910,1300,1301,1304,1305,1307],{},[616,1302,1303],{},"TraceIcon"," is hidden from assistive tech, so ",[616,1306,1040],{}," is the accessible name. Write it as a sentence that says what happened, like \"Edited Trace.vue\", not just \"Trace.vue\".",[910,1309,1310,1311,1064],{},"When a link opens a new tab, add \"(opens in a new tab)\" to the title with ",[616,1312,1313],{},"sr-only",[910,1315,1316],{},"Status is shown with color and motion, so put it in the title too. Write \"Running pnpm build\" while it runs and \"Failed to run pnpm build\" when it errors.",[910,1318,1319],{},"The shimmer on a running title stops when the reader prefers reduced motion. The title still says what is happening.",[910,1321,1322,1323,1325],{},"Inside a ",[632,1324,174],{"href":175},", each line is announced once when it is added.",[910,1327,1328,1330,1331,1334,1335,1338],{},[616,1329,1063],{}," mutes its text. If you put a block with a muted background inside it, give the block ",[616,1332,1333],{},"text-foreground"," so it keeps its contrast. ",[616,1336,1337],{},"CodeBlock"," sets its own text color.",[639,1340,1342],{"id":1341},"api-reference","API Reference",[1344,1345,298],"h3",{"id":1346},"trace",[613,1348,1349,1350,1064],{},"A list of rows. It also styles any trigger or link that wraps a ",[616,1351,848],{},[653,1353,1354,1369],{},[656,1355,1356],{},[659,1357,1358,1361,1364,1367],{},[662,1359,1360],{},"Prop",[662,1362,1363],{},"Type",[662,1365,1366],{},"Default",[662,1368,1030],{},[669,1370,1371],{},[659,1372,1373,1377,1382,1385],{},[674,1374,1375],{},[616,1376,944],{},[674,1378,1379],{},[616,1380,1381],{},"string",[674,1383,1384],{},"-",[674,1386,1387],{},"Additional classes to apply to the list.",[1344,1389,848],{"id":1390},"traceline",[613,1392,1393],{},"One line: an icon and a title. It is a span, so it is not a button or a tab stop. Wrap it in a trigger or a link to make it do something.",[653,1395,1396,1408],{},[656,1397,1398],{},[659,1399,1400,1402,1404,1406],{},[662,1401,1360],{},[662,1403,1363],{},[662,1405,1366],{},[662,1407,1030],{},[669,1409,1410,1426],{},[659,1411,1412,1416,1421,1423],{},[674,1413,1414],{},[616,1415,961],{},[674,1417,1418],{},[616,1419,1420],{},"\"running\" | \"error\" | \"pending\"",[674,1422,1384],{},[674,1424,1425],{},"The state of the work the line reports.",[659,1427,1428,1432,1436,1438],{},[674,1429,1430],{},[616,1431,944],{},[674,1433,1434],{},[616,1435,1381],{},[674,1437,1384],{},[674,1439,1440],{},"Additional classes to apply to the line.",[1344,1442,1303],{"id":1443},"traceicon",[613,1445,1446],{},"A decorative icon slot, hidden from assistive tech. Before the title it names the action; after it, it is the indicator.",[653,1448,1449,1461],{},[656,1450,1451],{},[659,1452,1453,1455,1457,1459],{},[662,1454,1360],{},[662,1456,1363],{},[662,1458,1366],{},[662,1460,1030],{},[669,1462,1463],{},[659,1464,1465,1469,1473,1475],{},[674,1466,1467],{},[616,1468,944],{},[674,1470,1471],{},[616,1472,1381],{},[674,1474,1384],{},[674,1476,1477],{},"Additional classes to apply to the icon slot.",[1344,1479,1040],{"id":1480},"tracetitle",[613,1482,1483],{},"One sentence on one line. It truncates and shimmers while the line is running.",[653,1485,1486,1498],{},[656,1487,1488],{},[659,1489,1490,1492,1494,1496],{},[662,1491,1360],{},[662,1493,1363],{},[662,1495,1366],{},[662,1497,1030],{},[669,1499,1500],{},[659,1501,1502,1506,1510,1512],{},[674,1503,1504],{},[616,1505,944],{},[674,1507,1508],{},[616,1509,1381],{},[674,1511,1384],{},[674,1513,1514],{},"Additional classes to apply to the title.",[1344,1516,1036],{"id":1517},"tracedescription",[613,1519,1520],{},"Secondary text after the title, such as a count or a duration. It does not truncate.",[653,1522,1523,1535],{},[656,1524,1525],{},[659,1526,1527,1529,1531,1533],{},[662,1528,1360],{},[662,1530,1363],{},[662,1532,1366],{},[662,1534,1030],{},[669,1536,1537],{},[659,1538,1539,1543,1547,1549],{},[674,1540,1541],{},[616,1542,944],{},[674,1544,1545],{},[616,1546,1381],{},[674,1548,1384],{},[674,1550,1551],{},"Additional classes to apply to the description.",[1344,1553,864],{"id":1554},"tracecollapsible",[613,1556,1557,1558,1064],{},"A row that expands. It accepts the props of ",[632,1559,1560],{"href":87},[616,1561,86],{},[653,1563,1564,1577],{},[656,1565,1566],{},[659,1567,1568,1571,1573,1575],{},[662,1569,1570],{},"Prop \u002F Event",[662,1572,1363],{},[662,1574,1366],{},[662,1576,1030],{},[669,1578,1579,1598,1616,1638,1655],{},[659,1580,1581,1586,1591,1593],{},[674,1582,1583],{},[616,1584,1585],{},"open",[674,1587,1588],{},[616,1589,1590],{},"boolean",[674,1592,1384],{},[674,1594,1595,1596,1064],{},"The controlled open state. Use with ",[616,1597,1084],{},[659,1599,1600,1604,1608,1613],{},[674,1601,1602],{},[616,1603,1078],{},[674,1605,1606],{},[616,1607,1590],{},[674,1609,1610],{},[616,1611,1612],{},"false",[674,1614,1615],{},"Whether the row starts open.",[659,1617,1618,1623,1627,1632],{},[674,1619,1620],{},[616,1621,1622],{},"unmount-on-hide",[674,1624,1625],{},[616,1626,1590],{},[674,1628,1629],{},[616,1630,1631],{},"true",[674,1633,1634,1635,1637],{},"Set to ",[616,1636,1612],{}," to keep the detail mounted while closed, so nested rows keep their open state.",[659,1639,1640,1645,1650,1652],{},[674,1641,1642],{},[616,1643,1644],{},"update:open",[674,1646,1647],{},[616,1648,1649],{},"(open: boolean) => void",[674,1651,1384],{},[674,1653,1654],{},"Emitted when the open state changes.",[659,1656,1657,1661,1665,1667],{},[674,1658,1659],{},[616,1660,944],{},[674,1662,1663],{},[616,1664,1381],{},[674,1666,1384],{},[674,1668,1669],{},"Additional classes to apply to the row.",[1344,1671,1059],{"id":1672},"tracecollapsibletrigger",[613,1674,1675,1676,1678],{},"The button that opens and closes the row. Put a ",[616,1677,848],{}," inside it. It adds a chevron after the line.",[653,1680,1681,1693],{},[656,1682,1683],{},[659,1684,1685,1687,1689,1691],{},[662,1686,1360],{},[662,1688,1363],{},[662,1690,1366],{},[662,1692,1030],{},[669,1694,1695],{},[659,1696,1697,1701,1705,1707],{},[674,1698,1699],{},[616,1700,944],{},[674,1702,1703],{},[616,1704,1381],{},[674,1706,1384],{},[674,1708,1709],{},"Additional classes to apply to the trigger.",[1344,1711,1063],{"id":1712},"tracecollapsiblecontent",[613,1714,1715],{},"The detail of a row that expands.",[653,1717,1718,1730],{},[656,1719,1720],{},[659,1721,1722,1724,1726,1728],{},[662,1723,1360],{},[662,1725,1363],{},[662,1727,1366],{},[662,1729,1030],{},[669,1731,1732,1750],{},[659,1733,1734,1739,1743,1747],{},[674,1735,1736],{},[616,1737,1738],{},"force-mount",[674,1740,1741],{},[616,1742,1590],{},[674,1744,1745],{},[616,1746,1612],{},[674,1748,1749],{},"Always render the content, for use with your own animation library.",[659,1751,1752,1756,1760,1762],{},[674,1753,1754],{},[616,1755,944],{},[674,1757,1758],{},[616,1759,1381],{},[674,1761,1384],{},[674,1763,1764],{},"Additional classes to apply to the content.",[1766,1767,1768],"callout",{},[613,1769,1770,1774,1775,1778,1779,1064],{},[1771,1772,1773],"strong",{},"Note:"," To keep the detail mounted while closed, so nested rows keep their\nopen state, set ",[616,1776,1777],{},":unmount-on-hide=\"false\""," on the parent ",[616,1780,864],{},{"title":802,"searchDepth":1782,"depth":1782,"links":1783},2,[1784,1785,1786,1787,1788,1789,1790,1791,1792,1793,1794,1795,1796,1797,1798,1799,1800,1801,1802,1803,1804,1805],{"id":641,"depth":1782,"text":642},{"id":773,"depth":1782,"text":307},{"id":841,"depth":1782,"text":842},{"id":874,"depth":1782,"text":875},{"id":904,"depth":1782,"text":905},{"id":948,"depth":1782,"text":949},{"id":961,"depth":1782,"text":962},{"id":1029,"depth":1782,"text":1030},{"id":1048,"depth":1782,"text":86},{"id":1071,"depth":1782,"text":1072},{"id":1104,"depth":1782,"text":1105},{"id":1124,"depth":1782,"text":110},{"id":1142,"depth":1782,"text":234},{"id":305,"depth":1782,"text":1152},{"id":1167,"depth":1782,"text":407},{"id":1186,"depth":1782,"text":356},{"id":1202,"depth":1782,"text":1203},{"id":1216,"depth":1782,"text":1217},{"id":1230,"depth":1782,"text":403},{"id":1253,"depth":1782,"text":435},{"id":1270,"depth":1782,"text":1271},{"id":1341,"depth":1782,"text":1342,"children":1806},[1807,1809,1810,1811,1812,1813,1814,1815],{"id":1346,"depth":1808,"text":298},3,{"id":1390,"depth":1808,"text":848},{"id":1443,"depth":1808,"text":1303},{"id":1480,"depth":1808,"text":1040},{"id":1517,"depth":1808,"text":1036},{"id":1554,"depth":1808,"text":864},{"id":1672,"depth":1808,"text":1059},{"id":1712,"depth":1808,"text":1063},"The building block for reasoning, tool calls, sources and more.","md",null,{"component":84},"---\ntitle: Trace\ndescription: The building block for reasoning, tool calls, sources and more.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: TraceDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n`Trace` is a list of lines. Each line has an icon, a title, and an optional description and status. A line can expand to show more detail, link to a page, or open a dialog or sheet.\n\nEvery line has the same shape, so reasoning, tool calls, sources and plans built from `Trace` look and behave the same.\n\nUse `Trace` for the steps an agent takes, like calling a tool, running a subagent or editing a file. Use [Message](\u002Fdocs\u002Fcomponents\u002Fmessage) for its reply, and [Marker](\u002Fdocs\u002Fcomponents\u002Fmarker) for notes and dividers between turns.\n\n## Built with Trace\n\nEvery pattern below is a composition of `Trace` parts. See [AI Elements](\u002Fdocs\u002Fai-elements) for examples and code.\n\n| Pattern                                                | Shows                                                            |\n| ------------------------------------------------------ | ---------------------------------------------------------------- |\n| [Chain of Thought](\u002Fdocs\u002Fai-elements\u002Fchain-of-thought) | A summary that expands into the steps behind it.                 |\n| [Plan](\u002Fdocs\u002Fai-elements\u002Fplan)                         | The steps the agent plans to take, and how far it has got.       |\n| [Queue](\u002Fdocs\u002Fai-elements\u002Fqueue)                       | The agent's todo list, split into what is left and what is done. |\n| [Reasoning](\u002Fdocs\u002Fai-elements\u002Freasoning)               | The agent's thinking as it streams.                              |\n| [Sources](\u002Fdocs\u002Fai-elements\u002Fsources)                   | The links the agent used for a reply.                            |\n| [Stack Trace](\u002Fdocs\u002Fai-elements\u002Fstack-trace)           | A failed tool call and its stack frames.                         |\n| [Subagent](\u002Fdocs\u002Fai-elements\u002Fsubagent)                 | A subagent run, with its tool calls and result.                  |\n| [Task](\u002Fdocs\u002Fai-elements\u002Ftask)                         | The steps the agent takes, as it takes them.                     |\n| [Terminal](\u002Fdocs\u002Fai-elements\u002Fterminal)                 | A command the agent runs, with its output as it streams.         |\n| [Test Results](\u002Fdocs\u002Fai-elements\u002Ftest-results)         | A test run by the agent, with its suites and failures.           |\n| [Tool](\u002Fdocs\u002Fai-elements\u002Ftool)                         | A tool call the agent makes, from input to output.               |\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 trace\n```\n\n::\n\n::::tabs-content{value=\"manual\"}\n  :::steps\n    ::step\n    Install the required shadcn-vue dependencies:\n    ::\n\n    ```bash\n    npx shadcn-vue@latest add collapsible\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\u002Ftrace) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  :::\n::::\n\n:::::\n\n## Usage\n\nUse a `TraceLine` for a single step:\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { SearchIcon } from '@lucide\u002Fvue'\nimport { Trace, TraceIcon, TraceLine, TraceTitle } from '@\u002Fcomponents\u002Fui\u002Ftrace'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTrace>\n    \u003CTraceLine>\n      \u003CTraceIcon>\n        \u003CSearchIcon \u002F>\n      \u003C\u002FTraceIcon>\n      \u003CTraceTitle>Searched for minimumReleaseAge\u003C\u002FTraceTitle>\n    \u003C\u002FTraceLine>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n```\n\nWrap the line in a `TraceCollapsible` to show more detail when it expands:\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { TerminalIcon } from '@lucide\u002Fvue'\nimport {\n  Trace,\n  TraceCollapsible,\n  TraceCollapsibleContent,\n  TraceCollapsibleTrigger,\n  TraceIcon,\n  TraceLine,\n  TraceTitle,\n} from '@\u002Fcomponents\u002Fui\u002Ftrace'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTrace>\n    \u003CTraceCollapsible>\n      \u003CTraceCollapsibleTrigger>\n        \u003CTraceLine>\n          \u003CTraceIcon>\n            \u003CTerminalIcon \u002F>\n          \u003C\u002FTraceIcon>\n          \u003CTraceTitle>Ran node --version\u003C\u002FTraceTitle>\n        \u003C\u002FTraceLine>\n      \u003C\u002FTraceCollapsibleTrigger>\n      \u003CTraceCollapsibleContent>v24.18.0\u003C\u002FTraceCollapsibleContent>\n    \u003C\u002FTraceCollapsible>\n  \u003C\u002FTrace>\n\u003C\u002Ftemplate>\n```\n\n## Composition\n\nUse the following composition to build a trace line:\n\n```text\nTrace\n└── TraceLine\n    ├── TraceIcon\n    ├── TraceTitle\n    ├── TraceDescription\n    └── TraceIcon\n```\n\nWrap the line in a `TraceCollapsible` to show more detail when it expands:\n\n```text\nTrace\n└── TraceCollapsible\n    ├── TraceCollapsibleTrigger\n    │   └── TraceLine\n    └── TraceCollapsibleContent\n```\n\n`TraceLine` is always the line. To make a line do something, wrap it in that thing's trigger.\n\n## Features\n\n- One row for reasoning, tool calls, sources, plans and tasks\n- Rows that expand, link out, or open a dialog, sheet, drawer or popover\n- `running`, `error` and `pending` states, with a shimmer while running\n- Nested rows, so a summary expands into steps and a step into its output\n- Works with reasoning, tool and source parts from the AI SDK\n- Keyboard and screen reader support from the trigger that wraps each row\n- Customizable styling through the `class` prop on every part\n\n## Trace Line\n\nUse a `TraceLine` on its own for a step with no detail to show. It reads as plain text.\n\n::component-preview\n---\nname: TraceStaticDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Status\n\nSet `status` on `TraceLine` when a step is running, has failed or hasn't started yet.\n\n::component-preview\n---\nname: TraceStatusDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n| Status      | Use for                                                                       |\n| ----------- | ----------------------------------------------------------------------------- |\n| none        | Work that is done: \"Ran pnpm install\".                                        |\n| `\"error\"`   | Work that failed. Say so in the title: \"Failed to run pnpm lint\".             |\n| `\"running\"` | Work in progress. Write the title in the present tense: \"Running pnpm build\". |\n| `\"pending\"` | Work that has not started, such as a plan step: \"Run pnpm test\".              |\n\n## Description\n\nPut secondary text such as a diff stat, a duration or a count in a `TraceDescription` after the `TraceTitle`. It does not truncate.\n\n::component-preview\n---\nname: TraceDescriptionDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Collapsible\n\nWrap the line in a `TraceCollapsible` to show more detail when it expands. Put the `TraceLine` inside `TraceCollapsibleTrigger` and the detail in `TraceCollapsibleContent`.\n\n::component-preview\n---\nname: TraceCollapsibleDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Open State\n\nRows start closed. Use `default-open` on `TraceCollapsible` to start open, or `v-model:open` to control a row.\n\n::component-preview\n---\nname: TraceOpenDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nTo open a row while it streams and let the reader's click win, pass `open ?? running`.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst props = defineProps\u003C{ text: string, running: boolean }>()\n\nconst open = ref\u003Cboolean>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTraceCollapsible\n    :open=\"open ?? props.running\"\n    @update:open=\"open = $event\"\n  >\n    \u003CTraceCollapsibleTrigger>\n      \u003CTraceLine :status=\"props.running ? 'running' : undefined\">\n        …\n      \u003C\u002FTraceLine>\n    \u003C\u002FTraceCollapsibleTrigger>\n    \u003CTraceCollapsibleContent>{{ props.text }}\u003C\u002FTraceCollapsibleContent>\n  \u003C\u002FTraceCollapsible>\n\u003C\u002Ftemplate>\n```\n\n## Link\n\nWrap the `TraceLine` in an anchor. For a new tab, use an arrow-up-right icon and sr-only \"(opens in a new tab)\".\n\n::component-preview\n---\nname: TraceLinkDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003Ca href=\"https:\u002F\u002Fdocs.astro.build\" target=\"_blank\" rel=\"noreferrer\">\n    \u003CTraceLine>\n      \u003CTraceTitle>\n        Install Astro\n        \u003Cspan class=\"sr-only\"> (opens in a new tab)\u003C\u002Fspan>\n      \u003C\u002FTraceTitle>\n      \u003CTraceIcon>\n        \u003CArrowUpRightIcon \u002F>\n      \u003C\u002FTraceIcon>\n    \u003C\u002FTraceLine>\n  \u003C\u002Fa>\n\u003C\u002Ftemplate>\n```\n\n## Dialog\n\nWrap the `TraceLine` in the dialog's trigger. The dialog owns its open state, Escape and focus return.\n\n::component-preview\n---\nname: TraceDialogDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CDialog>\n    \u003CDialogTrigger as-child>\n      \u003Cbutton type=\"button\">\n        \u003CTraceLine>\n          \u003CTraceTitle>Searched the web for cache keys\u003C\u002FTraceTitle>\n          \u003CTraceIcon>\n            \u003CChevronRightIcon \u002F>\n          \u003C\u002FTraceIcon>\n        \u003C\u002FTraceLine>\n      \u003C\u002Fbutton>\n    \u003C\u002FDialogTrigger>\n    \u003CDialogContent>…\u003C\u002FDialogContent>\n  \u003C\u002FDialog>\n\u003C\u002Ftemplate>\n```\n\n## Sheet\n\nThe same shape as the dialog. Drawer and Popover work the same way.\n\n::component-preview\n---\nname: TraceSheetDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Group\n\nPut rows that sit next to each other in a `Trace`. It also styles any trigger or link that wraps a `TraceLine`.\n\n::component-preview\n---\nname: TraceGroupDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Sources\n\nA collapsible row whose detail is a `Trace` of link rows.\n\n::component-preview\n---\nname: TraceSourcesDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nSee [Sources](\u002Fdocs\u002Fai-elements\u002Fsources) for more examples.\n\n## Chain of Thought\n\nA chain of thought is a collapsible row with step rows inside. Set the parent's status and title from its children.\n\n::component-preview\n---\nname: TraceStepsDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nSee [Chain of Thought](\u002Fdocs\u002Fai-elements\u002Fchain-of-thought) and [Task](\u002Fdocs\u002Fai-elements\u002Ftask) for more examples.\n\n## Commit\n\nA commit is a collapsible row with a line for each changed file. Say what changed in the title, Added, Edited or Deleted, and put the line counts in the description. Each file opens its diff in a [Sheet](#sheet).\n\n::component-preview\n---\nname: TraceCommitDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Whole Turn\n\nThree levels: the turn, a summary, and the rows. Text between steps sits between two `Trace` lists.\n\n::component-preview\n---\nname: TraceTurnDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\n## Reasoning\n\nRender a `reasoning` part from the AI SDK. The row is a `TraceLine` until the first text arrives. See [Open State](#open-state).\n\n::component-preview\n---\nname: TraceThinkingDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nSee [Reasoning](\u002Fdocs\u002Fai-elements\u002Freasoning) for more examples.\n\n## Tool\n\nRender tool parts from the AI SDK. Map the tool part as in [Tool](\u002Fdocs\u002Fai-elements\u002Ftool#states).\n\n::component-preview\n---\nname: TraceToolCallsDemo\nclass: style-rhea\npreviewClass: h-auto\n---\n::\n\nSee [Tool](\u002Fdocs\u002Fai-elements\u002Ftool) for more examples.\n\n## Accessibility\n\n`Trace` adds no roles of its own. Each line gets its semantics from the element that wraps it.\n\n- A `TraceLine` on its own is a `span`. It is read as text and is not a tab stop.\n- Wrap it in a `TraceCollapsibleTrigger` and it becomes a button with `aria-expanded`. Wrap it in a link, or in the trigger for a dialog or sheet, and it takes the keyboard and focus behavior of that element.\n- `TraceIcon` is hidden from assistive tech, so `TraceTitle` is the accessible name. Write it as a sentence that says what happened, like \"Edited Trace.vue\", not just \"Trace.vue\".\n- When a link opens a new tab, add \"(opens in a new tab)\" to the title with `sr-only`.\n- Status is shown with color and motion, so put it in the title too. Write \"Running pnpm build\" while it runs and \"Failed to run pnpm build\" when it errors.\n- The shimmer on a running title stops when the reader prefers reduced motion. The title still says what is happening.\n- Inside a [Message Scroller](\u002Fdocs\u002Fcomponents\u002Fmessage-scroller), each line is announced once when it is added.\n- `TraceCollapsibleContent` mutes its text. If you put a block with a muted background inside it, give the block `text-foreground` so it keeps its contrast. `CodeBlock` sets its own text color.\n\n## API Reference\n\n### Trace\n\nA list of rows. It also styles any trigger or link that wraps a `TraceLine`.\n\n| Prop    | Type     | Default | Description                              |\n| ------- | -------- | ------- | ---------------------------------------- |\n| `class` | `string` | -       | Additional classes to apply to the list. |\n\n### TraceLine\n\nOne line: an icon and a title. It is a span, so it is not a button or a tab stop. Wrap it in a trigger or a link to make it do something.\n\n| Prop     | Type                                | Default | Description                              |\n| -------- | ----------------------------------- | ------- | ---------------------------------------- |\n| `status` | `\"running\" \\| \"error\" \\| \"pending\"` | -       | The state of the work the line reports.  |\n| `class`  | `string`                            | -       | Additional classes to apply to the line. |\n\n### TraceIcon\n\nA decorative icon slot, hidden from assistive tech. Before the title it names the action; after it, it is the indicator.\n\n| Prop    | Type     | Default | Description                                   |\n| ------- | -------- | ------- | --------------------------------------------- |\n| `class` | `string` | -       | Additional classes to apply to the icon slot. |\n\n### TraceTitle\n\nOne sentence on one line. It truncates and shimmers while the line is running.\n\n| Prop    | Type     | Default | Description                               |\n| ------- | -------- | ------- | ----------------------------------------- |\n| `class` | `string` | -       | Additional classes to apply to the title. |\n\n### TraceDescription\n\nSecondary text after the title, such as a count or a duration. It does not truncate.\n\n| Prop    | Type     | Default | Description                                     |\n| ------- | -------- | ------- | ----------------------------------------------- |\n| `class` | `string` | -       | Additional classes to apply to the description. |\n\n### TraceCollapsible\n\nA row that expands. It accepts the props of [`Collapsible`](\u002Fdocs\u002Fcomponents\u002Fcollapsible).\n\n| Prop \u002F Event      | Type                      | Default | Description                                                                                    |\n| ----------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------------------- |\n| `open`            | `boolean`                 | -       | The controlled open state. Use with `v-model:open`.                                            |\n| `default-open`    | `boolean`                 | `false` | Whether the row starts open.                                                                   |\n| `unmount-on-hide` | `boolean`                 | `true`  | Set to `false` to keep the detail mounted while closed, so nested rows keep their open state. |\n| `update:open`     | `(open: boolean) => void` | -       | Emitted when the open state changes.                                                           |\n| `class`           | `string`                  | -       | Additional classes to apply to the row.                                                        |\n\n### TraceCollapsibleTrigger\n\nThe button that opens and closes the row. Put a `TraceLine` inside it. It adds a chevron after the line.\n\n| Prop    | Type     | Default | Description                                 |\n| ------- | -------- | ------- | ------------------------------------------- |\n| `class` | `string` | -       | Additional classes to apply to the trigger. |\n\n### TraceCollapsibleContent\n\nThe detail of a row that expands.\n\n| Prop          | Type      | Default | Description                                                          |\n| ------------- | --------- | ------- | -------------------------------------------------------------------- |\n| `force-mount` | `boolean` | `false` | Always render the content, for use with your own animation library. |\n| `class`       | `string`  | -       | Additional classes to apply to the content.                          |\n\n::callout\n  **Note:** To keep the detail mounted while closed, so nested rows keep their\n  open state, set `:unmount-on-hide=\"false\"` on the parent `TraceCollapsible`.\n::\n",{"title":298,"description":1816},"wEw1228QIKeHthtbZSynMx4JPljfY3nxeZzpJzGyAoI",[1824,1825],{"title":294,"path":295,"stem":296,"children":-1},{"title":302,"path":303,"stem":304,"children":-1},1792076486956]