[{"data":1,"prerenderedAt":4311},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-components-chat-message":682,"-docs-theme-components-chat-message-surround":4306},{"gettingStarted":4,"api":71,"theme":162},[5,36,51],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002Fgetting-started",[11,16,21,26,31],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002Fgetting-started\u002F01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002Fgetting-started\u002F02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","\u002Fdocs\u002Fgetting-started\u002Fguides","docs\u002Fgetting-started\u002F03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","\u002Fdocs\u002Fgetting-started\u002Fcomparisons","docs\u002Fgetting-started\u002F06.comparisons","i-lucide-file-diff",{"title":32,"path":33,"stem":34,"icon":35},"Licensing","\u002Fdocs\u002Fgetting-started\u002Flicensing","docs\u002Fgetting-started\u002F07.licensing","i-lucide-scale",{"title":37,"icon":7,"path":38,"stem":39,"children":40,"page":7},"Tooling","\u002Fdocs\u002Fgetting-started\u002Ftooling","docs\u002Fgetting-started\u002Ftooling",[41,46],{"title":42,"path":43,"stem":44,"icon":45},"CLI Reference","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fcli","docs\u002Fgetting-started\u002Ftooling\u002F01.cli","i-lucide-square-terminal",{"title":47,"path":48,"stem":49,"icon":50},"Utility Scanner","\u002Fdocs\u002Fgetting-started\u002Ftooling\u002Fscanner","docs\u002Fgetting-started\u002Ftooling\u002F02.scanner","i-lucide-view",{"title":52,"icon":7,"path":53,"stem":54,"children":55,"page":7},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002Fgetting-started\u002Fintegrations",[56,61,66],{"title":57,"path":58,"stem":59,"icon":60},"DTCG","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fdtcg","docs\u002Fgetting-started\u002Fintegrations\u002F01.dtcg","i-lucide-square-code",{"title":62,"path":63,"stem":64,"icon":65},"Figma Plugin","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffigma-plugin","docs\u002Fgetting-started\u002Fintegrations\u002F02.figma-plugin","i-simple-icons-figma",{"title":67,"path":68,"stem":69,"icon":70},"Storybook","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fstorybook","docs\u002Fgetting-started\u002Fintegrations\u002F03.storybook","i-simple-icons-storybook",[72],{"title":73,"path":74,"stem":75,"children":76,"icon":7},"API Reference","\u002Fdocs\u002Fapi","docs\u002Fapi\u002F00.index",[77,80,85,90,95,100,105,110,115,120,125,130,145,150,155,160],{"title":78,"path":74,"stem":75,"icon":79},"Overview","i-lucide-book-text",{"title":81,"path":82,"stem":83,"icon":84},"Instance","\u002Fdocs\u002Fapi\u002Finstance","docs\u002Fapi\u002F01.instance","i-lucide-cloud-lightning",{"title":86,"path":87,"stem":88,"icon":89},"Variables","\u002Fdocs\u002Fapi\u002Fvariables","docs\u002Fapi\u002F02.variables","i-lucide-variable",{"title":91,"path":92,"stem":93,"icon":94},"Selectors","\u002Fdocs\u002Fapi\u002Fselectors","docs\u002Fapi\u002F03.selectors","i-lucide-scan-text",{"title":96,"path":97,"stem":98,"icon":99},"At-Rules","\u002Fdocs\u002Fapi\u002Fat-rules","docs\u002Fapi\u002F04.at-rules","i-lucide-at-sign",{"title":101,"path":102,"stem":103,"icon":104},"Media Queries","\u002Fdocs\u002Fapi\u002Fmedia-queries","docs\u002Fapi\u002F05.media-queries","i-lucide-image-upscale",{"title":106,"path":107,"stem":108,"icon":109},"Keyframes","\u002Fdocs\u002Fapi\u002Fkeyframes","docs\u002Fapi\u002F06.keyframes","i-lucide-square-play",{"title":111,"path":112,"stem":113,"icon":114},"Interpolation","\u002Fdocs\u002Fapi\u002Finterpolation","docs\u002Fapi\u002F07.interpolation","i-lucide-wrap-text",{"title":116,"path":117,"stem":118,"icon":119},"Utilities","\u002Fdocs\u002Fapi\u002Futilities","docs\u002Fapi\u002F08.utilities","i-lucide-sparkles",{"title":121,"path":122,"stem":123,"icon":124},"Utility Modifiers","\u002Fdocs\u002Fapi\u002Futility-modifiers","docs\u002Fapi\u002F09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":126,"path":127,"stem":128,"icon":129},"Themes","\u002Fdocs\u002Fapi\u002Fthemes","docs\u002Fapi\u002F10.themes","i-lucide-paintbrush",{"title":131,"path":132,"stem":133,"children":134,"icon":144},"Recipes","\u002Fdocs\u002Fapi\u002Frecipes","docs\u002Fapi\u002F11.recipes\u002F00.index",[135,136,140],{"title":78,"path":132,"stem":133},{"title":137,"path":138,"stem":139},"Runtime","\u002Fdocs\u002Fapi\u002Frecipes\u002Fruntime","docs\u002Fapi\u002F11.recipes\u002F01.runtime",{"title":141,"path":142,"stem":143},"Output Format","\u002Fdocs\u002Fapi\u002Frecipes\u002Foutput-format","docs\u002Fapi\u002F11.recipes\u002F02.output-format","i-lucide-chef-hat",{"title":146,"path":147,"stem":148,"icon":149},"Composables","\u002Fdocs\u002Fapi\u002Fcomposables","docs\u002Fapi\u002F12.composables","i-lucide-component",{"title":151,"path":152,"stem":153,"icon":154},"Imports","\u002Fdocs\u002Fapi\u002Fimports","docs\u002Fapi\u002F13.imports","i-lucide-file-input",{"title":156,"path":157,"stem":158,"icon":159},"Merging","\u002Fdocs\u002Fapi\u002Fmerging","docs\u002Fapi\u002F13.merging","i-lucide-squares-intersect",{"title":151,"path":152,"stem":161,"icon":154},"docs\u002Fapi\u002F14.imports",[163,243,357,558,635],{"title":164,"path":165,"stem":166,"children":167,"icon":7},"Design Tokens","\u002Fdocs\u002Ftheme\u002Fdesign-tokens","docs\u002Ftheme\u002Fdesign-tokens\u002F00.index",[168,169,174,179,184,189,194,199,204,209,224,228,233,238],{"title":78,"path":165,"stem":166,"icon":79},{"title":170,"path":171,"stem":172,"icon":173},"Preset","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fpreset","docs\u002Ftheme\u002Fdesign-tokens\u002F01.preset","i-lucide-package",{"title":175,"path":176,"stem":177,"icon":178},"Border Radiuses","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborder-radiuses","docs\u002Ftheme\u002Fdesign-tokens\u002F02.border-radiuses","i-lucide-square-round-corner",{"title":180,"path":181,"stem":182,"icon":183},"Borders","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fborders","docs\u002Ftheme\u002Fdesign-tokens\u002F03.borders","i-lucide-square-dashed-top-solid",{"title":185,"path":186,"stem":187,"icon":188},"Box Shadows","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbox-shadows","docs\u002Ftheme\u002Fdesign-tokens\u002F04.box-shadows","i-lucide-layers-2",{"title":190,"path":191,"stem":192,"icon":193},"Breakpoints","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fbreakpoints","docs\u002Ftheme\u002Fdesign-tokens\u002F05.breakpoints","i-lucide-monitor-smartphone",{"title":195,"path":196,"stem":197,"icon":198},"Colors","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fcolors","docs\u002Ftheme\u002Fdesign-tokens\u002F06.colors","i-lucide-palette",{"title":200,"path":201,"stem":202,"icon":203},"Duration","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fduration","docs\u002Ftheme\u002Fdesign-tokens\u002F07.duration","i-lucide-timer",{"title":205,"path":206,"stem":207,"icon":208},"Easing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Feasing","docs\u002Ftheme\u002Fdesign-tokens\u002F08.easing","i-lucide-spline",{"title":210,"path":211,"stem":212,"children":213,"icon":104,"defaultOpen":223},"Fluid Design","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F01.index",[214,215,219],{"title":78,"path":211,"stem":212},{"title":216,"path":217,"stem":218},"Fluid Viewport","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Fviewport","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F02.viewport",{"title":220,"path":221,"stem":222},"Fluid Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ffluid-design\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F09.fluid-design\u002F03.typography",true,{"title":225,"path":226,"stem":227,"icon":35},"Scales","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fscales","docs\u002Ftheme\u002Fdesign-tokens\u002F10.scales",{"title":229,"path":230,"stem":231,"icon":232},"Spacing","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fspacing","docs\u002Ftheme\u002Fdesign-tokens\u002F11.spacing","i-lucide-move-horizontal",{"title":234,"path":235,"stem":236,"icon":237},"Typography","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Ftypography","docs\u002Ftheme\u002Fdesign-tokens\u002F12.typography","i-lucide-type",{"title":239,"path":240,"stem":241,"icon":242},"Z-Index","\u002Fdocs\u002Ftheme\u002Fdesign-tokens\u002Fz-index","docs\u002Ftheme\u002Fdesign-tokens\u002F13.z-index","i-lucide-layers",{"title":244,"path":245,"stem":246,"children":247,"icon":7},"Elements","\u002Fdocs\u002Ftheme\u002Felements","docs\u002Ftheme\u002Felements\u002F00.index",[248,249,252,259,281,301,313,329,341],{"title":78,"path":245,"stem":246,"icon":79},{"title":170,"path":250,"stem":251,"icon":173},"\u002Fdocs\u002Ftheme\u002Felements\u002Fpreset","docs\u002Ftheme\u002Felements\u002F01.preset",{"title":253,"icon":242,"defaultOpen":223,"page":7,"children":254},"Base",[255],{"title":256,"path":257,"stem":258,"icon":7},"Body","\u002Fdocs\u002Ftheme\u002Felements\u002Fbody","docs\u002Ftheme\u002Felements\u002F02.base\u002F00.body",{"title":234,"icon":237,"defaultOpen":223,"page":7,"children":260},[261,265,269,273,277],{"title":262,"path":263,"stem":264,"icon":7},"Headings","\u002Fdocs\u002Ftheme\u002Felements\u002Fheadings","docs\u002Ftheme\u002Felements\u002F03.typography\u002F01.headings",{"title":266,"path":267,"stem":268,"icon":7},"Paragraphs","\u002Fdocs\u002Ftheme\u002Felements\u002Fparagraphs","docs\u002Ftheme\u002Felements\u002F03.typography\u002F02.paragraphs",{"title":270,"path":271,"stem":272,"icon":7},"Links","\u002Fdocs\u002Ftheme\u002Felements\u002Flinks","docs\u002Ftheme\u002Felements\u002F03.typography\u002F03.links",{"title":274,"path":275,"stem":276,"icon":7},"Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Flists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F04.lists",{"title":278,"path":279,"stem":280,"icon":7},"Definition Lists","\u002Fdocs\u002Ftheme\u002Felements\u002Fdefinition-lists","docs\u002Ftheme\u002Felements\u002F03.typography\u002F05.definition-lists",{"title":282,"icon":283,"defaultOpen":223,"page":7,"children":284},"Inline Text","i-lucide-whole-word",[285,289,293,297],{"title":286,"path":287,"stem":288,"icon":7},"Abbreviation","\u002Fdocs\u002Ftheme\u002Felements\u002Fabbreviation","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F00.abbreviation",{"title":290,"path":291,"stem":292,"icon":7},"Code","\u002Fdocs\u002Ftheme\u002Felements\u002Fcode","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F01.code",{"title":294,"path":295,"stem":296,"icon":7},"Kbd","\u002Fdocs\u002Ftheme\u002Felements\u002Fkbd","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F02.kbd",{"title":298,"path":299,"stem":300,"icon":7},"Mark","\u002Fdocs\u002Ftheme\u002Felements\u002Fmark","docs\u002Ftheme\u002Felements\u002F04.inline-text\u002F03.mark",{"title":302,"icon":303,"defaultOpen":223,"page":7,"children":304},"Media & Embeds","i-lucide-image",[305,309],{"title":306,"path":307,"stem":308,"icon":7},"Image","\u002Fdocs\u002Ftheme\u002Felements\u002Fimage","docs\u002Ftheme\u002Felements\u002F05.media\u002F00.image",{"title":310,"path":311,"stem":312,"icon":7},"Iframe","\u002Fdocs\u002Ftheme\u002Felements\u002Fiframe","docs\u002Ftheme\u002Felements\u002F05.media\u002F01.iframe",{"title":314,"icon":315,"defaultOpen":223,"page":7,"children":316},"Forms & Tables","i-lucide-table",[317,321,325],{"title":318,"path":319,"stem":320,"icon":7},"Caption","\u002Fdocs\u002Ftheme\u002Felements\u002Fcaption","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F00.caption",{"title":322,"path":323,"stem":324,"icon":7},"Legend","\u002Fdocs\u002Ftheme\u002Felements\u002Flegend","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F01.legend",{"title":326,"path":327,"stem":328,"icon":7},"Output","\u002Fdocs\u002Ftheme\u002Felements\u002Foutput","docs\u002Ftheme\u002Felements\u002F06.forms-tables\u002F02.output",{"title":330,"icon":331,"defaultOpen":223,"page":7,"children":332},"Structure","i-lucide-separator-horizontal",[333,337],{"title":334,"path":335,"stem":336,"icon":7},"Address","\u002Fdocs\u002Ftheme\u002Felements\u002Faddress","docs\u002Ftheme\u002Felements\u002F07.structure\u002F00.address",{"title":338,"path":339,"stem":340,"icon":7},"Horizontal Rule","\u002Fdocs\u002Ftheme\u002Felements\u002Fhorizontal-rule","docs\u002Ftheme\u002Felements\u002F07.structure\u002F01.horizontal-rule",{"title":342,"icon":343,"defaultOpen":223,"page":7,"children":344},"States","i-lucide-mouse-pointer-click",[345,349,353],{"title":346,"path":347,"stem":348,"icon":7},"Focus","\u002Fdocs\u002Ftheme\u002Felements\u002Ffocus","docs\u002Ftheme\u002Felements\u002F08.states\u002F00.focus",{"title":350,"path":351,"stem":352,"icon":7},"Selection","\u002Fdocs\u002Ftheme\u002Felements\u002Fselection","docs\u002Ftheme\u002Felements\u002F08.states\u002F01.selection",{"title":354,"path":355,"stem":356,"icon":7},"Summary","\u002Fdocs\u002Ftheme\u002Felements\u002Fsummary","docs\u002Ftheme\u002Felements\u002F08.states\u002F02.summary",{"title":358,"path":359,"stem":360,"children":361,"icon":7},"Components","\u002Fdocs\u002Ftheme\u002Fcomponents","docs\u002Ftheme\u002Fcomponents\u002F00.index",[362,363,375,399,427,491,518,550],{"title":78,"path":359,"stem":360,"icon":79},{"title":364,"icon":365,"defaultOpen":223,"page":7,"children":366},"Actions","i-lucide-square-mouse-pointer",[367,371],{"title":368,"path":369,"stem":370,"icon":7},"Button","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbutton","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F00.button",{"title":372,"path":373,"stem":374,"icon":7},"Hamburger Menu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fhamburger-menu","docs\u002Ftheme\u002Fcomponents\u002F02.actions\u002F01.hamburger-menu",{"title":376,"icon":377,"defaultOpen":223,"page":7,"children":378},"Navigation","i-lucide-navigation",[379,383,387,391,395],{"title":380,"path":381,"stem":382,"icon":7},"Breadcrumb","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbreadcrumb","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F00.breadcrumb",{"title":384,"path":385,"stem":386,"icon":7},"Nav","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fnav","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F01.nav",{"title":388,"path":389,"stem":390,"icon":7},"Pagination","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpagination","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F02.pagination",{"title":392,"path":393,"stem":394,"icon":7},"Sidebar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fsidebar","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F03.sidebar",{"title":396,"path":397,"stem":398,"icon":7},"Tabs","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftabs","docs\u002Ftheme\u002Fcomponents\u002F03.navigation\u002F04.tabs",{"title":400,"icon":401,"defaultOpen":223,"page":7,"children":402},"Feedback","i-lucide-megaphone",[403,407,411,415,419,423],{"title":404,"path":405,"stem":406,"icon":7},"Badge","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fbadge","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F00.badge",{"title":408,"path":409,"stem":410,"icon":7},"Callout","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcallout","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F01.callout",{"title":412,"path":413,"stem":414,"icon":7},"Chip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchip","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F02.chip",{"title":416,"path":417,"stem":418,"icon":7},"Progress","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fprogress","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F03.progress",{"title":420,"path":421,"stem":422,"icon":7},"Skeleton","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fskeleton","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F04.skeleton",{"title":424,"path":425,"stem":426,"icon":7},"Spinner","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fspinner","docs\u002Ftheme\u002Fcomponents\u002F04.feedback\u002F05.spinner",{"title":428,"icon":429,"defaultOpen":223,"page":7,"children":430},"Forms","i-lucide-text-cursor-input",[431,435,439,443,447,451,455,459,463,467,471,475,479,483,487],{"title":432,"path":433,"stem":434,"icon":7},"Calendar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcalendar","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F00.calendar",{"title":436,"path":437,"stem":438,"icon":7},"Checkbox","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F01.checkbox",{"title":440,"path":441,"stem":442,"icon":7},"Checkbox Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcheckbox-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F02.checkbox-group",{"title":444,"path":445,"stem":446,"icon":7},"Color Picker","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcolor-picker","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F03.color-picker",{"title":448,"path":449,"stem":450,"icon":7},"Field Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ffield-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F04.field-group",{"title":452,"path":453,"stem":454,"icon":7},"Input","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Finput","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F05.input",{"title":456,"path":457,"stem":458,"icon":7},"OTP","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fotp","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F06.otp",{"title":460,"path":461,"stem":462,"icon":7},"Radio","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F07.radio",{"title":464,"path":465,"stem":466,"icon":7},"Radio Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fradio-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F08.radio-group",{"title":468,"path":469,"stem":470,"icon":7},"Select","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fselect","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F09.select",{"title":472,"path":473,"stem":474,"icon":7},"Slider","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fslider","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F10.slider",{"title":476,"path":477,"stem":478,"icon":7},"Switch","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fswitch","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F11.switch",{"title":480,"path":481,"stem":482,"icon":7},"Textarea","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftextarea","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F12.textarea",{"title":484,"path":485,"stem":486,"icon":7},"Toggle","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F13.toggle",{"title":488,"path":489,"stem":490,"icon":7},"Toggle Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftoggle-group","docs\u002Ftheme\u002Fcomponents\u002F05.forms\u002F14.toggle-group",{"title":492,"icon":242,"defaultOpen":223,"page":7,"children":493},"Overlays",[494,498,502,506,510,514],{"title":495,"path":496,"stem":497,"icon":7},"ContextMenu","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcontext-menu","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F00.context-menu",{"title":499,"path":500,"stem":501,"icon":7},"Drawer","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdrawer","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F01.drawer",{"title":503,"path":504,"stem":505,"icon":7},"Dropdown","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fdropdown","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F02.dropdown",{"title":507,"path":508,"stem":509,"icon":7},"Modal","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmodal","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F03.modal",{"title":511,"path":512,"stem":513,"icon":7},"Popover","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpopover","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F04.popover",{"title":515,"path":516,"stem":517,"icon":7},"Tooltip","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Ftooltip","docs\u002Ftheme\u002Fcomponents\u002F06.overlays\u002F05.tooltip",{"title":519,"icon":520,"defaultOpen":223,"page":7,"children":521},"Layout","i-lucide-layout",[522,526,530,534,538,542,546],{"title":523,"path":524,"stem":525,"icon":7},"Accordion","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Faccordion","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F00.accordion",{"title":527,"path":528,"stem":529,"icon":7},"Avatar","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F01.avatar",{"title":531,"path":532,"stem":533,"icon":7},"Avatar Group","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Favatar-group","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F02.avatar-group",{"title":535,"path":536,"stem":537,"icon":7},"Card","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fcard","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F03.card",{"title":539,"path":540,"stem":541,"icon":7},"Media","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fmedia","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F04.media",{"title":543,"path":544,"stem":545,"icon":7},"PageHero","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fpage-hero","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F05.page-hero",{"title":547,"path":548,"stem":549,"icon":7},"Placeholder","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fplaceholder","docs\u002Ftheme\u002Fcomponents\u002F07.layout\u002F06.placeholder",{"title":551,"icon":552,"defaultOpen":223,"page":7,"children":553},"AI Chat","i-lucide-message-circle",[554],{"title":555,"path":556,"stem":557,"icon":7},"ChatMessage","\u002Fdocs\u002Ftheme\u002Fcomponents\u002Fchat-message","docs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message",{"title":116,"path":559,"stem":560,"children":561,"icon":7},"\u002Fdocs\u002Ftheme\u002Futilities","docs\u002Ftheme\u002Futilities\u002F00.index",[562,563,567,572,577,581,584,588,593,598,602,605,610,613,618,622,627,632],{"title":78,"path":559,"stem":560,"icon":79},{"title":564,"path":565,"stem":566,"icon":173},"Presets","\u002Fdocs\u002Ftheme\u002Futilities\u002Fpreset","docs\u002Ftheme\u002Futilities\u002F01.preset",{"title":568,"path":569,"stem":570,"icon":571},"Accessibility","\u002Fdocs\u002Ftheme\u002Futilities\u002Faccessibility","docs\u002Ftheme\u002Futilities\u002F02.accessibility","i-lucide-accessibility",{"title":573,"path":574,"stem":575,"icon":576},"Animations","\u002Fdocs\u002Ftheme\u002Futilities\u002Fanimations","docs\u002Ftheme\u002Futilities\u002F03.animations","i-lucide-loader-circle",{"title":578,"path":579,"stem":580,"icon":303},"Backgrounds","\u002Fdocs\u002Ftheme\u002Futilities\u002Fbackgrounds","docs\u002Ftheme\u002Futilities\u002F04.backgrounds",{"title":180,"path":582,"stem":583,"icon":183},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fborders","docs\u002Ftheme\u002Futilities\u002F05.borders",{"title":585,"path":586,"stem":587,"icon":119},"Effects","\u002Fdocs\u002Ftheme\u002Futilities\u002Feffects","docs\u002Ftheme\u002Futilities\u002F06.effects",{"title":589,"path":590,"stem":591,"icon":592},"Filters","\u002Fdocs\u002Ftheme\u002Futilities\u002Ffilters","docs\u002Ftheme\u002Futilities\u002F07.filters","i-lucide-aperture",{"title":594,"path":595,"stem":596,"icon":597},"Flexbox & Grid","\u002Fdocs\u002Ftheme\u002Futilities\u002Fflexbox-grid","docs\u002Ftheme\u002Futilities\u002F08.flexbox-grid","i-lucide-layout-grid",{"title":599,"path":600,"stem":601,"icon":343},"Interactivity","\u002Fdocs\u002Ftheme\u002Futilities\u002Finteractivity","docs\u002Ftheme\u002Futilities\u002F09.interactivity",{"title":519,"path":603,"stem":604,"icon":520},"\u002Fdocs\u002Ftheme\u002Futilities\u002Flayout","docs\u002Ftheme\u002Futilities\u002F10.layout",{"title":606,"path":607,"stem":608,"icon":609},"Sizing","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsizing","docs\u002Ftheme\u002Futilities\u002F11.sizing","i-lucide-scaling",{"title":229,"path":611,"stem":612,"icon":232},"\u002Fdocs\u002Ftheme\u002Futilities\u002Fspacing","docs\u002Ftheme\u002Futilities\u002F12.spacing",{"title":614,"path":615,"stem":616,"icon":617},"SVG","\u002Fdocs\u002Ftheme\u002Futilities\u002Fsvg","docs\u002Ftheme\u002Futilities\u002F13.svg","i-lucide-pen-tool",{"title":619,"path":620,"stem":621,"icon":315},"Tables","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftables","docs\u002Ftheme\u002Futilities\u002F14.tables",{"title":623,"path":624,"stem":625,"icon":626},"Transforms","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransforms","docs\u002Ftheme\u002Futilities\u002F15.transforms","i-lucide-rotate-3d",{"title":628,"path":629,"stem":630,"icon":631},"Transitions","\u002Fdocs\u002Ftheme\u002Futilities\u002Ftransitions","docs\u002Ftheme\u002Futilities\u002F16.transitions","i-lucide-arrow-left-right",{"title":234,"path":633,"stem":634,"icon":237},"\u002Fdocs\u002Ftheme\u002Futilities\u002Ftypography","docs\u002Ftheme\u002Futilities\u002F17.typography",{"title":636,"path":637,"stem":638,"children":639,"icon":7},"Modifiers","\u002Fdocs\u002Ftheme\u002Fmodifiers","docs\u002Ftheme\u002Fmodifiers\u002F00.index",[640,641,644,648,653,657,662,667,672,677],{"title":78,"path":637,"stem":638,"icon":79},{"title":564,"path":642,"stem":643,"icon":173},"\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpreset","docs\u002Ftheme\u002Fmodifiers\u002F01.preset",{"title":645,"path":646,"stem":647,"icon":571},"ARIA State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Faria-state","docs\u002Ftheme\u002Fmodifiers\u002F02.aria-state",{"title":649,"path":650,"stem":651,"icon":652},"Directional","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fdirectional","docs\u002Ftheme\u002Fmodifiers\u002F03.directional","i-lucide-flip-horizontal",{"title":654,"path":655,"stem":656,"icon":429},"Form State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fform-state","docs\u002Ftheme\u002Fmodifiers\u002F04.form-state",{"title":658,"path":659,"stem":660,"icon":661},"Media & Preferences","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fmedia-preferences","docs\u002Ftheme\u002Fmodifiers\u002F05.media-preferences","i-lucide-sun-moon",{"title":663,"path":664,"stem":665,"icon":666},"Other State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fother-state","docs\u002Ftheme\u002Fmodifiers\u002F06.other-state","i-lucide-toggle-left",{"title":668,"path":669,"stem":670,"icon":671},"Pseudo-Elements","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-elements","docs\u002Ftheme\u002Fmodifiers\u002F07.pseudo-elements","i-lucide-box-select",{"title":673,"path":674,"stem":675,"icon":676},"Pseudo-State","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fpseudo-state","docs\u002Ftheme\u002Fmodifiers\u002F08.pseudo-state","i-lucide-pointer",{"title":678,"path":679,"stem":680,"icon":681},"Structural","\u002Fdocs\u002Ftheme\u002Fmodifiers\u002Fstructural","docs\u002Ftheme\u002Fmodifiers\u002F09.structural","i-lucide-list-ordered",{"id":683,"title":555,"body":684,"description":4300,"extension":1355,"links":4301,"meta":4302,"navigation":4303,"path":556,"seo":4304,"stem":557,"__hash__":4305},"docs_theme\u002Fdocs\u002Ftheme\u002Fcomponents\u002F08.ai-chat\u002F00.chat-message.md",{"type":685,"value":686,"toc":4267},"minimark",[687,691,721,728,732,735,791,795,2348,2351,2361,2366,2369,2374,2378,2445,2455,2459,2467,2470,2473,2476,2479,2482,2485,2488,2491,2494,2497,2503,2506,2509,2512,2515,2519,2528,2532,2536,2658,2669,2672,2679,2726,2729,2737,2741,2744,2822,2849,2991,3002,3005,3074,3078,3082,3085,3351,3355,3362,3531,3536,3539,3545,3551,3556,3677,3682,3773,3779,3788,3792,3864,3870,3878,3882,3954,3960,3965,3969,4041,4046,4050,4131,4135,4263],[688,689,78],"h2",{"id":690},"overview",[692,693,694,695,698,699,703,704,707,708,711,712,715,716,720],"p",{},"The ",[696,697,555],"strong",{}," is a chat-bubble container used to render a single turn in an AI chat transcript. It is composed of four recipe parts: ",[700,701,702],"code",{},"useChatMessageRecipe()"," for the side-aware root wrapper, ",[700,705,706],{},"useChatMessageAvatarRecipe()"," for the leading avatar slot, ",[700,709,710],{},"useChatMessageContentRecipe()"," for the bubble itself, and ",[700,713,714],{},"useChatMessageActionsRecipe()"," for the hover-revealed action row beneath the bubble. Each composable creates a fully configured ",[717,718,719],"a",{"href":132},"recipe"," with color, variant, and size options — plus compound variants on the content recipe that handle every color-variant combination automatically.",[692,722,723,724,727],{},"The ChatMessage recipes integrate directly with the default ",[717,725,726],{"href":171},"design tokens preset"," and generate type-safe utility classes at build time with zero runtime CSS.",[688,729,731],{"id":730},"why-use-the-chatmessage-recipe","Why use the ChatMessage recipe?",[692,733,734],{},"The ChatMessage recipe helps you:",[736,737,738,745,751,773,779,785],"ul",{},[739,740,741,744],"li",{},[696,742,743],{},"Ship faster with sensible defaults",": Get 3 colors, 5 visual styles, 3 sizes, and start\u002Fend side alignment out of the box with a single set of composable calls.",[739,746,747,750],{},[696,748,749],{},"Compose flexible chat layouts",": Four coordinated recipes (root, avatar, content, actions) share the same variant axes, so messages stay internally consistent as you mix user and assistant turns.",[739,752,753,756,757,760,761,764,765,768,769,772],{},[696,754,755],{},"Stay i18n-friendly",": The ",[700,758,759],{},"side"," axis uses logical ",[700,762,763],{},"start"," and ",[700,766,767],{},"end"," values that flip automatically under ",[700,770,771],{},"dir=\"rtl\"",", so right-to-left layouts work without extra code.",[739,774,775,778],{},[696,776,777],{},"Customize without forking",": Override base styles, default variants, or filter out options you don't need — all through the options API.",[739,780,781,784],{},[696,782,783],{},"Stay type-safe",": Full TypeScript support means your editor catches invalid color, variant, size, or side values at compile time.",[739,786,787,790],{},[696,788,789],{},"Integrate with your tokens",": Every value references the design tokens preset, so theme changes propagate automatically.",[688,792,794],{"id":793},"usage","Usage",[796,797,799,804,811,1145,1149,1167,2339,2343],"steps",{"level":798},"4",[800,801,803],"h4",{"id":802},"register-the-recipes","Register the recipes",[692,805,806,807,810],{},"Add the ChatMessage recipes to a local Styleframe instance. The global ",[700,808,809],{},"styleframe.config.ts"," provides design tokens and utilities, while the component-level file registers the recipes themselves:",[812,813,815,1038],"code-tree",{"default-value":814},"src\u002Fcomponents\u002Fchat-message.styleframe.ts",[816,817,822],"pre",{"className":818,"code":819,"filename":814,"language":820,"meta":821,"style":821},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'virtual:styleframe';\nimport {\n    useChatMessageRecipe,\n    useChatMessageAvatarRecipe,\n    useChatMessageContentRecipe,\n    useChatMessageActionsRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst chatMessage = useChatMessageRecipe(s);\nconst chatMessageAvatar = useChatMessageAvatarRecipe(s);\nconst chatMessageContent = useChatMessageContentRecipe(s);\nconst chatMessageActions = useChatMessageActionsRecipe(s);\n\nexport default s;\n","ts","",[700,823,824,860,868,877,885,893,901,918,924,945,950,968,985,1002,1019,1024],{"__ignoreMap":821},[825,826,829,833,837,841,844,847,850,854,857],"span",{"class":827,"line":828},"line",1,[825,830,832],{"class":831},"s7zQu","import",[825,834,836],{"class":835},"sMK4o"," {",[825,838,840],{"class":839},"sTEyZ"," styleframe",[825,842,843],{"class":835}," }",[825,845,846],{"class":831}," from",[825,848,849],{"class":835}," '",[825,851,853],{"class":852},"sfazB","virtual:styleframe",[825,855,856],{"class":835},"'",[825,858,859],{"class":835},";\n",[825,861,863,865],{"class":827,"line":862},2,[825,864,832],{"class":831},[825,866,867],{"class":835}," {\n",[825,869,871,874],{"class":827,"line":870},3,[825,872,873],{"class":839},"    useChatMessageRecipe",[825,875,876],{"class":835},",\n",[825,878,880,883],{"class":827,"line":879},4,[825,881,882],{"class":839},"    useChatMessageAvatarRecipe",[825,884,876],{"class":835},[825,886,888,891],{"class":827,"line":887},5,[825,889,890],{"class":839},"    useChatMessageContentRecipe",[825,892,876],{"class":835},[825,894,896,899],{"class":827,"line":895},6,[825,897,898],{"class":839},"    useChatMessageActionsRecipe",[825,900,876],{"class":835},[825,902,904,907,909,911,914,916],{"class":827,"line":903},7,[825,905,906],{"class":835},"}",[825,908,846],{"class":831},[825,910,849],{"class":835},[825,912,913],{"class":852},"@styleframe\u002Ftheme",[825,915,856],{"class":835},[825,917,859],{"class":835},[825,919,921],{"class":827,"line":920},8,[825,922,923],{"emptyLinePlaceholder":223},"\n",[825,925,927,931,934,937,940,943],{"class":827,"line":926},9,[825,928,930],{"class":929},"spNyl","const",[825,932,933],{"class":839}," s ",[825,935,936],{"class":835},"=",[825,938,840],{"class":939},"s2Zo4",[825,941,942],{"class":839},"()",[825,944,859],{"class":835},[825,946,948],{"class":827,"line":947},10,[825,949,923],{"emptyLinePlaceholder":223},[825,951,953,955,958,960,963,966],{"class":827,"line":952},11,[825,954,930],{"class":929},[825,956,957],{"class":839}," chatMessage ",[825,959,936],{"class":835},[825,961,962],{"class":939}," useChatMessageRecipe",[825,964,965],{"class":839},"(s)",[825,967,859],{"class":835},[825,969,971,973,976,978,981,983],{"class":827,"line":970},12,[825,972,930],{"class":929},[825,974,975],{"class":839}," chatMessageAvatar ",[825,977,936],{"class":835},[825,979,980],{"class":939}," useChatMessageAvatarRecipe",[825,982,965],{"class":839},[825,984,859],{"class":835},[825,986,988,990,993,995,998,1000],{"class":827,"line":987},13,[825,989,930],{"class":929},[825,991,992],{"class":839}," chatMessageContent ",[825,994,936],{"class":835},[825,996,997],{"class":939}," useChatMessageContentRecipe",[825,999,965],{"class":839},[825,1001,859],{"class":835},[825,1003,1005,1007,1010,1012,1015,1017],{"class":827,"line":1004},14,[825,1006,930],{"class":929},[825,1008,1009],{"class":839}," chatMessageActions ",[825,1011,936],{"class":835},[825,1013,1014],{"class":939}," useChatMessageActionsRecipe",[825,1016,965],{"class":839},[825,1018,859],{"class":835},[825,1020,1022],{"class":827,"line":1021},15,[825,1023,923],{"emptyLinePlaceholder":223},[825,1025,1027,1030,1033,1036],{"class":827,"line":1026},16,[825,1028,1029],{"class":831},"export",[825,1031,1032],{"class":831}," default",[825,1034,1035],{"class":839}," s",[825,1037,859],{"class":835},[816,1039,1041],{"className":818,"code":1040,"filename":809,"language":820,"meta":821,"style":821},"import { styleframe } from 'styleframe';\nimport { useDesignTokensPreset, useUtilitiesPreset } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nuseDesignTokensPreset(s);\nuseUtilitiesPreset(s);\n\nexport default s;\n",[700,1042,1043,1064,1091,1095,1109,1113,1122,1131,1135],{"__ignoreMap":821},[825,1044,1045,1047,1049,1051,1053,1055,1057,1060,1062],{"class":827,"line":828},[825,1046,832],{"class":831},[825,1048,836],{"class":835},[825,1050,840],{"class":839},[825,1052,843],{"class":835},[825,1054,846],{"class":831},[825,1056,849],{"class":835},[825,1058,1059],{"class":852},"styleframe",[825,1061,856],{"class":835},[825,1063,859],{"class":835},[825,1065,1066,1068,1070,1073,1076,1079,1081,1083,1085,1087,1089],{"class":827,"line":862},[825,1067,832],{"class":831},[825,1069,836],{"class":835},[825,1071,1072],{"class":839}," useDesignTokensPreset",[825,1074,1075],{"class":835},",",[825,1077,1078],{"class":839}," useUtilitiesPreset",[825,1080,843],{"class":835},[825,1082,846],{"class":831},[825,1084,849],{"class":835},[825,1086,913],{"class":852},[825,1088,856],{"class":835},[825,1090,859],{"class":835},[825,1092,1093],{"class":827,"line":870},[825,1094,923],{"emptyLinePlaceholder":223},[825,1096,1097,1099,1101,1103,1105,1107],{"class":827,"line":879},[825,1098,930],{"class":929},[825,1100,933],{"class":839},[825,1102,936],{"class":835},[825,1104,840],{"class":939},[825,1106,942],{"class":839},[825,1108,859],{"class":835},[825,1110,1111],{"class":827,"line":887},[825,1112,923],{"emptyLinePlaceholder":223},[825,1114,1115,1118,1120],{"class":827,"line":895},[825,1116,1117],{"class":939},"useDesignTokensPreset",[825,1119,965],{"class":839},[825,1121,859],{"class":835},[825,1123,1124,1127,1129],{"class":827,"line":903},[825,1125,1126],{"class":939},"useUtilitiesPreset",[825,1128,965],{"class":839},[825,1130,859],{"class":835},[825,1132,1133],{"class":827,"line":920},[825,1134,923],{"emptyLinePlaceholder":223},[825,1136,1137,1139,1141,1143],{"class":827,"line":926},[825,1138,1029],{"class":831},[825,1140,1032],{"class":831},[825,1142,1035],{"class":839},[825,1144,859],{"class":835},[800,1146,1148],{"id":1147},"build-the-component","Build the component",[692,1150,1151,1152,1155,1156,1155,1159,1162,1163,1166],{},"Import the ",[700,1153,1154],{},"chatMessage",", ",[700,1157,1158],{},"chatMessageAvatar",[700,1160,1161],{},"chatMessageContent",", and ",[700,1164,1165],{},"chatMessageActions"," runtime functions from the virtual module and pass variant props to compute class names:",[1168,1169,1170,1836],"tabs",{},[1171,1172,1175],"tabs-item",{"icon":1173,"label":1174},"i-devicon-react","React",[816,1176,1179],{"className":818,"code":1177,"filename":1178,"language":820,"meta":821,"style":821},"import {\n    chatMessage,\n    chatMessageAvatar,\n    chatMessageContent,\n    chatMessageActions,\n} from \"virtual:styleframe\";\n\ninterface ChatMessageProps {\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    side?: \"start\" | \"end\";\n    avatar?: React.ReactNode;\n    actions?: React.ReactNode;\n    children?: React.ReactNode;\n}\n\nexport function ChatMessage({\n    color = \"neutral\",\n    variant = \"subtle\",\n    size = \"md\",\n    side = \"start\",\n    avatar,\n    actions,\n    children,\n}: ChatMessageProps) {\n    return (\n        \u003Carticle className={chatMessage({ color, variant, size, side })}>\n            {avatar && (\n                \u003Cdiv className={chatMessageAvatar({ color, variant, size })}>\n                    {avatar}\n                \u003C\u002Fdiv>\n            )}\n            \u003Cdiv>\n                \u003Cdiv className={chatMessageContent({ color, variant, size })}>\n                    {children}\n                \u003C\u002Fdiv>\n                {actions && (\n                    \u003Cdiv className={chatMessageActions({ color, variant, size })}>\n                        {actions}\n                    \u003C\u002Fdiv>\n                )}\n            \u003C\u002Fdiv>\n        \u003C\u002Farticle>\n    );\n}\n","src\u002Fcomponents\u002FChatMessage.tsx",[700,1180,1181,1187,1194,1201,1208,1215,1231,1235,1246,1283,1335,1369,1392,1410,1425,1440,1445,1450,1464,1481,1496,1511,1526,1533,1540,1547,1560,1569,1610,1622,1651,1661,1672,1680,1690,1717,1727,1736,1747,1775,1785,1795,1803,1813,1823,1831],{"__ignoreMap":821},[825,1182,1183,1185],{"class":827,"line":828},[825,1184,832],{"class":831},[825,1186,867],{"class":835},[825,1188,1189,1192],{"class":827,"line":862},[825,1190,1191],{"class":839},"    chatMessage",[825,1193,876],{"class":835},[825,1195,1196,1199],{"class":827,"line":870},[825,1197,1198],{"class":839},"    chatMessageAvatar",[825,1200,876],{"class":835},[825,1202,1203,1206],{"class":827,"line":879},[825,1204,1205],{"class":839},"    chatMessageContent",[825,1207,876],{"class":835},[825,1209,1210,1213],{"class":827,"line":887},[825,1211,1212],{"class":839},"    chatMessageActions",[825,1214,876],{"class":835},[825,1216,1217,1219,1221,1224,1226,1229],{"class":827,"line":895},[825,1218,906],{"class":835},[825,1220,846],{"class":831},[825,1222,1223],{"class":835}," \"",[825,1225,853],{"class":852},[825,1227,1228],{"class":835},"\"",[825,1230,859],{"class":835},[825,1232,1233],{"class":827,"line":903},[825,1234,923],{"emptyLinePlaceholder":223},[825,1236,1237,1240,1244],{"class":827,"line":920},[825,1238,1239],{"class":929},"interface",[825,1241,1243],{"class":1242},"sBMFI"," ChatMessageProps",[825,1245,867],{"class":835},[825,1247,1248,1252,1255,1257,1260,1262,1265,1267,1270,1272,1274,1276,1279,1281],{"class":827,"line":926},[825,1249,1251],{"class":1250},"swJcz","    color",[825,1253,1254],{"class":835},"?:",[825,1256,1223],{"class":835},[825,1258,1259],{"class":852},"light",[825,1261,1228],{"class":835},[825,1263,1264],{"class":835}," |",[825,1266,1223],{"class":835},[825,1268,1269],{"class":852},"dark",[825,1271,1228],{"class":835},[825,1273,1264],{"class":835},[825,1275,1223],{"class":835},[825,1277,1278],{"class":852},"neutral",[825,1280,1228],{"class":835},[825,1282,859],{"class":835},[825,1284,1285,1288,1290,1292,1295,1297,1299,1301,1304,1306,1308,1310,1313,1315,1317,1319,1322,1324,1326,1328,1331,1333],{"class":827,"line":947},[825,1286,1287],{"class":1250},"    variant",[825,1289,1254],{"class":835},[825,1291,1223],{"class":835},[825,1293,1294],{"class":852},"solid",[825,1296,1228],{"class":835},[825,1298,1264],{"class":835},[825,1300,1223],{"class":835},[825,1302,1303],{"class":852},"outline",[825,1305,1228],{"class":835},[825,1307,1264],{"class":835},[825,1309,1223],{"class":835},[825,1311,1312],{"class":852},"soft",[825,1314,1228],{"class":835},[825,1316,1264],{"class":835},[825,1318,1223],{"class":835},[825,1320,1321],{"class":852},"subtle",[825,1323,1228],{"class":835},[825,1325,1264],{"class":835},[825,1327,1223],{"class":835},[825,1329,1330],{"class":852},"ghost",[825,1332,1228],{"class":835},[825,1334,859],{"class":835},[825,1336,1337,1340,1342,1344,1347,1349,1351,1353,1356,1358,1360,1362,1365,1367],{"class":827,"line":952},[825,1338,1339],{"class":1250},"    size",[825,1341,1254],{"class":835},[825,1343,1223],{"class":835},[825,1345,1346],{"class":852},"sm",[825,1348,1228],{"class":835},[825,1350,1264],{"class":835},[825,1352,1223],{"class":835},[825,1354,1355],{"class":852},"md",[825,1357,1228],{"class":835},[825,1359,1264],{"class":835},[825,1361,1223],{"class":835},[825,1363,1364],{"class":852},"lg",[825,1366,1228],{"class":835},[825,1368,859],{"class":835},[825,1370,1371,1374,1376,1378,1380,1382,1384,1386,1388,1390],{"class":827,"line":970},[825,1372,1373],{"class":1250},"    side",[825,1375,1254],{"class":835},[825,1377,1223],{"class":835},[825,1379,763],{"class":852},[825,1381,1228],{"class":835},[825,1383,1264],{"class":835},[825,1385,1223],{"class":835},[825,1387,767],{"class":852},[825,1389,1228],{"class":835},[825,1391,859],{"class":835},[825,1393,1394,1397,1399,1402,1405,1408],{"class":827,"line":987},[825,1395,1396],{"class":1250},"    avatar",[825,1398,1254],{"class":835},[825,1400,1401],{"class":1242}," React",[825,1403,1404],{"class":835},".",[825,1406,1407],{"class":1242},"ReactNode",[825,1409,859],{"class":835},[825,1411,1412,1415,1417,1419,1421,1423],{"class":827,"line":1004},[825,1413,1414],{"class":1250},"    actions",[825,1416,1254],{"class":835},[825,1418,1401],{"class":1242},[825,1420,1404],{"class":835},[825,1422,1407],{"class":1242},[825,1424,859],{"class":835},[825,1426,1427,1430,1432,1434,1436,1438],{"class":827,"line":1021},[825,1428,1429],{"class":1250},"    children",[825,1431,1254],{"class":835},[825,1433,1401],{"class":1242},[825,1435,1404],{"class":835},[825,1437,1407],{"class":1242},[825,1439,859],{"class":835},[825,1441,1442],{"class":827,"line":1026},[825,1443,1444],{"class":835},"}\n",[825,1446,1448],{"class":827,"line":1447},17,[825,1449,923],{"emptyLinePlaceholder":223},[825,1451,1453,1455,1458,1461],{"class":827,"line":1452},18,[825,1454,1029],{"class":831},[825,1456,1457],{"class":929}," function",[825,1459,1460],{"class":939}," ChatMessage",[825,1462,1463],{"class":835},"({\n",[825,1465,1467,1470,1473,1475,1477,1479],{"class":827,"line":1466},19,[825,1468,1251],{"class":1469},"sHdIc",[825,1471,1472],{"class":835}," =",[825,1474,1223],{"class":835},[825,1476,1278],{"class":852},[825,1478,1228],{"class":835},[825,1480,876],{"class":835},[825,1482,1484,1486,1488,1490,1492,1494],{"class":827,"line":1483},20,[825,1485,1287],{"class":1469},[825,1487,1472],{"class":835},[825,1489,1223],{"class":835},[825,1491,1321],{"class":852},[825,1493,1228],{"class":835},[825,1495,876],{"class":835},[825,1497,1499,1501,1503,1505,1507,1509],{"class":827,"line":1498},21,[825,1500,1339],{"class":1469},[825,1502,1472],{"class":835},[825,1504,1223],{"class":835},[825,1506,1355],{"class":852},[825,1508,1228],{"class":835},[825,1510,876],{"class":835},[825,1512,1514,1516,1518,1520,1522,1524],{"class":827,"line":1513},22,[825,1515,1373],{"class":1469},[825,1517,1472],{"class":835},[825,1519,1223],{"class":835},[825,1521,763],{"class":852},[825,1523,1228],{"class":835},[825,1525,876],{"class":835},[825,1527,1529,1531],{"class":827,"line":1528},23,[825,1530,1396],{"class":1469},[825,1532,876],{"class":835},[825,1534,1536,1538],{"class":827,"line":1535},24,[825,1537,1414],{"class":1469},[825,1539,876],{"class":835},[825,1541,1543,1545],{"class":827,"line":1542},25,[825,1544,1429],{"class":1469},[825,1546,876],{"class":835},[825,1548,1550,1553,1555,1558],{"class":827,"line":1549},26,[825,1551,1552],{"class":835},"}:",[825,1554,1243],{"class":1242},[825,1556,1557],{"class":835},")",[825,1559,867],{"class":835},[825,1561,1563,1566],{"class":827,"line":1562},27,[825,1564,1565],{"class":831},"    return",[825,1567,1568],{"class":1250}," (\n",[825,1570,1572,1575,1578,1581,1584,1586,1589,1592,1594,1597,1599,1602,1604,1607],{"class":827,"line":1571},28,[825,1573,1574],{"class":835},"        \u003C",[825,1576,1577],{"class":839},"article",[825,1579,1580],{"class":839}," className",[825,1582,1583],{"class":835},"={",[825,1585,1154],{"class":1250},[825,1587,1588],{"class":835},"({",[825,1590,1591],{"class":1469}," color",[825,1593,1075],{"class":835},[825,1595,1596],{"class":1469}," variant",[825,1598,1075],{"class":835},[825,1600,1601],{"class":1469}," size",[825,1603,1075],{"class":835},[825,1605,1606],{"class":1469}," side",[825,1608,1609],{"class":835}," })}>\n",[825,1611,1613,1616,1619],{"class":827,"line":1612},29,[825,1614,1615],{"class":835},"            {",[825,1617,1618],{"class":1469},"avatar",[825,1620,1621],{"class":1250}," && (\n",[825,1623,1625,1628,1631,1633,1635,1637,1639,1641,1643,1645,1647,1649],{"class":827,"line":1624},30,[825,1626,1627],{"class":1250},"                \u003C",[825,1629,1630],{"class":1469},"div",[825,1632,1580],{"class":1469},[825,1634,1583],{"class":835},[825,1636,1158],{"class":1250},[825,1638,1588],{"class":835},[825,1640,1591],{"class":1469},[825,1642,1075],{"class":835},[825,1644,1596],{"class":1469},[825,1646,1075],{"class":835},[825,1648,1601],{"class":1469},[825,1650,1609],{"class":835},[825,1652,1654,1657,1659],{"class":827,"line":1653},31,[825,1655,1656],{"class":835},"                    {",[825,1658,1618],{"class":1469},[825,1660,1444],{"class":835},[825,1662,1664,1667,1669],{"class":827,"line":1663},32,[825,1665,1666],{"class":1250},"                \u003C\u002F",[825,1668,1630],{"class":1469},[825,1670,1671],{"class":1250},">\n",[825,1673,1675,1678],{"class":827,"line":1674},33,[825,1676,1677],{"class":1250},"            )",[825,1679,1444],{"class":835},[825,1681,1683,1686,1688],{"class":827,"line":1682},34,[825,1684,1685],{"class":1250},"            \u003C",[825,1687,1630],{"class":1242},[825,1689,1671],{"class":1250},[825,1691,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711,1713,1715],{"class":827,"line":1692},35,[825,1694,1627],{"class":835},[825,1696,1630],{"class":839},[825,1698,1580],{"class":839},[825,1700,1583],{"class":835},[825,1702,1161],{"class":1250},[825,1704,1588],{"class":835},[825,1706,1591],{"class":1469},[825,1708,1075],{"class":835},[825,1710,1596],{"class":1469},[825,1712,1075],{"class":835},[825,1714,1601],{"class":1469},[825,1716,1609],{"class":835},[825,1718,1720,1722,1725],{"class":827,"line":1719},36,[825,1721,1656],{"class":835},[825,1723,1724],{"class":1469},"children",[825,1726,1444],{"class":835},[825,1728,1730,1732,1734],{"class":827,"line":1729},37,[825,1731,1666],{"class":835},[825,1733,1630],{"class":839},[825,1735,1671],{"class":835},[825,1737,1739,1742,1745],{"class":827,"line":1738},38,[825,1740,1741],{"class":835},"                {",[825,1743,1744],{"class":1469},"actions",[825,1746,1621],{"class":1250},[825,1748,1750,1753,1755,1757,1759,1761,1763,1765,1767,1769,1771,1773],{"class":827,"line":1749},39,[825,1751,1752],{"class":1250},"                    \u003C",[825,1754,1630],{"class":1469},[825,1756,1580],{"class":1469},[825,1758,1583],{"class":835},[825,1760,1165],{"class":1250},[825,1762,1588],{"class":835},[825,1764,1591],{"class":1469},[825,1766,1075],{"class":835},[825,1768,1596],{"class":1469},[825,1770,1075],{"class":835},[825,1772,1601],{"class":1469},[825,1774,1609],{"class":835},[825,1776,1778,1781,1783],{"class":827,"line":1777},40,[825,1779,1780],{"class":835},"                        {",[825,1782,1744],{"class":1469},[825,1784,1444],{"class":835},[825,1786,1788,1791,1793],{"class":827,"line":1787},41,[825,1789,1790],{"class":1250},"                    \u003C\u002F",[825,1792,1630],{"class":1469},[825,1794,1671],{"class":1250},[825,1796,1798,1801],{"class":827,"line":1797},42,[825,1799,1800],{"class":1250},"                )",[825,1802,1444],{"class":835},[825,1804,1806,1809,1811],{"class":827,"line":1805},43,[825,1807,1808],{"class":835},"            \u003C\u002F",[825,1810,1630],{"class":839},[825,1812,1671],{"class":835},[825,1814,1816,1819,1821],{"class":827,"line":1815},44,[825,1817,1818],{"class":835},"        \u003C\u002F",[825,1820,1577],{"class":839},[825,1822,1671],{"class":835},[825,1824,1826,1829],{"class":827,"line":1825},45,[825,1827,1828],{"class":1250},"    )",[825,1830,859],{"class":835},[825,1832,1834],{"class":827,"line":1833},46,[825,1835,1444],{"class":835},[1171,1837,1840],{"icon":1838,"label":1839},"i-devicon-vuejs","Vue",[816,1841,1846],{"className":1842,"code":1843,"filename":1844,"language":1845,"meta":821,"style":821},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport {\n    chatMessage,\n    chatMessageAvatar,\n    chatMessageContent,\n    chatMessageActions,\n} from \"virtual:styleframe\";\n\nconst {\n    color = \"neutral\",\n    variant = \"subtle\",\n    size = \"md\",\n    side = \"start\",\n} = defineProps\u003C{\n    color?: \"light\" | \"dark\" | \"neutral\";\n    variant?: \"solid\" | \"outline\" | \"soft\" | \"subtle\" | \"ghost\";\n    size?: \"sm\" | \"md\" | \"lg\";\n    side?: \"start\" | \"end\";\n}>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n    \u003Carticle :class=\"chatMessage({ color, variant, size, side })\">\n        \u003Cdiv :class=\"chatMessageAvatar({ color, variant, size })\">\n            \u003Cslot name=\"avatar\" \u002F>\n        \u003C\u002Fdiv>\n        \u003Cdiv>\n            \u003Cdiv :class=\"chatMessageContent({ color, variant, size })\">\n                \u003Cslot \u002F>\n            \u003C\u002Fdiv>\n            \u003Cdiv :class=\"chatMessageActions({ color, variant, size })\">\n                \u003Cslot name=\"actions\" \u002F>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n","src\u002Fcomponents\u002FChatMessage.vue","vue",[700,1847,1848,1872,1878,1884,1890,1896,1902,1916,1920,1926,1941,1956,1971,1986,1998,2028,2074,2104,2126,2135,2144,2148,2157,2178,2197,2218,2226,2234,2253,2261,2269,2288,2306,2314,2322,2331],{"__ignoreMap":821},[825,1849,1850,1853,1856,1859,1862,1864,1866,1868,1870],{"class":827,"line":828},[825,1851,1852],{"class":835},"\u003C",[825,1854,1855],{"class":1250},"script",[825,1857,1858],{"class":929}," setup",[825,1860,1861],{"class":929}," lang",[825,1863,936],{"class":835},[825,1865,1228],{"class":835},[825,1867,820],{"class":852},[825,1869,1228],{"class":835},[825,1871,1671],{"class":835},[825,1873,1874,1876],{"class":827,"line":862},[825,1875,832],{"class":831},[825,1877,867],{"class":835},[825,1879,1880,1882],{"class":827,"line":870},[825,1881,1191],{"class":839},[825,1883,876],{"class":835},[825,1885,1886,1888],{"class":827,"line":879},[825,1887,1198],{"class":839},[825,1889,876],{"class":835},[825,1891,1892,1894],{"class":827,"line":887},[825,1893,1205],{"class":839},[825,1895,876],{"class":835},[825,1897,1898,1900],{"class":827,"line":895},[825,1899,1212],{"class":839},[825,1901,876],{"class":835},[825,1903,1904,1906,1908,1910,1912,1914],{"class":827,"line":903},[825,1905,906],{"class":835},[825,1907,846],{"class":831},[825,1909,1223],{"class":835},[825,1911,853],{"class":852},[825,1913,1228],{"class":835},[825,1915,859],{"class":835},[825,1917,1918],{"class":827,"line":920},[825,1919,923],{"emptyLinePlaceholder":223},[825,1921,1922,1924],{"class":827,"line":926},[825,1923,930],{"class":929},[825,1925,867],{"class":835},[825,1927,1928,1931,1933,1935,1937,1939],{"class":827,"line":947},[825,1929,1930],{"class":839},"    color ",[825,1932,936],{"class":835},[825,1934,1223],{"class":835},[825,1936,1278],{"class":852},[825,1938,1228],{"class":835},[825,1940,876],{"class":835},[825,1942,1943,1946,1948,1950,1952,1954],{"class":827,"line":952},[825,1944,1945],{"class":839},"    variant ",[825,1947,936],{"class":835},[825,1949,1223],{"class":835},[825,1951,1321],{"class":852},[825,1953,1228],{"class":835},[825,1955,876],{"class":835},[825,1957,1958,1961,1963,1965,1967,1969],{"class":827,"line":970},[825,1959,1960],{"class":839},"    size ",[825,1962,936],{"class":835},[825,1964,1223],{"class":835},[825,1966,1355],{"class":852},[825,1968,1228],{"class":835},[825,1970,876],{"class":835},[825,1972,1973,1976,1978,1980,1982,1984],{"class":827,"line":987},[825,1974,1975],{"class":839},"    side ",[825,1977,936],{"class":835},[825,1979,1223],{"class":835},[825,1981,763],{"class":852},[825,1983,1228],{"class":835},[825,1985,876],{"class":835},[825,1987,1988,1990,1992,1995],{"class":827,"line":1004},[825,1989,906],{"class":835},[825,1991,1472],{"class":835},[825,1993,1994],{"class":939}," defineProps",[825,1996,1997],{"class":835},"\u003C{\n",[825,1999,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2024,2026],{"class":827,"line":1021},[825,2001,1251],{"class":1250},[825,2003,1254],{"class":835},[825,2005,1223],{"class":835},[825,2007,1259],{"class":852},[825,2009,1228],{"class":835},[825,2011,1264],{"class":835},[825,2013,1223],{"class":835},[825,2015,1269],{"class":852},[825,2017,1228],{"class":835},[825,2019,1264],{"class":835},[825,2021,1223],{"class":835},[825,2023,1278],{"class":852},[825,2025,1228],{"class":835},[825,2027,859],{"class":835},[825,2029,2030,2032,2034,2036,2038,2040,2042,2044,2046,2048,2050,2052,2054,2056,2058,2060,2062,2064,2066,2068,2070,2072],{"class":827,"line":1026},[825,2031,1287],{"class":1250},[825,2033,1254],{"class":835},[825,2035,1223],{"class":835},[825,2037,1294],{"class":852},[825,2039,1228],{"class":835},[825,2041,1264],{"class":835},[825,2043,1223],{"class":835},[825,2045,1303],{"class":852},[825,2047,1228],{"class":835},[825,2049,1264],{"class":835},[825,2051,1223],{"class":835},[825,2053,1312],{"class":852},[825,2055,1228],{"class":835},[825,2057,1264],{"class":835},[825,2059,1223],{"class":835},[825,2061,1321],{"class":852},[825,2063,1228],{"class":835},[825,2065,1264],{"class":835},[825,2067,1223],{"class":835},[825,2069,1330],{"class":852},[825,2071,1228],{"class":835},[825,2073,859],{"class":835},[825,2075,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102],{"class":827,"line":1447},[825,2077,1339],{"class":1250},[825,2079,1254],{"class":835},[825,2081,1223],{"class":835},[825,2083,1346],{"class":852},[825,2085,1228],{"class":835},[825,2087,1264],{"class":835},[825,2089,1223],{"class":835},[825,2091,1355],{"class":852},[825,2093,1228],{"class":835},[825,2095,1264],{"class":835},[825,2097,1223],{"class":835},[825,2099,1364],{"class":852},[825,2101,1228],{"class":835},[825,2103,859],{"class":835},[825,2105,2106,2108,2110,2112,2114,2116,2118,2120,2122,2124],{"class":827,"line":1452},[825,2107,1373],{"class":1250},[825,2109,1254],{"class":835},[825,2111,1223],{"class":835},[825,2113,763],{"class":852},[825,2115,1228],{"class":835},[825,2117,1264],{"class":835},[825,2119,1223],{"class":835},[825,2121,767],{"class":852},[825,2123,1228],{"class":835},[825,2125,859],{"class":835},[825,2127,2128,2131,2133],{"class":827,"line":1466},[825,2129,2130],{"class":835},"}>",[825,2132,942],{"class":839},[825,2134,859],{"class":835},[825,2136,2137,2140,2142],{"class":827,"line":1483},[825,2138,2139],{"class":835},"\u003C\u002F",[825,2141,1855],{"class":1250},[825,2143,1671],{"class":835},[825,2145,2146],{"class":827,"line":1498},[825,2147,923],{"emptyLinePlaceholder":223},[825,2149,2150,2152,2155],{"class":827,"line":1513},[825,2151,1852],{"class":835},[825,2153,2154],{"class":1250},"template",[825,2156,1671],{"class":835},[825,2158,2159,2162,2164,2167,2169,2171,2174,2176],{"class":827,"line":1528},[825,2160,2161],{"class":835},"    \u003C",[825,2163,1577],{"class":1250},[825,2165,2166],{"class":929}," :class",[825,2168,936],{"class":835},[825,2170,1228],{"class":835},[825,2172,2173],{"class":852},"chatMessage({ color, variant, size, side })",[825,2175,1228],{"class":835},[825,2177,1671],{"class":835},[825,2179,2180,2182,2184,2186,2188,2190,2193,2195],{"class":827,"line":1535},[825,2181,1574],{"class":835},[825,2183,1630],{"class":1250},[825,2185,2166],{"class":929},[825,2187,936],{"class":835},[825,2189,1228],{"class":835},[825,2191,2192],{"class":852},"chatMessageAvatar({ color, variant, size })",[825,2194,1228],{"class":835},[825,2196,1671],{"class":835},[825,2198,2199,2201,2204,2207,2209,2211,2213,2215],{"class":827,"line":1542},[825,2200,1685],{"class":835},[825,2202,2203],{"class":1250},"slot",[825,2205,2206],{"class":929}," name",[825,2208,936],{"class":835},[825,2210,1228],{"class":835},[825,2212,1618],{"class":852},[825,2214,1228],{"class":835},[825,2216,2217],{"class":835}," \u002F>\n",[825,2219,2220,2222,2224],{"class":827,"line":1549},[825,2221,1818],{"class":835},[825,2223,1630],{"class":1250},[825,2225,1671],{"class":835},[825,2227,2228,2230,2232],{"class":827,"line":1562},[825,2229,1574],{"class":835},[825,2231,1630],{"class":1250},[825,2233,1671],{"class":835},[825,2235,2236,2238,2240,2242,2244,2246,2249,2251],{"class":827,"line":1571},[825,2237,1685],{"class":835},[825,2239,1630],{"class":1250},[825,2241,2166],{"class":929},[825,2243,936],{"class":835},[825,2245,1228],{"class":835},[825,2247,2248],{"class":852},"chatMessageContent({ color, variant, size })",[825,2250,1228],{"class":835},[825,2252,1671],{"class":835},[825,2254,2255,2257,2259],{"class":827,"line":1612},[825,2256,1627],{"class":835},[825,2258,2203],{"class":1250},[825,2260,2217],{"class":835},[825,2262,2263,2265,2267],{"class":827,"line":1624},[825,2264,1808],{"class":835},[825,2266,1630],{"class":1250},[825,2268,1671],{"class":835},[825,2270,2271,2273,2275,2277,2279,2281,2284,2286],{"class":827,"line":1653},[825,2272,1685],{"class":835},[825,2274,1630],{"class":1250},[825,2276,2166],{"class":929},[825,2278,936],{"class":835},[825,2280,1228],{"class":835},[825,2282,2283],{"class":852},"chatMessageActions({ color, variant, size })",[825,2285,1228],{"class":835},[825,2287,1671],{"class":835},[825,2289,2290,2292,2294,2296,2298,2300,2302,2304],{"class":827,"line":1663},[825,2291,1627],{"class":835},[825,2293,2203],{"class":1250},[825,2295,2206],{"class":929},[825,2297,936],{"class":835},[825,2299,1228],{"class":835},[825,2301,1744],{"class":852},[825,2303,1228],{"class":835},[825,2305,2217],{"class":835},[825,2307,2308,2310,2312],{"class":827,"line":1674},[825,2309,1808],{"class":835},[825,2311,1630],{"class":1250},[825,2313,1671],{"class":835},[825,2315,2316,2318,2320],{"class":827,"line":1682},[825,2317,1818],{"class":835},[825,2319,1630],{"class":1250},[825,2321,1671],{"class":835},[825,2323,2324,2327,2329],{"class":827,"line":1692},[825,2325,2326],{"class":835},"    \u003C\u002F",[825,2328,1577],{"class":1250},[825,2330,1671],{"class":835},[825,2332,2333,2335,2337],{"class":827,"line":1719},[825,2334,2139],{"class":835},[825,2336,2154],{"class":1250},[825,2338,1671],{"class":835},[800,2340,2342],{"id":2341},"see-it-in-action","See it in action",[2344,2345],"story-preview",{"story":2346,":panel":2347},"theme-recipes-ai-chat-chatmessage--default","true",[688,2349,195],{"id":2350},"colors",[692,2352,2353,2354,1155,2356,1162,2358,2360],{},"The ChatMessage recipe includes 3 color variants: ",[700,2355,1259],{},[700,2357,1269],{},[700,2359,1278],{},". Like the Card recipe, ChatMessage uses neutral-spectrum colors designed for content surfaces rather than status communication — chat sides aren't semantic states, they're conversational roles. The content recipe combines each color with every visual style variant through compound variants, so you get consistent, predictable styling across all combinations — including dark mode overrides.",[692,2362,694,2363,2365],{},[700,2364,1278],{}," color adapts automatically: it uses a light appearance in light mode and a dark appearance in dark mode, making it the safest default for general-purpose chat UIs.",[2344,2367],{"story":2368,":panel":2347},"theme-recipes-ai-chat-chatmessage--neutral",[2370,2371,2373],"h3",{"id":2372},"color-reference","Color Reference",[2344,2375],{"story":2376,":height":2377},"theme-recipes-ai-chat-chatmessage--all-variants","480",[2379,2380,2381,2397],"table",{},[2382,2383,2384],"thead",{},[2385,2386,2387,2391,2394],"tr",{},[2388,2389,2390],"th",{},"Color",[2388,2392,2393],{},"Token",[2388,2395,2396],{},"Use Case",[2398,2399,2400,2419,2433],"tbody",{},[2385,2401,2402,2407,2416],{},[2403,2404,2405],"td",{},[700,2406,1259],{},[2403,2408,2409,2412,2413],{},[700,2410,2411],{},"@color.white"," \u002F ",[700,2414,2415],{},"@color.gray-*",[2403,2417,2418],{},"Light surfaces, stays light in dark mode",[2385,2420,2421,2425,2430],{},[2403,2422,2423],{},[700,2424,1269],{},[2403,2426,2427],{},[700,2428,2429],{},"@color.gray-900",[2403,2431,2432],{},"Dark surfaces, stays dark in light mode",[2385,2434,2435,2439,2442],{},[2403,2436,2437],{},[700,2438,1278],{},[2403,2440,2441],{},"Adaptive (light ↔ dark)",[2403,2443,2444],{},"Default color, adapts to the current color scheme",[2446,2447,2448,2451,2452,2454],"tip",{},[696,2449,2450],{},"Pro tip:"," Use ",[700,2453,1278],{}," as your default chat-message color. It adapts to the user's color scheme automatically, so you don't need to manage light and dark variants separately.",[688,2456,2458],{"id":2457},"variants","Variants",[692,2460,2461,2462,2466],{},"Five visual style variants control how the message bubble is rendered. Each variant is combined with the selected color through ",[717,2463,2465],{"href":2464},"\u002Fdocs\u002Fapi\u002Frecipes#compound-variants","compound variants"," on the content recipe, so you always get the correct background, text, and border colors for your chosen color.",[2370,2468,2469],{"id":1294},"Solid",[692,2471,2472],{},"Filled background with a subtle border. The most prominent style, ideal for emphasizing a single message in a transcript.",[2344,2474],{"story":2475,":panel":2347},"theme-recipes-ai-chat-chatmessage--solid",[2370,2477,2478],{"id":1303},"Outline",[692,2480,2481],{},"Transparent background with a colored border and matching text. A lightweight, definitionful style that works well for system or meta messages.",[2344,2483],{"story":2484,":panel":2347},"theme-recipes-ai-chat-chatmessage--outline",[2370,2486,2487],{"id":1312},"Soft",[692,2489,2490],{},"Light tinted background with no visible border. A gentle, borderless style that reads like a typical user chat bubble.",[2344,2492],{"story":2493,":panel":2347},"theme-recipes-ai-chat-chatmessage--soft",[2370,2495,2496],{"id":1321},"Subtle",[692,2498,2499,2500,2502],{},"Light tinted background with a matching border. Combines the softness of the ",[700,2501,1312],{}," variant with added visual definition from a border — the recommended default for both user and assistant turns.",[2344,2504],{"story":2505,":panel":2347},"theme-recipes-ai-chat-chatmessage--subtle",[2370,2507,2508],{"id":1330},"Ghost",[692,2510,2511],{},"No background, no border, no padding. Strips the bubble entirely so the message reads as inline prose. Use for assistant turns that should feel like part of the page rather than a discrete bubble.",[2344,2513],{"story":2514,":panel":2347},"theme-recipes-ai-chat-chatmessage--ghost",[688,2516,2518],{"id":2517},"sizes","Sizes",[692,2520,2521,2522,2524,2525,2527],{},"Three size variants from ",[700,2523,1346],{}," to ",[700,2526,1364],{}," control the avatar dimensions, the bubble padding and border radius, and the gap between the avatar and the bubble.",[2344,2529],{"story":2530,":height":2531},"theme-recipes-ai-chat-chatmessage--all-sizes","520",[2370,2533,2535],{"id":2534},"size-reference","Size Reference",[2379,2537,2538,2559],{},[2382,2539,2540],{},[2385,2541,2542,2545,2547,2550,2553,2556],{},[2388,2543,2544],{},"Size",[2388,2546,527],{},[2388,2548,2549],{},"Bubble Border Radius",[2388,2551,2552],{},"Bubble Padding (V \u002F H)",[2388,2554,2555],{},"Root Gap",[2388,2557,2558],{},"Actions Gap \u002F Margin",[2398,2560,2561,2594,2626],{},[2385,2562,2563,2567,2572,2577,2585,2589],{},[2403,2564,2565],{},[700,2566,1346],{},[2403,2568,2569],{},[700,2570,2571],{},"@1.5",[2403,2573,2574],{},[700,2575,2576],{},"@border-radius.sm",[2403,2578,2579,2412,2582],{},[700,2580,2581],{},"@0.5",[700,2583,2584],{},"@0.75",[2403,2586,2587],{},[700,2588,2581],{},[2403,2590,2591],{},[700,2592,2593],{},"@0.125",[2385,2595,2596,2600,2605,2610,2617,2621],{},[2403,2597,2598],{},[700,2599,1355],{},[2403,2601,2602],{},[700,2603,2604],{},"@2",[2403,2606,2607],{},[700,2608,2609],{},"@border-radius.md",[2403,2611,2612,2412,2614],{},[700,2613,2584],{},[700,2615,2616],{},"@1",[2403,2618,2619],{},[700,2620,2584],{},[2403,2622,2623],{},[700,2624,2625],{},"@0.25",[2385,2627,2628,2632,2637,2642,2649,2653],{},[2403,2629,2630],{},[700,2631,1364],{},[2403,2633,2634],{},[700,2635,2636],{},"@2.5",[2403,2638,2639],{},[700,2640,2641],{},"@border-radius.lg",[2403,2643,2644,2412,2646],{},[700,2645,2616],{},[700,2647,2648],{},"@1.25",[2403,2650,2651],{},[700,2652,2616],{},[2403,2654,2655],{},[700,2656,2657],{},"@0.375",[2659,2660,2661,2664,2665,2668],"note",{},[696,2662,2663],{},"Good to know:"," The ",[700,2666,2667],{},"size"," prop must be passed to each sub-recipe individually so the avatar, bubble, and actions row stay visually balanced. The root recipe controls the gap; the sub-recipes manage their own dimensions and padding.",[688,2670,2671],{"id":759},"Side",[692,2673,694,2674,2676,2677,1404],{},[700,2675,759],{}," axis on the root recipe controls how the message aligns within its container. Logical values mean both work correctly under ",[700,2678,771],{},[2379,2680,2681,2692],{},[2382,2682,2683],{},[2385,2684,2685,2687,2690],{},[2388,2686,2671],{},[2388,2688,2689],{},"Behavior",[2388,2691,2396],{},[2398,2693,2694,2709],{},[2385,2695,2696,2700,2706],{},[2403,2697,2698],{},[700,2699,763],{},[2403,2701,2702,2705],{},[700,2703,2704],{},"justifyContent: flex-start",", default flex direction",[2403,2707,2708],{},"Assistant or system messages",[2385,2710,2711,2715,2723],{},[2403,2712,2713],{},[700,2714,767],{},[2403,2716,2717,1155,2720],{},[700,2718,2719],{},"justifyContent: flex-end",[700,2721,2722],{},"flexDirection: row-reverse",[2403,2724,2725],{},"User messages — avatar appears on the inline-end",[2344,2727],{"story":2728,":panel":2347},"theme-recipes-ai-chat-chatmessage--side-end",[2446,2730,2731,2733,2734,2736],{},[696,2732,2450],{}," Set ",[700,2735,759],{}," based on the message author, not on a fixed left\u002Fright position. Logical values keep your UI correct in right-to-left languages without changes.",[688,2738,2740],{"id":2739},"anatomy","Anatomy",[692,2742,2743],{},"The ChatMessage recipe is composed of four independent recipes that work together to form the bubble:",[2379,2745,2746,2759],{},[2382,2747,2748],{},[2385,2749,2750,2753,2756],{},[2388,2751,2752],{},"Part",[2388,2754,2755],{},"Recipe",[2388,2757,2758],{},"Role",[2398,2760,2761,2782,2795,2809],{},[2385,2762,2763,2768,2772],{},[2403,2764,2765],{},[696,2766,2767],{},"Root",[2403,2769,2770],{},[700,2771,702],{},[2403,2773,2774,2775,2778,2779,2781],{},"Outer ",[700,2776,2777],{},"\u003Carticle>"," flex container; owns the ",[700,2780,759],{}," axis for alignment",[2385,2783,2784,2788,2792],{},[2403,2785,2786],{},[696,2787,527],{},[2403,2789,2790],{},[700,2791,706],{},[2403,2793,2794],{},"Leading slot for an avatar or icon — rounded, shrink-0, with a neutral placeholder background",[2385,2796,2797,2802,2806],{},[2403,2798,2799],{},[696,2800,2801],{},"Content",[2403,2803,2804],{},[700,2805,710],{},[2403,2807,2808],{},"The bubble itself — background, padding, border, and the color × variant compound matrix",[2385,2810,2811,2815,2819],{},[2403,2812,2813],{},[696,2814,364],{},[2403,2816,2817],{},[700,2818,714],{},[2403,2820,2821],{},"Action button row beneath the bubble — flex layout with size-aware gap and margin",[692,2823,694,2824,2827,2828,2831,2832,2835,2836,2839,2840,1155,2843,1162,2846,2848],{},[700,2825,2826],{},"chat-message-avatar"," recipe is independent of the ",[700,2829,2830],{},"media"," recipe: drop a raw ",[700,2833,2834],{},"\u003Cimg>"," or icon inside an element styled by ",[700,2837,2838],{},"chatMessageAvatar()"," and you get correct sizing and shape without pulling in any other recipe. Pass ",[700,2841,2842],{},"color",[700,2844,2845],{},"variant",[700,2847,2667],{}," consistently to all four sub-recipes so they stay visually balanced.",[816,2850,2854],{"className":2851,"code":2852,"language":2853,"meta":821,"style":821},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- All four parts working together -->\n\u003Carticle class=\"chatMessage(...)\">\n    \u003Cdiv class=\"chatMessageAvatar(...)\">A\u003C\u002Fdiv>\n    \u003Cdiv>\n        \u003Cdiv class=\"chatMessageContent(...)\">Message body\u003C\u002Fdiv>\n        \u003Cdiv class=\"chatMessageActions(...)\">Action buttons\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\u003C\u002Farticle>\n","html",[700,2855,2856,2862,2882,2911,2919,2947,2975,2983],{"__ignoreMap":821},[825,2857,2858],{"class":827,"line":828},[825,2859,2861],{"class":2860},"sHwdD","\u003C!-- All four parts working together -->\n",[825,2863,2864,2866,2868,2871,2873,2875,2878,2880],{"class":827,"line":862},[825,2865,1852],{"class":835},[825,2867,1577],{"class":1250},[825,2869,2870],{"class":929}," class",[825,2872,936],{"class":835},[825,2874,1228],{"class":835},[825,2876,2877],{"class":852},"chatMessage(...)",[825,2879,1228],{"class":835},[825,2881,1671],{"class":835},[825,2883,2884,2886,2888,2890,2892,2894,2897,2899,2902,2905,2907,2909],{"class":827,"line":870},[825,2885,2161],{"class":835},[825,2887,1630],{"class":1250},[825,2889,2870],{"class":929},[825,2891,936],{"class":835},[825,2893,1228],{"class":835},[825,2895,2896],{"class":852},"chatMessageAvatar(...)",[825,2898,1228],{"class":835},[825,2900,2901],{"class":835},">",[825,2903,2904],{"class":839},"A",[825,2906,2139],{"class":835},[825,2908,1630],{"class":1250},[825,2910,1671],{"class":835},[825,2912,2913,2915,2917],{"class":827,"line":879},[825,2914,2161],{"class":835},[825,2916,1630],{"class":1250},[825,2918,1671],{"class":835},[825,2920,2921,2923,2925,2927,2929,2931,2934,2936,2938,2941,2943,2945],{"class":827,"line":887},[825,2922,1574],{"class":835},[825,2924,1630],{"class":1250},[825,2926,2870],{"class":929},[825,2928,936],{"class":835},[825,2930,1228],{"class":835},[825,2932,2933],{"class":852},"chatMessageContent(...)",[825,2935,1228],{"class":835},[825,2937,2901],{"class":835},[825,2939,2940],{"class":839},"Message body",[825,2942,2139],{"class":835},[825,2944,1630],{"class":1250},[825,2946,1671],{"class":835},[825,2948,2949,2951,2953,2955,2957,2959,2962,2964,2966,2969,2971,2973],{"class":827,"line":895},[825,2950,1574],{"class":835},[825,2952,1630],{"class":1250},[825,2954,2870],{"class":929},[825,2956,936],{"class":835},[825,2958,1228],{"class":835},[825,2960,2961],{"class":852},"chatMessageActions(...)",[825,2963,1228],{"class":835},[825,2965,2901],{"class":835},[825,2967,2968],{"class":839},"Action buttons",[825,2970,2139],{"class":835},[825,2972,1630],{"class":1250},[825,2974,1671],{"class":835},[825,2976,2977,2979,2981],{"class":827,"line":903},[825,2978,2326],{"class":835},[825,2980,1630],{"class":1250},[825,2982,1671],{"class":835},[825,2984,2985,2987,2989],{"class":827,"line":920},[825,2986,2139],{"class":835},[825,2988,1577],{"class":1250},[825,2990,1671],{"class":835},[2446,2992,2993,2995,2996,2998,2999,3001],{},[696,2994,2450],{}," You don't have to use all four parts. A minimal chat-message is just ",[700,2997,702],{}," wrapping ",[700,3000,710],{},". Add the avatar and actions only when your design needs them.",[688,3003,568],{"id":3004},"accessibility",[736,3006,3007,3020,3030,3047,3064],{},[739,3008,3009,3012,3013,3015,3016,3019],{},[696,3010,3011],{},"Use semantic markup."," The root renders as an ",[700,3014,2777],{}," element, which communicates a self-contained message to assistive technology. Don't replace it with a ",[700,3017,3018],{},"\u003Cdiv>"," unless you have a strong reason.",[739,3021,3022,3025,3026,3029],{},[696,3023,3024],{},"Announce streaming updates."," If your chat UI streams assistant responses, wrap the message list in a region with ",[700,3027,3028],{},"aria-live=\"polite\""," so screen readers hear new content without interrupting the user.",[739,3031,3032,3035,3036,3039,3040,1155,3043,3046],{},[696,3033,3034],{},"Provide accessible names for action buttons."," Buttons in the actions row should have visible text or an ",[700,3037,3038],{},"aria-label"," (",[700,3041,3042],{},"\"Copy message\"",[700,3044,3045],{},"\"Regenerate response\"",") so users on assistive tech know what each action does.",[739,3048,3049,2664,3052,3054,3055,3057,3058,1404],{},[696,3050,3051],{},"Verify contrast ratios.",[700,3053,1294],{}," variant with ",[700,3056,1269],{}," color places light text on a dark background. Default tokens meet WCAG AA 4.5:1 contrast. If you override colors, verify with the ",[717,3059,3063],{"href":3060,"rel":3061},"https:\u002F\u002Fwebaim.org\u002Fresources\u002Fcontrastchecker\u002F",[3062],"nofollow","WebAIM Contrast Checker",[739,3065,3066,3069,3070,3073],{},[696,3067,3068],{},"Don't rely on side alone to convey author."," Pair ",[700,3071,3072],{},"side=\"end\""," with author text or an avatar so the role is communicated to users who don't perceive the layout (screen reader, low-vision, RTL contexts).",[688,3075,3077],{"id":3076},"customization","Customization",[2370,3079,3081],{"id":3080},"overriding-defaults","Overriding Defaults",[692,3083,3084],{},"Each chat-message composable accepts an optional second argument to override any part of the recipe configuration. Overrides are deep-merged with the defaults, so you only need to specify the properties you want to change:",[816,3086,3088],{"className":818,"code":3087,"filename":814,"language":820,"meta":821,"style":821},"import { styleframe } from 'virtual:styleframe';\nimport {\n    useChatMessageRecipe,\n    useChatMessageContentRecipe,\n} from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\nconst chatMessage = useChatMessageRecipe(s, {\n    base: { gap: '@1' },\n    defaultVariants: {\n        color: 'neutral',\n        variant: 'soft',\n        size: 'lg',\n        side: 'start',\n    },\n});\n\nconst chatMessageContent = useChatMessageContentRecipe(s, {\n    base: { maxWidth: '60%' },\n});\n\nexport default s;\n",[700,3089,3090,3110,3116,3122,3128,3142,3146,3160,3164,3181,3205,3214,3229,3244,3259,3274,3279,3287,3291,3307,3329,3337,3341],{"__ignoreMap":821},[825,3091,3092,3094,3096,3098,3100,3102,3104,3106,3108],{"class":827,"line":828},[825,3093,832],{"class":831},[825,3095,836],{"class":835},[825,3097,840],{"class":839},[825,3099,843],{"class":835},[825,3101,846],{"class":831},[825,3103,849],{"class":835},[825,3105,853],{"class":852},[825,3107,856],{"class":835},[825,3109,859],{"class":835},[825,3111,3112,3114],{"class":827,"line":862},[825,3113,832],{"class":831},[825,3115,867],{"class":835},[825,3117,3118,3120],{"class":827,"line":870},[825,3119,873],{"class":839},[825,3121,876],{"class":835},[825,3123,3124,3126],{"class":827,"line":879},[825,3125,890],{"class":839},[825,3127,876],{"class":835},[825,3129,3130,3132,3134,3136,3138,3140],{"class":827,"line":887},[825,3131,906],{"class":835},[825,3133,846],{"class":831},[825,3135,849],{"class":835},[825,3137,913],{"class":852},[825,3139,856],{"class":835},[825,3141,859],{"class":835},[825,3143,3144],{"class":827,"line":895},[825,3145,923],{"emptyLinePlaceholder":223},[825,3147,3148,3150,3152,3154,3156,3158],{"class":827,"line":903},[825,3149,930],{"class":929},[825,3151,933],{"class":839},[825,3153,936],{"class":835},[825,3155,840],{"class":939},[825,3157,942],{"class":839},[825,3159,859],{"class":835},[825,3161,3162],{"class":827,"line":920},[825,3163,923],{"emptyLinePlaceholder":223},[825,3165,3166,3168,3170,3172,3174,3177,3179],{"class":827,"line":926},[825,3167,930],{"class":929},[825,3169,957],{"class":839},[825,3171,936],{"class":835},[825,3173,962],{"class":939},[825,3175,3176],{"class":839},"(s",[825,3178,1075],{"class":835},[825,3180,867],{"class":835},[825,3182,3183,3186,3189,3191,3194,3196,3198,3200,3202],{"class":827,"line":947},[825,3184,3185],{"class":1250},"    base",[825,3187,3188],{"class":835},":",[825,3190,836],{"class":835},[825,3192,3193],{"class":1250}," gap",[825,3195,3188],{"class":835},[825,3197,849],{"class":835},[825,3199,2616],{"class":852},[825,3201,856],{"class":835},[825,3203,3204],{"class":835}," },\n",[825,3206,3207,3210,3212],{"class":827,"line":952},[825,3208,3209],{"class":1250},"    defaultVariants",[825,3211,3188],{"class":835},[825,3213,867],{"class":835},[825,3215,3216,3219,3221,3223,3225,3227],{"class":827,"line":970},[825,3217,3218],{"class":1250},"        color",[825,3220,3188],{"class":835},[825,3222,849],{"class":835},[825,3224,1278],{"class":852},[825,3226,856],{"class":835},[825,3228,876],{"class":835},[825,3230,3231,3234,3236,3238,3240,3242],{"class":827,"line":987},[825,3232,3233],{"class":1250},"        variant",[825,3235,3188],{"class":835},[825,3237,849],{"class":835},[825,3239,1312],{"class":852},[825,3241,856],{"class":835},[825,3243,876],{"class":835},[825,3245,3246,3249,3251,3253,3255,3257],{"class":827,"line":1004},[825,3247,3248],{"class":1250},"        size",[825,3250,3188],{"class":835},[825,3252,849],{"class":835},[825,3254,1364],{"class":852},[825,3256,856],{"class":835},[825,3258,876],{"class":835},[825,3260,3261,3264,3266,3268,3270,3272],{"class":827,"line":1021},[825,3262,3263],{"class":1250},"        side",[825,3265,3188],{"class":835},[825,3267,849],{"class":835},[825,3269,763],{"class":852},[825,3271,856],{"class":835},[825,3273,876],{"class":835},[825,3275,3276],{"class":827,"line":1026},[825,3277,3278],{"class":835},"    },\n",[825,3280,3281,3283,3285],{"class":827,"line":1447},[825,3282,906],{"class":835},[825,3284,1557],{"class":839},[825,3286,859],{"class":835},[825,3288,3289],{"class":827,"line":1452},[825,3290,923],{"emptyLinePlaceholder":223},[825,3292,3293,3295,3297,3299,3301,3303,3305],{"class":827,"line":1466},[825,3294,930],{"class":929},[825,3296,992],{"class":839},[825,3298,936],{"class":835},[825,3300,997],{"class":939},[825,3302,3176],{"class":839},[825,3304,1075],{"class":835},[825,3306,867],{"class":835},[825,3308,3309,3311,3313,3315,3318,3320,3322,3325,3327],{"class":827,"line":1483},[825,3310,3185],{"class":1250},[825,3312,3188],{"class":835},[825,3314,836],{"class":835},[825,3316,3317],{"class":1250}," maxWidth",[825,3319,3188],{"class":835},[825,3321,849],{"class":835},[825,3323,3324],{"class":852},"60%",[825,3326,856],{"class":835},[825,3328,3204],{"class":835},[825,3330,3331,3333,3335],{"class":827,"line":1498},[825,3332,906],{"class":835},[825,3334,1557],{"class":839},[825,3336,859],{"class":835},[825,3338,3339],{"class":827,"line":1513},[825,3340,923],{"emptyLinePlaceholder":223},[825,3342,3343,3345,3347,3349],{"class":827,"line":1528},[825,3344,1029],{"class":831},[825,3346,1032],{"class":831},[825,3348,1035],{"class":839},[825,3350,859],{"class":835},[2370,3352,3354],{"id":3353},"filtering-variants","Filtering Variants",[692,3356,3357,3358,3361],{},"If you only need a subset of the available variants, use the ",[700,3359,3360],{},"filter"," option to limit which values are generated. This reduces the output CSS and keeps your component API focused:",[816,3363,3365],{"className":818,"code":3364,"filename":814,"language":820,"meta":821,"style":821},"import { styleframe } from 'virtual:styleframe';\nimport { useChatMessageContentRecipe } from '@styleframe\u002Ftheme';\n\nconst s = styleframe();\n\n\u002F\u002F Only generate neutral color with the bubble variants you actually use\nconst chatMessageContent = useChatMessageContentRecipe(s, {\n    filter: {\n        color: ['neutral'],\n        variant: ['subtle', 'ghost'],\n    },\n});\n\nexport default s;\n",[700,3366,3367,3387,3407,3411,3425,3429,3434,3450,3459,3479,3505,3509,3517,3521],{"__ignoreMap":821},[825,3368,3369,3371,3373,3375,3377,3379,3381,3383,3385],{"class":827,"line":828},[825,3370,832],{"class":831},[825,3372,836],{"class":835},[825,3374,840],{"class":839},[825,3376,843],{"class":835},[825,3378,846],{"class":831},[825,3380,849],{"class":835},[825,3382,853],{"class":852},[825,3384,856],{"class":835},[825,3386,859],{"class":835},[825,3388,3389,3391,3393,3395,3397,3399,3401,3403,3405],{"class":827,"line":862},[825,3390,832],{"class":831},[825,3392,836],{"class":835},[825,3394,997],{"class":839},[825,3396,843],{"class":835},[825,3398,846],{"class":831},[825,3400,849],{"class":835},[825,3402,913],{"class":852},[825,3404,856],{"class":835},[825,3406,859],{"class":835},[825,3408,3409],{"class":827,"line":870},[825,3410,923],{"emptyLinePlaceholder":223},[825,3412,3413,3415,3417,3419,3421,3423],{"class":827,"line":879},[825,3414,930],{"class":929},[825,3416,933],{"class":839},[825,3418,936],{"class":835},[825,3420,840],{"class":939},[825,3422,942],{"class":839},[825,3424,859],{"class":835},[825,3426,3427],{"class":827,"line":887},[825,3428,923],{"emptyLinePlaceholder":223},[825,3430,3431],{"class":827,"line":895},[825,3432,3433],{"class":2860},"\u002F\u002F Only generate neutral color with the bubble variants you actually use\n",[825,3435,3436,3438,3440,3442,3444,3446,3448],{"class":827,"line":903},[825,3437,930],{"class":929},[825,3439,992],{"class":839},[825,3441,936],{"class":835},[825,3443,997],{"class":939},[825,3445,3176],{"class":839},[825,3447,1075],{"class":835},[825,3449,867],{"class":835},[825,3451,3452,3455,3457],{"class":827,"line":920},[825,3453,3454],{"class":1250},"    filter",[825,3456,3188],{"class":835},[825,3458,867],{"class":835},[825,3460,3461,3463,3465,3468,3470,3472,3474,3477],{"class":827,"line":926},[825,3462,3218],{"class":1250},[825,3464,3188],{"class":835},[825,3466,3467],{"class":839}," [",[825,3469,856],{"class":835},[825,3471,1278],{"class":852},[825,3473,856],{"class":835},[825,3475,3476],{"class":839},"]",[825,3478,876],{"class":835},[825,3480,3481,3483,3485,3487,3489,3491,3493,3495,3497,3499,3501,3503],{"class":827,"line":947},[825,3482,3233],{"class":1250},[825,3484,3188],{"class":835},[825,3486,3467],{"class":839},[825,3488,856],{"class":835},[825,3490,1321],{"class":852},[825,3492,856],{"class":835},[825,3494,1075],{"class":835},[825,3496,849],{"class":835},[825,3498,1330],{"class":852},[825,3500,856],{"class":835},[825,3502,3476],{"class":839},[825,3504,876],{"class":835},[825,3506,3507],{"class":827,"line":952},[825,3508,3278],{"class":835},[825,3510,3511,3513,3515],{"class":827,"line":970},[825,3512,906],{"class":835},[825,3514,1557],{"class":839},[825,3516,859],{"class":835},[825,3518,3519],{"class":827,"line":987},[825,3520,923],{"emptyLinePlaceholder":223},[825,3522,3523,3525,3527,3529],{"class":827,"line":1004},[825,3524,1029],{"class":831},[825,3526,1032],{"class":831},[825,3528,1035],{"class":839},[825,3530,859],{"class":835},[2659,3532,3533,3535],{},[696,3534,2663],{}," Filtering also removes compound variants and adjusts default variants that reference filtered-out values, so your recipe stays consistent.",[688,3537,73],{"id":3538},"api-reference",[2370,3540,3542],{"id":3541},"usechatmessagerecipes-options",[700,3543,3544],{},"useChatMessageRecipe(s, options?)",[692,3546,3547,3548,3550],{},"Creates the chat-message root recipe — a flex container with logical side alignment. Owns the ",[700,3549,759],{}," axis; the other axes are exposed for prop spreading but produce no styles at the root.",[692,3552,3553],{},[696,3554,3555],{},"Parameters:",[2379,3557,3558,3571],{},[2382,3559,3560],{},[2385,3561,3562,3565,3568],{},[2388,3563,3564],{},"Parameter",[2388,3566,3567],{},"Type",[2388,3569,3570],{},"Description",[2398,3572,3573,3588,3603,3618,3632,3647,3662],{},[2385,3574,3575,3580,3585],{},[2403,3576,3577],{},[700,3578,3579],{},"s",[2403,3581,3582],{},[700,3583,3584],{},"Styleframe",[2403,3586,3587],{},"The Styleframe instance",[2385,3589,3590,3595,3600],{},[2403,3591,3592],{},[700,3593,3594],{},"options",[2403,3596,3597],{},[700,3598,3599],{},"DeepPartial\u003CRecipeConfig>",[2403,3601,3602],{},"Optional overrides for the recipe configuration",[2385,3604,3605,3610,3615],{},[2403,3606,3607],{},[700,3608,3609],{},"options.base",[2403,3611,3612],{},[700,3613,3614],{},"VariantDeclarationsBlock",[2403,3616,3617],{},"Custom base styles for the root container",[2385,3619,3620,3625,3629],{},[2403,3621,3622],{},[700,3623,3624],{},"options.variants",[2403,3626,3627],{},[700,3628,2458],{},[2403,3630,3631],{},"Custom variant definitions for the recipe",[2385,3633,3634,3639,3644],{},[2403,3635,3636],{},[700,3637,3638],{},"options.defaultVariants",[2403,3640,3641],{},[700,3642,3643],{},"Record\u003Ckeyof Variants, string>",[2403,3645,3646],{},"Default variant values for the recipe",[2385,3648,3649,3654,3659],{},[2403,3650,3651],{},[700,3652,3653],{},"options.compoundVariants",[2403,3655,3656],{},[700,3657,3658],{},"CompoundVariant[]",[2403,3660,3661],{},"Custom compound variant definitions for the recipe",[2385,3663,3664,3669,3674],{},[2403,3665,3666],{},[700,3667,3668],{},"options.filter",[2403,3670,3671],{},[700,3672,3673],{},"Record\u003Cstring, string[]>",[2403,3675,3676],{},"Limit which variant values are generated",[692,3678,3679],{},[696,3680,3681],{},"Variants:",[2379,3683,3684,3697],{},[2382,3685,3686],{},[2385,3687,3688,3691,3694],{},[2388,3689,3690],{},"Variant",[2388,3692,3693],{},"Options",[2388,3695,3696],{},"Default",[2398,3698,3699,3717,3739,3757],{},[2385,3700,3701,3705,3713],{},[2403,3702,3703],{},[700,3704,2842],{},[2403,3706,3707,1155,3709,1155,3711],{},[700,3708,1259],{},[700,3710,1269],{},[700,3712,1278],{},[2403,3714,3715],{},[700,3716,1278],{},[2385,3718,3719,3723,3735],{},[2403,3720,3721],{},[700,3722,2845],{},[2403,3724,3725,1155,3727,1155,3729,1155,3731,1155,3733],{},[700,3726,1294],{},[700,3728,1303],{},[700,3730,1312],{},[700,3732,1321],{},[700,3734,1330],{},[2403,3736,3737],{},[700,3738,1321],{},[2385,3740,3741,3745,3753],{},[2403,3742,3743],{},[700,3744,2667],{},[2403,3746,3747,1155,3749,1155,3751],{},[700,3748,1346],{},[700,3750,1355],{},[700,3752,1364],{},[2403,3754,3755],{},[700,3756,1355],{},[2385,3758,3759,3763,3769],{},[2403,3760,3761],{},[700,3762,759],{},[2403,3764,3765,1155,3767],{},[700,3766,763],{},[700,3768,767],{},[2403,3770,3771],{},[700,3772,763],{},[2370,3774,3776],{"id":3775},"usechatmessageavatarrecipes-options",[700,3777,3778],{},"useChatMessageAvatarRecipe(s, options?)",[692,3780,3781,3782,3784,3785,1404],{},"Creates the chat-message avatar recipe — a fixed-size leading slot with a circular placeholder. Independent of the ",[700,3783,2830],{}," recipe. Accepts the same parameters as ",[700,3786,3787],{},"useChatMessageRecipe",[692,3789,3790],{},[696,3791,3681],{},[2379,3793,3794,3804],{},[2382,3795,3796],{},[2385,3797,3798,3800,3802],{},[2388,3799,3690],{},[2388,3801,3693],{},[2388,3803,3696],{},[2398,3805,3806,3824,3846],{},[2385,3807,3808,3812,3820],{},[2403,3809,3810],{},[700,3811,2842],{},[2403,3813,3814,1155,3816,1155,3818],{},[700,3815,1259],{},[700,3817,1269],{},[700,3819,1278],{},[2403,3821,3822],{},[700,3823,1278],{},[2385,3825,3826,3830,3842],{},[2403,3827,3828],{},[700,3829,2845],{},[2403,3831,3832,1155,3834,1155,3836,1155,3838,1155,3840],{},[700,3833,1294],{},[700,3835,1303],{},[700,3837,1312],{},[700,3839,1321],{},[700,3841,1330],{},[2403,3843,3844],{},[700,3845,1321],{},[2385,3847,3848,3852,3860],{},[2403,3849,3850],{},[700,3851,2667],{},[2403,3853,3854,1155,3856,1155,3858],{},[700,3855,1346],{},[700,3857,1355],{},[700,3859,1364],{},[2403,3861,3862],{},[700,3863,1355],{},[2370,3865,3867],{"id":3866},"usechatmessagecontentrecipes-options",[700,3868,3869],{},"useChatMessageContentRecipe(s, options?)",[692,3871,3872,3873,3875,3876,1404],{},"Creates the chat-message content recipe — the bubble itself. Owns the 12-entry color × variant compound matrix (3 colors × 4 visual variants). The ",[700,3874,1330],{}," variant strips bubble chrome regardless of color, so it has no compound entries. Accepts the same parameters as ",[700,3877,3787],{},[692,3879,3880],{},[696,3881,3681],{},[2379,3883,3884,3894],{},[2382,3885,3886],{},[2385,3887,3888,3890,3892],{},[2388,3889,3690],{},[2388,3891,3693],{},[2388,3893,3696],{},[2398,3895,3896,3914,3936],{},[2385,3897,3898,3902,3910],{},[2403,3899,3900],{},[700,3901,2842],{},[2403,3903,3904,1155,3906,1155,3908],{},[700,3905,1259],{},[700,3907,1269],{},[700,3909,1278],{},[2403,3911,3912],{},[700,3913,1278],{},[2385,3915,3916,3920,3932],{},[2403,3917,3918],{},[700,3919,2845],{},[2403,3921,3922,1155,3924,1155,3926,1155,3928,1155,3930],{},[700,3923,1294],{},[700,3925,1303],{},[700,3927,1312],{},[700,3929,1321],{},[700,3931,1330],{},[2403,3933,3934],{},[700,3935,1321],{},[2385,3937,3938,3942,3950],{},[2403,3939,3940],{},[700,3941,2667],{},[2403,3943,3944,1155,3946,1155,3948],{},[700,3945,1346],{},[700,3947,1355],{},[700,3949,1364],{},[2403,3951,3952],{},[700,3953,1355],{},[2370,3955,3957],{"id":3956},"usechatmessageactionsrecipes-options",[700,3958,3959],{},"useChatMessageActionsRecipe(s, options?)",[692,3961,3962,3963,1404],{},"Creates the chat-message actions row recipe — a flex layout for action buttons displayed beneath the bubble. Hover-reveal is a markup concern (toggle opacity on the parent), not a recipe variant. Accepts the same parameters as ",[700,3964,3787],{},[692,3966,3967],{},[696,3968,3681],{},[2379,3970,3971,3981],{},[2382,3972,3973],{},[2385,3974,3975,3977,3979],{},[2388,3976,3690],{},[2388,3978,3693],{},[2388,3980,3696],{},[2398,3982,3983,4001,4023],{},[2385,3984,3985,3989,3997],{},[2403,3986,3987],{},[700,3988,2842],{},[2403,3990,3991,1155,3993,1155,3995],{},[700,3992,1259],{},[700,3994,1269],{},[700,3996,1278],{},[2403,3998,3999],{},[700,4000,1278],{},[2385,4002,4003,4007,4019],{},[2403,4004,4005],{},[700,4006,2845],{},[2403,4008,4009,1155,4011,1155,4013,1155,4015,1155,4017],{},[700,4010,1294],{},[700,4012,1303],{},[700,4014,1312],{},[700,4016,1321],{},[700,4018,1330],{},[2403,4020,4021],{},[700,4022,1321],{},[2385,4024,4025,4029,4037],{},[2403,4026,4027],{},[700,4028,2667],{},[2403,4030,4031,1155,4033,1155,4035],{},[700,4032,1346],{},[700,4034,1355],{},[700,4036,1364],{},[2403,4038,4039],{},[700,4040,1355],{},[692,4042,4043],{},[717,4044,4045],{"href":132},"Learn more about recipes →",[688,4047,4049],{"id":4048},"best-practices","Best Practices",[736,4051,4052,4065,4081,4093,4107,4117],{},[739,4053,4054,4064],{},[696,4055,4056,4057,1155,4059,1162,4061,4063],{},"Pass ",[700,4058,2842],{},[700,4060,2845],{},[700,4062,2667],{}," consistently",": All four sub-recipes accept the same axes. Spread the same props to each so the avatar, bubble, and actions row stay visually balanced.",[739,4066,4067,4073,4074,4077,4078,4080],{},[696,4068,4069,4070,4072],{},"Choose ",[700,4071,759],{}," by author, not by position",": Use ",[700,4075,4076],{},"side=\"start\""," for assistant turns and ",[700,4079,3072],{}," for user turns. Logical values keep your UI correct in right-to-left languages.",[739,4082,4083,4092],{},[696,4084,4085,4086,4088,4089,4091],{},"Use ",[700,4087,1330],{}," for assistant prose, ",[700,4090,1321],{}," for user replies",": Ghost reads like part of the page; subtle reads like a discrete message. The contrast helps users distinguish authorship at a glance.",[739,4094,4095,4098,4099,764,4101,4103,4104,4106],{},[696,4096,4097],{},"Filter what you don't need",": If your chat UI uses only ",[700,4100,1321],{},[700,4102,1330],{},", pass a ",[700,4105,3360],{}," option to remove the other variants from the generated CSS.",[739,4108,4109,4112,4113,4116],{},[696,4110,4111],{},"Override defaults at the recipe level",": Set your most common variant combination as ",[700,4114,4115],{},"defaultVariants"," so component consumers write less code.",[739,4118,4119,4122,4123,4126,4127,4130],{},[696,4120,4121],{},"Don't put hover reveal on the recipe",": Toggle action opacity in your component template (",[700,4124,4125],{},"group-hover"," in CSS, ",[700,4128,4129],{},":hover"," in your wrapper). Keep the recipe declarative.",[688,4132,4134],{"id":4133},"faq","FAQ",[4136,4137,4138,4144,4153,4164,4179,4195,4233,4255],"accordion",{},[4139,4140,4143],"accordion-item",{"icon":4141,"label":4142},"i-lucide-circle-help","Why are there four separate recipes instead of one?","Chat messages have distinct structural parts (avatar, bubble, actions) that need independent styling — different sizing, layout, and visual treatment. Four separate recipes give each part its own base styles and variant axes while sharing the same color, variant, and size axes. This approach keeps each recipe focused and lets you compose only the parts you need.",[4139,4145,4147,4148,2998,4150,4152],{"icon":4141,"label":4146},"Do I have to use all four sub-recipes?","No. The minimal chat-message is ",[700,4149,702],{},[700,4151,710],{}," — just an aligned bubble with no avatar or actions row. Add the avatar and actions recipes only when your design needs them.",[4139,4154,4156,4157,1155,4159,1162,4161,4163],{"icon":4141,"label":4155},"Why doesn't the ChatMessage recipe include semantic colors like primary or success?","Chat messages are conversational containers, not status indicators. Semantic colors (primary, success, error) communicate meaning through color, which is better suited to smaller, focused elements like badges, buttons, and callouts. ChatMessage uses ",[700,4158,1259],{},[700,4160,1269],{},[700,4162,1278],{}," to provide surface variations that work across both user and assistant turns without implying status.",[4139,4165,4167,4169,4170,4172,4173,4175,4176,4178],{"icon":4141,"label":4166},"What's the difference between the subtle and ghost variants?",[700,4168,1321],{}," renders a tinted background with a matching border — a discrete bubble. ",[700,4171,1330],{}," strips background, border, and padding entirely so the message reads as inline prose. Use ",[700,4174,1321],{}," when the message should feel like a chat bubble; use ",[700,4177,1330],{}," when an assistant response should feel like part of the surrounding page (typical for long-form generated content).",[4139,4180,4182,4183,4185,4186,4188,4189,4191,4192,4194],{"icon":4141,"label":4181},"Why use `start` and `end` instead of `left` and `right`?","Logical sides flip automatically under ",[700,4184,771],{},". If your app supports right-to-left languages (Arabic, Hebrew, Persian), ",[700,4187,3072],{}," keeps user messages on the user's natural side without you writing any directional code. If you never plan to support RTL, the values still read clearly: ",[700,4190,763],{}," is where the conversation begins (typically the assistant), ",[700,4193,767],{}," is where the user replies.",[4139,4196,4198,4228],{"icon":4141,"label":4197},"How do compound variants work in the ChatMessage recipe?",[692,4199,4200,4201,4204,4205,4207,4208,764,4210,4207,4212,4214,4215,1155,4218,1162,4221,4224,4225,4227],{},"Compound variants live on the content recipe (",[700,4202,4203],{},"useChatMessageContentRecipe","). They map each color-variant combination to specific styles. For example, when ",[700,4206,2842],{}," is ",[700,4209,1278],{},[700,4211,2845],{},[700,4213,1321],{},", the compound variant applies ",[700,4216,4217],{},"background: @color.gray-100",[700,4219,4220],{},"color: @color.gray-700",[700,4222,4223],{},"borderColor: @color.gray-200",", along with dark mode overrides. The recipe has 12 compound entries (3 colors × 4 visual variants — the ",[700,4226,1330],{}," variant strips chrome regardless of color, so it needs no compound entries).",[692,4229,4230],{},[717,4231,4232],{"href":2464},"Learn more about compound variants →",[4139,4234,4236,4237,4239,4240,4242,4243,4246,4247,1155,4249,4251,4252,4254],{"icon":4141,"label":4235},"How does filtering affect compound variants?","When you use the ",[700,4238,3360],{}," option on the content recipe, compound variants that reference filtered-out values are automatically removed. For example, if you filter ",[700,4241,2845],{}," to only ",[700,4244,4245],{},"['subtle', 'ghost']",", all compound variants matching ",[700,4248,1294],{},[700,4250,1303],{},", or ",[700,4253,1312],{}," are excluded from the generated output. Default variants are also adjusted if they reference a removed value.",[4139,4256,4258,4259,4262],{"icon":4141,"label":4257},"How do I show a hover-revealed actions row?","The actions recipe handles only layout (gap, margin). Hover reveal is a markup concern: add a CSS rule that toggles opacity on the actions row when the message wrapper is hovered, e.g., ",[700,4260,4261],{},".chat-message:hover .chat-message-actions { opacity: 1 }",". Keeping reveal logic out of the recipe lets you choose between hover, focus-within, always-visible, or other patterns without changing the recipe.",[4264,4265,4266],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":821,"searchDepth":862,"depth":862,"links":4268},[4269,4270,4271,4272,4275,4282,4285,4286,4287,4288,4292,4298,4299],{"id":690,"depth":862,"text":78},{"id":730,"depth":862,"text":731},{"id":793,"depth":862,"text":794},{"id":2350,"depth":862,"text":195,"children":4273},[4274],{"id":2372,"depth":870,"text":2373},{"id":2457,"depth":862,"text":2458,"children":4276},[4277,4278,4279,4280,4281],{"id":1294,"depth":870,"text":2469},{"id":1303,"depth":870,"text":2478},{"id":1312,"depth":870,"text":2487},{"id":1321,"depth":870,"text":2496},{"id":1330,"depth":870,"text":2508},{"id":2517,"depth":862,"text":2518,"children":4283},[4284],{"id":2534,"depth":870,"text":2535},{"id":759,"depth":862,"text":2671},{"id":2739,"depth":862,"text":2740},{"id":3004,"depth":862,"text":568},{"id":3076,"depth":862,"text":3077,"children":4289},[4290,4291],{"id":3080,"depth":870,"text":3081},{"id":3353,"depth":870,"text":3354},{"id":3538,"depth":862,"text":73,"children":4293},[4294,4295,4296,4297],{"id":3541,"depth":870,"text":3544},{"id":3775,"depth":870,"text":3778},{"id":3866,"depth":870,"text":3869},{"id":3956,"depth":870,"text":3959},{"id":4048,"depth":862,"text":4049},{"id":4133,"depth":862,"text":4134},"A chat-bubble component for AI chat transcripts with optional leading avatar, content bubble, and hover-revealed actions row. Side-aware layout with logical start\u002Fend alignment, plus compound variants that handle every color-variant combination.",null,{},{"icon":7},{"title":555,"description":4300},"e6zBF-mnSWAqy0YQ43wrZfDPz9pJ_eP8ZfJ-5ki7i04",[4307,4309],{"title":547,"path":548,"stem":549,"description":4308,"icon":7,"children":-1},"A visual placeholder container with a dashed border and hatch pattern for layout prototyping, wireframing, and empty states. Uses the recipe system with dark mode support.",{"title":78,"path":165,"stem":166,"description":4310,"icon":79,"children":-1},"Explore Styleframe's comprehensive design token system. Create consistent, scalable design systems with composable functions for colors, typography, spacing, and more.",1781596320867]