[{"data":1,"prerenderedAt":1083},["ShallowReactive",2],{"docs-nav:docs_zh":3,"\u002Fzh\u002Fcomponents\u002Fworkflow":1049,"surround:\u002Fzh\u002Fcomponents\u002Fworkflow":1076,"demo-code:workflow\u002Fbasic":1081,"demo-code:workflow\u002Fmindmap":1082},[4],{"title":5,"path":6,"stem":7,"children":8,"page":616},"Zh","\u002Fzh","zh",[9,32,617],{"title":10,"icon":11,"path":12,"stem":13,"children":14},"指南","i-lucide-book-open","\u002Fzh\u002Fguide","zh\u002F01.guide\u002Findex",[15,16,20,24,28],{"title":10,"path":12,"stem":13},{"title":17,"path":18,"stem":19},"简介","\u002Fzh\u002Fguide\u002Fintroduction","zh\u002F01.guide\u002F01.introduction",{"title":21,"path":22,"stem":23},"安装","\u002Fzh\u002Fguide\u002Finstallation","zh\u002F01.guide\u002F02.installation",{"title":25,"path":26,"stem":27},"主题","\u002Fzh\u002Fguide\u002Ftheming","zh\u002F01.guide\u002F03.theming",{"title":29,"path":30,"stem":31},"AI 集成","\u002Fzh\u002Fguide\u002Fai","zh\u002F01.guide\u002F04.ai",{"title":33,"icon":34,"path":35,"stem":36,"children":37,"page":616},"组件","i-lucide-component","\u002Fzh\u002Fcomponents","zh\u002F02.components",[38,43,48,53,57,61,65,69,73,77,81,86,91,96,100,104,108,112,116,121,125,129,133,137,141,146,150,154,158,163,167,171,175,179,183,187,191,195,199,203,207,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,304,308,312,316,320,324,328,332,336,340,344,348,352,356,360,364,368,372,376,380,384,388,392,396,400,404,408,412,416,420,424,428,432,436,440,444,448,452,456,460,464,468,472,476,480,484,488,492,496,500,504,508,512,516,520,524,528,532,536,540,544,548,552,556,560,564,568,572,576,580,584,588,592,596,600,604,608,612],{"title":39,"path":40,"stem":41,"section":42},"手风琴 Accordion","\u002Fzh\u002Fcomponents\u002Faccordion","zh\u002F02.components\u002F01.accordion","布局",{"title":44,"path":45,"stem":46,"section":47},"固钉 Affix","\u002Fzh\u002Fcomponents\u002Faffix","zh\u002F02.components\u002F02.affix","导航",{"title":49,"path":50,"stem":51,"section":52},"AI 操作 AI Action","\u002Fzh\u002Fcomponents\u002Fai-action","zh\u002F02.components\u002F03.ai-action","AI",{"title":54,"path":55,"stem":56,"section":52},"AI 附件 AI Attachments","\u002Fzh\u002Fcomponents\u002Fai-attachments","zh\u002F02.components\u002F04.ai-attachments",{"title":58,"path":59,"stem":60,"section":52},"AI 消息 AI Message","\u002Fzh\u002Fcomponents\u002Fai-message","zh\u002F02.components\u002F05.ai-message",{"title":62,"path":63,"stem":64,"section":52},"AI 提示输入 AI Prompt Input","\u002Fzh\u002Fcomponents\u002Fai-prompt-input","zh\u002F02.components\u002F06.ai-prompt-input",{"title":66,"path":67,"stem":68,"section":52},"AI 思考 AI Reasoning","\u002Fzh\u002Fcomponents\u002Fai-reasoning","zh\u002F02.components\u002F07.ai-reasoning",{"title":70,"path":71,"stem":72,"section":52},"AI 回复 AI Response","\u002Fzh\u002Fcomponents\u002Fai-response","zh\u002F02.components\u002F08.ai-response",{"title":74,"path":75,"stem":76,"section":52},"AI 来源 AI Source","\u002Fzh\u002Fcomponents\u002Fai-source","zh\u002F02.components\u002F09.ai-source",{"title":78,"path":79,"stem":80,"section":52},"AI 建议 AI Suggestion","\u002Fzh\u002Fcomponents\u002Fai-suggestion","zh\u002F02.components\u002F10.ai-suggestion",{"title":82,"path":83,"stem":84,"section":85},"进度条 Progress","\u002Fzh\u002Fcomponents\u002Fprogress","zh\u002F02.components\u002F100.progress","反馈",{"title":87,"path":88,"stem":89,"section":90},"二维码 QR Code","\u002Fzh\u002Fcomponents\u002Fqr-code","zh\u002F02.components\u002F101.qr-code","媒体",{"title":92,"path":93,"stem":94,"section":95},"单选组 Radio Group","\u002Fzh\u002Fcomponents\u002Fradio-group","zh\u002F02.components\u002F102.radio-group","表单",{"title":97,"path":98,"stem":99,"section":95},"评分 Rating Group","\u002Fzh\u002Fcomponents\u002Frating-group","zh\u002F02.components\u002F103.rating-group",{"title":101,"path":102,"stem":103,"section":85},"结果 Result","\u002Fzh\u002Fcomponents\u002Fresult","zh\u002F02.components\u002F104.result",{"title":105,"path":106,"stem":107,"section":42},"滚动区域 Scroll Area","\u002Fzh\u002Fcomponents\u002Fscroll-area","zh\u002F02.components\u002F105.scroll-area",{"title":109,"path":110,"stem":111,"section":95},"分段控制器 Segment Group","\u002Fzh\u002Fcomponents\u002Fsegment-group","zh\u002F02.components\u002F106.segment-group",{"title":113,"path":114,"stem":115,"section":95},"选择器 Select","\u002Fzh\u002Fcomponents\u002Fselect","zh\u002F02.components\u002F107.select",{"title":117,"path":118,"stem":119,"section":120},"分隔线 Separator","\u002Fzh\u002Fcomponents\u002Fseparator","zh\u002F02.components\u002F108.separator","基础元件",{"title":122,"path":123,"stem":124,"section":95},"签名板 Signature Pad","\u002Fzh\u002Fcomponents\u002Fsignature-pad","zh\u002F02.components\u002F109.signature-pad",{"title":126,"path":127,"stem":128,"section":52},"AI 工具调用 AI Tool","\u002Fzh\u002Fcomponents\u002Fai-tool","zh\u002F02.components\u002F11.ai-tool",{"title":130,"path":131,"stem":132,"section":85},"骨架屏 Skeleton","\u002Fzh\u002Fcomponents\u002Fskeleton","zh\u002F02.components\u002F110.skeleton",{"title":134,"path":135,"stem":136,"section":95},"滑块 Slider","\u002Fzh\u002Fcomponents\u002Fslider","zh\u002F02.components\u002F111.slider",{"title":138,"path":139,"stem":140,"section":85},"加载器 Spinner","\u002Fzh\u002Fcomponents\u002Fspinner","zh\u002F02.components\u002F112.spinner",{"title":142,"path":143,"stem":144,"section":145},"拆分按钮 Split Button","\u002Fzh\u002Fcomponents\u002Fsplit-button","zh\u002F02.components\u002F113.split-button","动作",{"title":147,"path":148,"stem":149,"section":42},"分栏面板 Splitter","\u002Fzh\u002Fcomponents\u002Fsplitter","zh\u002F02.components\u002F114.splitter",{"title":151,"path":152,"stem":153,"section":42},"聚光灯 Spotlight","\u002Fzh\u002Fcomponents\u002Fspotlight","zh\u002F02.components\u002F115.spotlight",{"title":155,"path":156,"stem":157,"section":42},"层叠布局 Stack","\u002Fzh\u002Fcomponents\u002Fstack","zh\u002F02.components\u002F116.stack",{"title":159,"path":160,"stem":161,"section":162},"统计 Stat","\u002Fzh\u002Fcomponents\u002Fstat","zh\u002F02.components\u002F117.stat","数据",{"title":164,"path":165,"stem":166,"section":47},"步骤条 Steps","\u002Fzh\u002Fcomponents\u002Fsteps","zh\u002F02.components\u002F118.steps",{"title":168,"path":169,"stem":170,"section":145},"切换 Swap","\u002Fzh\u002Fcomponents\u002Fswap","zh\u002F02.components\u002F119.swap",{"title":172,"path":173,"stem":174,"section":52},"AI 会话 AI","\u002Fzh\u002Fcomponents\u002Fai","zh\u002F02.components\u002F12.ai",{"title":176,"path":177,"stem":178,"section":95},"开关 Switch","\u002Fzh\u002Fcomponents\u002Fswitch","zh\u002F02.components\u002F120.switch",{"title":180,"path":181,"stem":182,"section":162},"表格 Table","\u002Fzh\u002Fcomponents\u002Ftable","zh\u002F02.components\u002F121.table",{"title":184,"path":185,"stem":186,"section":47},"标签页 Tabs","\u002Fzh\u002Fcomponents\u002Ftabs","zh\u002F02.components\u002F122.tabs",{"title":188,"path":189,"stem":190,"section":95},"标签输入 Tags Input","\u002Fzh\u002Fcomponents\u002Ftags-input","zh\u002F02.components\u002F123.tags-input",{"title":192,"path":193,"stem":194,"section":162},"终端 Terminal","\u002Fzh\u002Fcomponents\u002Fterminal","zh\u002F02.components\u002F124.terminal",{"title":196,"path":197,"stem":198,"section":95},"文本域 Textarea","\u002Fzh\u002Fcomponents\u002Ftextarea","zh\u002F02.components\u002F125.textarea",{"title":200,"path":201,"stem":202,"section":162},"时间线 Timeline","\u002Fzh\u002Fcomponents\u002Ftimeline","zh\u002F02.components\u002F126.timeline",{"title":204,"path":205,"stem":206,"section":162},"计时器 Timer","\u002Fzh\u002Fcomponents\u002Ftimer","zh\u002F02.components\u002F127.timer",{"title":208,"path":209,"stem":210,"section":211},"全局提示 Toast","\u002Fzh\u002Fcomponents\u002Ftoast","zh\u002F02.components\u002F128.toast","浮层",{"title":213,"path":214,"stem":215,"section":47},"目录 Toc","\u002Fzh\u002Fcomponents\u002Ftoc","zh\u002F02.components\u002F129.toc",{"title":217,"path":218,"stem":219,"section":85},"提醒 Alert","\u002Fzh\u002Fcomponents\u002Falert","zh\u002F02.components\u002F13.alert",{"title":221,"path":222,"stem":223,"section":145},"切换按钮组 Toggle Group","\u002Fzh\u002Fcomponents\u002Ftoggle-group","zh\u002F02.components\u002F130.toggle-group",{"title":225,"path":226,"stem":227,"section":145},"切换按钮 Toggle","\u002Fzh\u002Fcomponents\u002Ftoggle","zh\u002F02.components\u002F131.toggle",{"title":229,"path":230,"stem":231,"section":145},"工具栏 Toolbar","\u002Fzh\u002Fcomponents\u002Ftoolbar","zh\u002F02.components\u002F132.toolbar",{"title":233,"path":234,"stem":235,"section":211},"文字提示 Tooltip","\u002Fzh\u002Fcomponents\u002Ftooltip","zh\u002F02.components\u002F133.tooltip",{"title":237,"path":238,"stem":239,"section":211},"引导 Tour","\u002Fzh\u002Fcomponents\u002Ftour","zh\u002F02.components\u002F134.tour",{"title":241,"path":242,"stem":243,"section":162},"穿梭框 Transfer","\u002Fzh\u002Fcomponents\u002Ftransfer","zh\u002F02.components\u002F135.transfer",{"title":245,"path":246,"stem":247,"section":95},"树选择 Tree Select","\u002Fzh\u002Fcomponents\u002Ftree-select","zh\u002F02.components\u002F136.tree-select",{"title":249,"path":250,"stem":251,"section":162},"树形控件 Tree View","\u002Fzh\u002Fcomponents\u002Ftree-view","zh\u002F02.components\u002F137.tree-view",{"title":253,"path":254,"stem":255,"section":42},"排版 Typography","\u002Fzh\u002Fcomponents\u002Ftypography","zh\u002F02.components\u002F138.typography",{"title":257,"path":258,"stem":259,"section":120},"用户 User","\u002Fzh\u002Fcomponents\u002Fuser","zh\u002F02.components\u002F139.user",{"title":261,"path":262,"stem":263,"section":95},"角度滑块 Angle Slider","\u002Fzh\u002Fcomponents\u002Fangle-slider","zh\u002F02.components\u002F14.angle-slider",{"title":265,"path":266,"stem":267,"section":162},"虚拟列表 Virtual List","\u002Fzh\u002Fcomponents\u002Fvirtual-list","zh\u002F02.components\u002F140.virtual-list",{"title":269,"path":270,"stem":271,"section":90},"水印 Watermark","\u002Fzh\u002Fcomponents\u002Fwatermark","zh\u002F02.components\u002F141.watermark",{"title":273,"path":274,"stem":275,"section":162},"工作流 Workflow","\u002Fzh\u002Fcomponents\u002Fworkflow","zh\u002F02.components\u002F142.workflow",{"title":277,"path":278,"stem":279,"section":42},"宽高比 Aspect Ratio","\u002Fzh\u002Fcomponents\u002Faspect-ratio","zh\u002F02.components\u002F15.aspect-ratio",{"title":281,"path":282,"stem":283,"section":95},"自动补全 Autocomplete","\u002Fzh\u002Fcomponents\u002Fautocomplete","zh\u002F02.components\u002F16.autocomplete",{"title":285,"path":286,"stem":287,"section":120},"头像组 Avatar Group","\u002Fzh\u002Fcomponents\u002Favatar-group","zh\u002F02.components\u002F17.avatar-group",{"title":289,"path":290,"stem":291,"section":120},"头像 Avatar","\u002Fzh\u002Fcomponents\u002Favatar","zh\u002F02.components\u002F18.avatar",{"title":293,"path":294,"stem":295,"section":47},"回到顶部 Back Top","\u002Fzh\u002Fcomponents\u002Fback-top","zh\u002F02.components\u002F19.back-top",{"title":297,"path":298,"stem":299,"section":120},"徽标 Badge","\u002Fzh\u002Fcomponents\u002Fbadge","zh\u002F02.components\u002F20.badge",{"title":301,"path":302,"stem":303,"section":85},"横幅 Banner","\u002Fzh\u002Fcomponents\u002Fbanner","zh\u002F02.components\u002F21.banner",{"title":305,"path":306,"stem":307,"section":42},"便当格 Bento","\u002Fzh\u002Fcomponents\u002Fbento","zh\u002F02.components\u002F22.bento",{"title":309,"path":310,"stem":311,"section":85},"区块锁定 Block Ui","\u002Fzh\u002Fcomponents\u002Fblock-ui","zh\u002F02.components\u002F23.block-ui",{"title":313,"path":314,"stem":315,"section":47},"面包屑 Breadcrumb","\u002Fzh\u002Fcomponents\u002Fbreadcrumb","zh\u002F02.components\u002F24.breadcrumb",{"title":317,"path":318,"stem":319,"section":90},"浏览器窗口 Browser","\u002Fzh\u002Fcomponents\u002Fbrowser","zh\u002F02.components\u002F25.browser",{"title":321,"path":322,"stem":323,"section":120},"按钮组 Button Group","\u002Fzh\u002Fcomponents\u002Fbutton-group","zh\u002F02.components\u002F26.button-group",{"title":325,"path":326,"stem":327,"section":120},"按钮 Button","\u002Fzh\u002Fcomponents\u002Fbutton","zh\u002F02.components\u002F27.button",{"title":329,"path":330,"stem":331,"section":95},"日历 Calendar","\u002Fzh\u002Fcomponents\u002Fcalendar","zh\u002F02.components\u002F28.calendar",{"title":333,"path":334,"stem":335,"section":120},"卡片 Card","\u002Fzh\u002Fcomponents\u002Fcard","zh\u002F02.components\u002F29.card",{"title":337,"path":338,"stem":339,"section":90},"走马灯 Carousel","\u002Fzh\u002Fcomponents\u002Fcarousel","zh\u002F02.components\u002F30.carousel",{"title":341,"path":342,"stem":343,"section":95},"级联选择 Cascade Select","\u002Fzh\u002Fcomponents\u002Fcascade-select","zh\u002F02.components\u002F31.cascade-select",{"title":345,"path":346,"stem":347,"section":162},"图表 Chart","\u002Fzh\u002Fcomponents\u002Fchart","zh\u002F02.components\u002F32.chart",{"title":349,"path":350,"stem":351,"section":95},"复选框组 Checkbox Group","\u002Fzh\u002Fcomponents\u002Fcheckbox-group","zh\u002F02.components\u002F33.checkbox-group",{"title":353,"path":354,"stem":355,"section":95},"复选框 Checkbox","\u002Fzh\u002Fcomponents\u002Fcheckbox","zh\u002F02.components\u002F34.checkbox",{"title":357,"path":358,"stem":359,"section":120},"角标 Chip","\u002Fzh\u002Fcomponents\u002Fchip","zh\u002F02.components\u002F35.chip",{"title":361,"path":362,"stem":363,"section":120},"客户端渲染 Client Only","\u002Fzh\u002Fcomponents\u002Fclient-only","zh\u002F02.components\u002F36.client-only",{"title":365,"path":366,"stem":367,"section":145},"剪贴板 Clipboard","\u002Fzh\u002Fcomponents\u002Fclipboard","zh\u002F02.components\u002F37.clipboard",{"title":369,"path":370,"stem":371,"section":42},"折叠面板 Collapsible","\u002Fzh\u002Fcomponents\u002Fcollapsible","zh\u002F02.components\u002F38.collapsible",{"title":373,"path":374,"stem":375,"section":162},"集合 Collection","\u002Fzh\u002Fcomponents\u002Fcollection","zh\u002F02.components\u002F39.collection",{"title":377,"path":378,"stem":379,"section":95},"颜色选择器 Color Picker","\u002Fzh\u002Fcomponents\u002Fcolor-picker","zh\u002F02.components\u002F40.color-picker",{"title":381,"path":382,"stem":383,"section":95},"组合框 Combobox","\u002Fzh\u002Fcomponents\u002Fcombobox","zh\u002F02.components\u002F41.combobox",{"title":385,"path":386,"stem":387,"section":211},"命令面板 Command","\u002Fzh\u002Fcomponents\u002Fcommand","zh\u002F02.components\u002F42.command",{"title":389,"path":390,"stem":391,"section":162},"评论 Comment","\u002Fzh\u002Fcomponents\u002Fcomment","zh\u002F02.components\u002F43.comment",{"title":393,"path":394,"stem":395,"section":120},"全局配置 Config Provider","\u002Fzh\u002Fcomponents\u002Fconfig-provider","zh\u002F02.components\u002F44.config-provider",{"title":397,"path":398,"stem":399,"section":42},"容器 Container","\u002Fzh\u002Fcomponents\u002Fcontainer","zh\u002F02.components\u002F45.container",{"title":401,"path":402,"stem":403,"section":162},"数据视图 Data View","\u002Fzh\u002Fcomponents\u002Fdata-view","zh\u002F02.components\u002F46.data-view",{"title":405,"path":406,"stem":407,"section":95},"日期输入 Date Input","\u002Fzh\u002Fcomponents\u002Fdate-input","zh\u002F02.components\u002F47.date-input",{"title":409,"path":410,"stem":411,"section":95},"日期选择器 Date Picker","\u002Fzh\u002Fcomponents\u002Fdate-picker","zh\u002F02.components\u002F48.date-picker",{"title":413,"path":414,"stem":415,"section":120},"延迟渲染 Deferred Content","\u002Fzh\u002Fcomponents\u002Fdeferred-content","zh\u002F02.components\u002F49.deferred-content",{"title":417,"path":418,"stem":419,"section":162},"描述列表 Descriptions","\u002Fzh\u002Fcomponents\u002Fdescriptions","zh\u002F02.components\u002F50.descriptions",{"title":421,"path":422,"stem":423,"section":211},"对话框 Dialog","\u002Fzh\u002Fcomponents\u002Fdialog","zh\u002F02.components\u002F51.dialog",{"title":425,"path":426,"stem":427,"section":145},"程序坞 Dock","\u002Fzh\u002Fcomponents\u002Fdock","zh\u002F02.components\u002F52.dock",{"title":429,"path":430,"stem":431,"section":145},"下载触发器 Download Trigger","\u002Fzh\u002Fcomponents\u002Fdownload-trigger","zh\u002F02.components\u002F53.download-trigger",{"title":433,"path":434,"stem":435,"section":211},"抽屉 Drawer","\u002Fzh\u002Fcomponents\u002Fdrawer","zh\u002F02.components\u002F54.drawer",{"title":437,"path":438,"stem":439,"section":95},"动态输入 Dynamic Input","\u002Fzh\u002Fcomponents\u002Fdynamic-input","zh\u002F02.components\u002F55.dynamic-input",{"title":441,"path":442,"stem":443,"section":95},"可编辑文本 Editable","\u002Fzh\u002Fcomponents\u002Feditable","zh\u002F02.components\u002F56.editable",{"title":445,"path":446,"stem":447,"section":42},"文本省略 Ellipsis","\u002Fzh\u002Fcomponents\u002Fellipsis","zh\u002F02.components\u002F57.ellipsis",{"title":449,"path":450,"stem":451,"section":85},"空状态 Empty","\u002Fzh\u002Fcomponents\u002Fempty","zh\u002F02.components\u002F58.empty",{"title":453,"path":454,"stem":455,"section":95},"字段 Field","\u002Fzh\u002Fcomponents\u002Ffield","zh\u002F02.components\u002F59.field",{"title":457,"path":458,"stem":459,"section":95},"字段组 Fieldset","\u002Fzh\u002Fcomponents\u002Ffieldset","zh\u002F02.components\u002F60.fieldset",{"title":461,"path":462,"stem":463,"section":95},"文件上传 File Upload","\u002Fzh\u002Fcomponents\u002Ffile-upload","zh\u002F02.components\u002F61.file-upload",{"title":465,"path":466,"stem":467,"section":145},"悬浮按钮 Float Button","\u002Fzh\u002Fcomponents\u002Ffloat-button","zh\u002F02.components\u002F62.float-button",{"title":469,"path":470,"stem":471,"section":211},"悬浮面板 Floating Panel","\u002Fzh\u002Fcomponents\u002Ffloating-panel","zh\u002F02.components\u002F63.floating-panel",{"title":473,"path":474,"stem":475,"section":211},"焦点陷阱 Focus Trap","\u002Fzh\u002Fcomponents\u002Ffocus-trap","zh\u002F02.components\u002F64.focus-trap",{"title":477,"path":478,"stem":479,"section":95},"表单 Form","\u002Fzh\u002Fcomponents\u002Fform","zh\u002F02.components\u002F65.form",{"title":481,"path":482,"stem":483,"section":120},"格式化 Format","\u002Fzh\u002Fcomponents\u002Fformat","zh\u002F02.components\u002F66.format",{"title":485,"path":486,"stem":487,"section":42},"画框 Frame","\u002Fzh\u002Fcomponents\u002Fframe","zh\u002F02.components\u002F67.frame",{"title":489,"path":490,"stem":491,"section":42},"栅格 Grid","\u002Fzh\u002Fcomponents\u002Fgrid","zh\u002F02.components\u002F68.grid",{"title":493,"path":494,"stem":495,"section":120},"高亮文本 Highlight","\u002Fzh\u002Fcomponents\u002Fhighlight","zh\u002F02.components\u002F69.highlight",{"title":497,"path":498,"stem":499,"section":211},"悬停卡片 Hover Card","\u002Fzh\u002Fcomponents\u002Fhover-card","zh\u002F02.components\u002F70.hover-card",{"title":501,"path":502,"stem":503,"section":120},"图标 Icon","\u002Fzh\u002Fcomponents\u002Ficon","zh\u002F02.components\u002F71.icon",{"title":505,"path":506,"stem":507,"section":90},"图片裁剪 Image Cropper","\u002Fzh\u002Fcomponents\u002Fimage-cropper","zh\u002F02.components\u002F72.image-cropper",{"title":509,"path":510,"stem":511,"section":90},"图片查看器 Image Viewer","\u002Fzh\u002Fcomponents\u002Fimage-viewer","zh\u002F02.components\u002F73.image-viewer",{"title":513,"path":514,"stem":515,"section":90},"图片 Image","\u002Fzh\u002Fcomponents\u002Fimage","zh\u002F02.components\u002F74.image",{"title":517,"path":518,"stem":519,"section":95},"输入框组 Input Group","\u002Fzh\u002Fcomponents\u002Finput-group","zh\u002F02.components\u002F75.input-group",{"title":521,"path":522,"stem":523,"section":95},"输入框 Input","\u002Fzh\u002Fcomponents\u002Finput","zh\u002F02.components\u002F76.input",{"title":525,"path":526,"stem":527,"section":162},"JSON 树视图 Json Tree View","\u002Fzh\u002Fcomponents\u002Fjson-tree-view","zh\u002F02.components\u002F77.json-tree-view",{"title":529,"path":530,"stem":531,"section":120},"按键 Kbd","\u002Fzh\u002Fcomponents\u002Fkbd","zh\u002F02.components\u002F78.kbd",{"title":533,"path":534,"stem":535,"section":42},"布局 Layout","\u002Fzh\u002Fcomponents\u002Flayout","zh\u002F02.components\u002F79.layout",{"title":537,"path":538,"stem":539,"section":47},"链接 Link","\u002Fzh\u002Fcomponents\u002Flink","zh\u002F02.components\u002F80.link",{"title":541,"path":542,"stem":543,"section":162},"列表 List","\u002Fzh\u002Fcomponents\u002Flist","zh\u002F02.components\u002F81.list",{"title":545,"path":546,"stem":547,"section":95},"列表框 Listbox","\u002Fzh\u002Fcomponents\u002Flistbox","zh\u002F02.components\u002F82.listbox",{"title":549,"path":550,"stem":551,"section":90},"滚动横幅 Marquee","\u002Fzh\u002Fcomponents\u002Fmarquee","zh\u002F02.components\u002F83.marquee",{"title":553,"path":554,"stem":555,"section":42},"瀑布流 Masonry","\u002Fzh\u002Fcomponents\u002Fmasonry","zh\u002F02.components\u002F84.masonry",{"title":557,"path":558,"stem":559,"section":95},"提及 Mentions","\u002Fzh\u002Fcomponents\u002Fmentions","zh\u002F02.components\u002F85.mentions",{"title":561,"path":562,"stem":563,"section":211},"菜单 Menu","\u002Fzh\u002Fcomponents\u002Fmenu","zh\u002F02.components\u002F86.menu",{"title":565,"path":566,"stem":567,"section":47},"菜单栏 Menubar","\u002Fzh\u002Fcomponents\u002Fmenubar","zh\u002F02.components\u002F87.menubar",{"title":569,"path":570,"stem":571,"section":85},"度量 Meter","\u002Fzh\u002Fcomponents\u002Fmeter","zh\u002F02.components\u002F88.meter",{"title":573,"path":574,"stem":575,"section":47},"导航菜单 Navigation Menu","\u002Fzh\u002Fcomponents\u002Fnavigation-menu","zh\u002F02.components\u002F89.navigation-menu",{"title":577,"path":578,"stem":579,"section":95},"数字输入 Number Input","\u002Fzh\u002Fcomponents\u002Fnumber-input","zh\u002F02.components\u002F90.number-input",{"title":581,"path":582,"stem":583,"section":162},"排序列表 Order List","\u002Fzh\u002Fcomponents\u002Forder-list","zh\u002F02.components\u002F91.order-list",{"title":585,"path":586,"stem":587,"section":42},"页头 Page Header","\u002Fzh\u002Fcomponents\u002Fpage-header","zh\u002F02.components\u002F92.page-header",{"title":589,"path":590,"stem":591,"section":47},"分页 Pagination","\u002Fzh\u002Fcomponents\u002Fpagination","zh\u002F02.components\u002F93.pagination",{"title":593,"path":594,"stem":595,"section":95},"密码输入 Password Input","\u002Fzh\u002Fcomponents\u002Fpassword-input","zh\u002F02.components\u002F94.password-input",{"title":597,"path":598,"stem":599,"section":95},"验证码输入 Pin Input","\u002Fzh\u002Fcomponents\u002Fpin-input","zh\u002F02.components\u002F95.pin-input",{"title":601,"path":602,"stem":603,"section":211},"气泡确认 Popconfirm","\u002Fzh\u002Fcomponents\u002Fpopconfirm","zh\u002F02.components\u002F96.popconfirm",{"title":605,"path":606,"stem":607,"section":211},"气泡卡片 Popover","\u002Fzh\u002Fcomponents\u002Fpopover","zh\u002F02.components\u002F97.popover",{"title":609,"path":610,"stem":611,"section":120},"挂载过渡 Presence","\u002Fzh\u002Fcomponents\u002Fpresence","zh\u002F02.components\u002F98.presence",{"title":613,"path":614,"stem":615,"section":85},"进度组 Progress Group","\u002Fzh\u002Fcomponents\u002Fprogress-group","zh\u002F02.components\u002F99.progress-group",false,{"title":618,"icon":619,"path":620,"stem":621,"children":622,"page":616},"参考","i-lucide-book-marked","\u002Fzh\u002Freference","zh\u002F03.reference",[623,626,629,632,635,638,641,644,647,650,653,656,659,662,665,668,671,674,677,680,683,686,689,692,695,698,701,704,707,710,713,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794,797,800,803,806,809,812,815,818,821,824,827,830,833,836,839,842,845,848,851,854,857,860,863,866,869,872,875,878,881,884,887,890,893,896,899,902,905,908,911,914,917,920,923,926,929,932,935,938,941,944,947,950,953,956,959,962,965,968,971,974,977,980,983,986,989,992,995,998,1001,1004,1007,1010,1013,1016,1019,1022,1025,1028,1031,1034,1037,1040,1043,1046],{"title":39,"path":624,"stem":625,"section":42},"\u002Fzh\u002Freference\u002Faccordion","zh\u002F03.reference\u002F01.accordion",{"title":44,"path":627,"stem":628,"section":47},"\u002Fzh\u002Freference\u002Faffix","zh\u002F03.reference\u002F02.affix",{"title":49,"path":630,"stem":631,"section":52},"\u002Fzh\u002Freference\u002Fai-action","zh\u002F03.reference\u002F03.ai-action",{"title":54,"path":633,"stem":634,"section":52},"\u002Fzh\u002Freference\u002Fai-attachments","zh\u002F03.reference\u002F04.ai-attachments",{"title":58,"path":636,"stem":637,"section":52},"\u002Fzh\u002Freference\u002Fai-message","zh\u002F03.reference\u002F05.ai-message",{"title":62,"path":639,"stem":640,"section":52},"\u002Fzh\u002Freference\u002Fai-prompt-input","zh\u002F03.reference\u002F06.ai-prompt-input",{"title":66,"path":642,"stem":643,"section":52},"\u002Fzh\u002Freference\u002Fai-reasoning","zh\u002F03.reference\u002F07.ai-reasoning",{"title":70,"path":645,"stem":646,"section":52},"\u002Fzh\u002Freference\u002Fai-response","zh\u002F03.reference\u002F08.ai-response",{"title":74,"path":648,"stem":649,"section":52},"\u002Fzh\u002Freference\u002Fai-source","zh\u002F03.reference\u002F09.ai-source",{"title":78,"path":651,"stem":652,"section":52},"\u002Fzh\u002Freference\u002Fai-suggestion","zh\u002F03.reference\u002F10.ai-suggestion",{"title":82,"path":654,"stem":655,"section":85},"\u002Fzh\u002Freference\u002Fprogress","zh\u002F03.reference\u002F100.progress",{"title":87,"path":657,"stem":658,"section":90},"\u002Fzh\u002Freference\u002Fqr-code","zh\u002F03.reference\u002F101.qr-code",{"title":92,"path":660,"stem":661,"section":95},"\u002Fzh\u002Freference\u002Fradio-group","zh\u002F03.reference\u002F102.radio-group",{"title":97,"path":663,"stem":664,"section":95},"\u002Fzh\u002Freference\u002Frating-group","zh\u002F03.reference\u002F103.rating-group",{"title":101,"path":666,"stem":667,"section":85},"\u002Fzh\u002Freference\u002Fresult","zh\u002F03.reference\u002F104.result",{"title":105,"path":669,"stem":670,"section":42},"\u002Fzh\u002Freference\u002Fscroll-area","zh\u002F03.reference\u002F105.scroll-area",{"title":109,"path":672,"stem":673,"section":95},"\u002Fzh\u002Freference\u002Fsegment-group","zh\u002F03.reference\u002F106.segment-group",{"title":113,"path":675,"stem":676,"section":95},"\u002Fzh\u002Freference\u002Fselect","zh\u002F03.reference\u002F107.select",{"title":117,"path":678,"stem":679,"section":120},"\u002Fzh\u002Freference\u002Fseparator","zh\u002F03.reference\u002F108.separator",{"title":122,"path":681,"stem":682,"section":95},"\u002Fzh\u002Freference\u002Fsignature-pad","zh\u002F03.reference\u002F109.signature-pad",{"title":126,"path":684,"stem":685,"section":52},"\u002Fzh\u002Freference\u002Fai-tool","zh\u002F03.reference\u002F11.ai-tool",{"title":130,"path":687,"stem":688,"section":85},"\u002Fzh\u002Freference\u002Fskeleton","zh\u002F03.reference\u002F110.skeleton",{"title":134,"path":690,"stem":691,"section":95},"\u002Fzh\u002Freference\u002Fslider","zh\u002F03.reference\u002F111.slider",{"title":138,"path":693,"stem":694,"section":85},"\u002Fzh\u002Freference\u002Fspinner","zh\u002F03.reference\u002F112.spinner",{"title":142,"path":696,"stem":697,"section":145},"\u002Fzh\u002Freference\u002Fsplit-button","zh\u002F03.reference\u002F113.split-button",{"title":147,"path":699,"stem":700,"section":42},"\u002Fzh\u002Freference\u002Fsplitter","zh\u002F03.reference\u002F114.splitter",{"title":151,"path":702,"stem":703,"section":42},"\u002Fzh\u002Freference\u002Fspotlight","zh\u002F03.reference\u002F115.spotlight",{"title":155,"path":705,"stem":706,"section":42},"\u002Fzh\u002Freference\u002Fstack","zh\u002F03.reference\u002F116.stack",{"title":159,"path":708,"stem":709,"section":162},"\u002Fzh\u002Freference\u002Fstat","zh\u002F03.reference\u002F117.stat",{"title":164,"path":711,"stem":712,"section":47},"\u002Fzh\u002Freference\u002Fsteps","zh\u002F03.reference\u002F118.steps",{"title":168,"path":714,"stem":715,"section":145},"\u002Fzh\u002Freference\u002Fswap","zh\u002F03.reference\u002F119.swap",{"title":172,"path":717,"stem":718,"section":52},"\u002Fzh\u002Freference\u002Fai","zh\u002F03.reference\u002F12.ai",{"title":176,"path":720,"stem":721,"section":95},"\u002Fzh\u002Freference\u002Fswitch","zh\u002F03.reference\u002F120.switch",{"title":180,"path":723,"stem":724,"section":162},"\u002Fzh\u002Freference\u002Ftable","zh\u002F03.reference\u002F121.table",{"title":184,"path":726,"stem":727,"section":47},"\u002Fzh\u002Freference\u002Ftabs","zh\u002F03.reference\u002F122.tabs",{"title":188,"path":729,"stem":730,"section":95},"\u002Fzh\u002Freference\u002Ftags-input","zh\u002F03.reference\u002F123.tags-input",{"title":192,"path":732,"stem":733,"section":162},"\u002Fzh\u002Freference\u002Fterminal","zh\u002F03.reference\u002F124.terminal",{"title":196,"path":735,"stem":736,"section":95},"\u002Fzh\u002Freference\u002Ftextarea","zh\u002F03.reference\u002F125.textarea",{"title":200,"path":738,"stem":739,"section":162},"\u002Fzh\u002Freference\u002Ftimeline","zh\u002F03.reference\u002F126.timeline",{"title":204,"path":741,"stem":742,"section":162},"\u002Fzh\u002Freference\u002Ftimer","zh\u002F03.reference\u002F127.timer",{"title":208,"path":744,"stem":745,"section":211},"\u002Fzh\u002Freference\u002Ftoast","zh\u002F03.reference\u002F128.toast",{"title":213,"path":747,"stem":748,"section":47},"\u002Fzh\u002Freference\u002Ftoc","zh\u002F03.reference\u002F129.toc",{"title":217,"path":750,"stem":751,"section":85},"\u002Fzh\u002Freference\u002Falert","zh\u002F03.reference\u002F13.alert",{"title":221,"path":753,"stem":754,"section":145},"\u002Fzh\u002Freference\u002Ftoggle-group","zh\u002F03.reference\u002F130.toggle-group",{"title":225,"path":756,"stem":757,"section":145},"\u002Fzh\u002Freference\u002Ftoggle","zh\u002F03.reference\u002F131.toggle",{"title":229,"path":759,"stem":760,"section":145},"\u002Fzh\u002Freference\u002Ftoolbar","zh\u002F03.reference\u002F132.toolbar",{"title":233,"path":762,"stem":763,"section":211},"\u002Fzh\u002Freference\u002Ftooltip","zh\u002F03.reference\u002F133.tooltip",{"title":237,"path":765,"stem":766,"section":211},"\u002Fzh\u002Freference\u002Ftour","zh\u002F03.reference\u002F134.tour",{"title":241,"path":768,"stem":769,"section":162},"\u002Fzh\u002Freference\u002Ftransfer","zh\u002F03.reference\u002F135.transfer",{"title":245,"path":771,"stem":772,"section":95},"\u002Fzh\u002Freference\u002Ftree-select","zh\u002F03.reference\u002F136.tree-select",{"title":249,"path":774,"stem":775,"section":162},"\u002Fzh\u002Freference\u002Ftree-view","zh\u002F03.reference\u002F137.tree-view",{"title":253,"path":777,"stem":778,"section":42},"\u002Fzh\u002Freference\u002Ftypography","zh\u002F03.reference\u002F138.typography",{"title":257,"path":780,"stem":781,"section":120},"\u002Fzh\u002Freference\u002Fuser","zh\u002F03.reference\u002F139.user",{"title":261,"path":783,"stem":784,"section":95},"\u002Fzh\u002Freference\u002Fangle-slider","zh\u002F03.reference\u002F14.angle-slider",{"title":265,"path":786,"stem":787,"section":162},"\u002Fzh\u002Freference\u002Fvirtual-list","zh\u002F03.reference\u002F140.virtual-list",{"title":269,"path":789,"stem":790,"section":90},"\u002Fzh\u002Freference\u002Fwatermark","zh\u002F03.reference\u002F141.watermark",{"title":273,"path":792,"stem":793,"section":162},"\u002Fzh\u002Freference\u002Fworkflow","zh\u002F03.reference\u002F142.workflow",{"title":277,"path":795,"stem":796,"section":42},"\u002Fzh\u002Freference\u002Faspect-ratio","zh\u002F03.reference\u002F15.aspect-ratio",{"title":281,"path":798,"stem":799,"section":95},"\u002Fzh\u002Freference\u002Fautocomplete","zh\u002F03.reference\u002F16.autocomplete",{"title":285,"path":801,"stem":802,"section":120},"\u002Fzh\u002Freference\u002Favatar-group","zh\u002F03.reference\u002F17.avatar-group",{"title":289,"path":804,"stem":805,"section":120},"\u002Fzh\u002Freference\u002Favatar","zh\u002F03.reference\u002F18.avatar",{"title":293,"path":807,"stem":808,"section":47},"\u002Fzh\u002Freference\u002Fback-top","zh\u002F03.reference\u002F19.back-top",{"title":297,"path":810,"stem":811,"section":120},"\u002Fzh\u002Freference\u002Fbadge","zh\u002F03.reference\u002F20.badge",{"title":301,"path":813,"stem":814,"section":85},"\u002Fzh\u002Freference\u002Fbanner","zh\u002F03.reference\u002F21.banner",{"title":305,"path":816,"stem":817,"section":42},"\u002Fzh\u002Freference\u002Fbento","zh\u002F03.reference\u002F22.bento",{"title":309,"path":819,"stem":820,"section":85},"\u002Fzh\u002Freference\u002Fblock-ui","zh\u002F03.reference\u002F23.block-ui",{"title":313,"path":822,"stem":823,"section":47},"\u002Fzh\u002Freference\u002Fbreadcrumb","zh\u002F03.reference\u002F24.breadcrumb",{"title":317,"path":825,"stem":826,"section":90},"\u002Fzh\u002Freference\u002Fbrowser","zh\u002F03.reference\u002F25.browser",{"title":321,"path":828,"stem":829,"section":120},"\u002Fzh\u002Freference\u002Fbutton-group","zh\u002F03.reference\u002F26.button-group",{"title":325,"path":831,"stem":832,"section":120},"\u002Fzh\u002Freference\u002Fbutton","zh\u002F03.reference\u002F27.button",{"title":329,"path":834,"stem":835,"section":95},"\u002Fzh\u002Freference\u002Fcalendar","zh\u002F03.reference\u002F28.calendar",{"title":333,"path":837,"stem":838,"section":120},"\u002Fzh\u002Freference\u002Fcard","zh\u002F03.reference\u002F29.card",{"title":337,"path":840,"stem":841,"section":90},"\u002Fzh\u002Freference\u002Fcarousel","zh\u002F03.reference\u002F30.carousel",{"title":341,"path":843,"stem":844,"section":95},"\u002Fzh\u002Freference\u002Fcascade-select","zh\u002F03.reference\u002F31.cascade-select",{"title":345,"path":846,"stem":847,"section":162},"\u002Fzh\u002Freference\u002Fchart","zh\u002F03.reference\u002F32.chart",{"title":349,"path":849,"stem":850,"section":95},"\u002Fzh\u002Freference\u002Fcheckbox-group","zh\u002F03.reference\u002F33.checkbox-group",{"title":353,"path":852,"stem":853,"section":95},"\u002Fzh\u002Freference\u002Fcheckbox","zh\u002F03.reference\u002F34.checkbox",{"title":357,"path":855,"stem":856,"section":120},"\u002Fzh\u002Freference\u002Fchip","zh\u002F03.reference\u002F35.chip",{"title":361,"path":858,"stem":859,"section":120},"\u002Fzh\u002Freference\u002Fclient-only","zh\u002F03.reference\u002F36.client-only",{"title":365,"path":861,"stem":862,"section":145},"\u002Fzh\u002Freference\u002Fclipboard","zh\u002F03.reference\u002F37.clipboard",{"title":369,"path":864,"stem":865,"section":42},"\u002Fzh\u002Freference\u002Fcollapsible","zh\u002F03.reference\u002F38.collapsible",{"title":373,"path":867,"stem":868,"section":162},"\u002Fzh\u002Freference\u002Fcollection","zh\u002F03.reference\u002F39.collection",{"title":377,"path":870,"stem":871,"section":95},"\u002Fzh\u002Freference\u002Fcolor-picker","zh\u002F03.reference\u002F40.color-picker",{"title":381,"path":873,"stem":874,"section":95},"\u002Fzh\u002Freference\u002Fcombobox","zh\u002F03.reference\u002F41.combobox",{"title":385,"path":876,"stem":877,"section":211},"\u002Fzh\u002Freference\u002Fcommand","zh\u002F03.reference\u002F42.command",{"title":389,"path":879,"stem":880,"section":162},"\u002Fzh\u002Freference\u002Fcomment","zh\u002F03.reference\u002F43.comment",{"title":393,"path":882,"stem":883,"section":120},"\u002Fzh\u002Freference\u002Fconfig-provider","zh\u002F03.reference\u002F44.config-provider",{"title":397,"path":885,"stem":886,"section":42},"\u002Fzh\u002Freference\u002Fcontainer","zh\u002F03.reference\u002F45.container",{"title":401,"path":888,"stem":889,"section":162},"\u002Fzh\u002Freference\u002Fdata-view","zh\u002F03.reference\u002F46.data-view",{"title":405,"path":891,"stem":892,"section":95},"\u002Fzh\u002Freference\u002Fdate-input","zh\u002F03.reference\u002F47.date-input",{"title":409,"path":894,"stem":895,"section":95},"\u002Fzh\u002Freference\u002Fdate-picker","zh\u002F03.reference\u002F48.date-picker",{"title":413,"path":897,"stem":898,"section":120},"\u002Fzh\u002Freference\u002Fdeferred-content","zh\u002F03.reference\u002F49.deferred-content",{"title":417,"path":900,"stem":901,"section":162},"\u002Fzh\u002Freference\u002Fdescriptions","zh\u002F03.reference\u002F50.descriptions",{"title":421,"path":903,"stem":904,"section":211},"\u002Fzh\u002Freference\u002Fdialog","zh\u002F03.reference\u002F51.dialog",{"title":425,"path":906,"stem":907,"section":145},"\u002Fzh\u002Freference\u002Fdock","zh\u002F03.reference\u002F52.dock",{"title":429,"path":909,"stem":910,"section":145},"\u002Fzh\u002Freference\u002Fdownload-trigger","zh\u002F03.reference\u002F53.download-trigger",{"title":433,"path":912,"stem":913,"section":211},"\u002Fzh\u002Freference\u002Fdrawer","zh\u002F03.reference\u002F54.drawer",{"title":437,"path":915,"stem":916,"section":95},"\u002Fzh\u002Freference\u002Fdynamic-input","zh\u002F03.reference\u002F55.dynamic-input",{"title":441,"path":918,"stem":919,"section":95},"\u002Fzh\u002Freference\u002Feditable","zh\u002F03.reference\u002F56.editable",{"title":445,"path":921,"stem":922,"section":42},"\u002Fzh\u002Freference\u002Fellipsis","zh\u002F03.reference\u002F57.ellipsis",{"title":449,"path":924,"stem":925,"section":85},"\u002Fzh\u002Freference\u002Fempty","zh\u002F03.reference\u002F58.empty",{"title":453,"path":927,"stem":928,"section":95},"\u002Fzh\u002Freference\u002Ffield","zh\u002F03.reference\u002F59.field",{"title":457,"path":930,"stem":931,"section":95},"\u002Fzh\u002Freference\u002Ffieldset","zh\u002F03.reference\u002F60.fieldset",{"title":461,"path":933,"stem":934,"section":95},"\u002Fzh\u002Freference\u002Ffile-upload","zh\u002F03.reference\u002F61.file-upload",{"title":465,"path":936,"stem":937,"section":145},"\u002Fzh\u002Freference\u002Ffloat-button","zh\u002F03.reference\u002F62.float-button",{"title":469,"path":939,"stem":940,"section":211},"\u002Fzh\u002Freference\u002Ffloating-panel","zh\u002F03.reference\u002F63.floating-panel",{"title":473,"path":942,"stem":943,"section":211},"\u002Fzh\u002Freference\u002Ffocus-trap","zh\u002F03.reference\u002F64.focus-trap",{"title":477,"path":945,"stem":946,"section":95},"\u002Fzh\u002Freference\u002Fform","zh\u002F03.reference\u002F65.form",{"title":481,"path":948,"stem":949,"section":120},"\u002Fzh\u002Freference\u002Fformat","zh\u002F03.reference\u002F66.format",{"title":485,"path":951,"stem":952,"section":42},"\u002Fzh\u002Freference\u002Fframe","zh\u002F03.reference\u002F67.frame",{"title":489,"path":954,"stem":955,"section":42},"\u002Fzh\u002Freference\u002Fgrid","zh\u002F03.reference\u002F68.grid",{"title":493,"path":957,"stem":958,"section":120},"\u002Fzh\u002Freference\u002Fhighlight","zh\u002F03.reference\u002F69.highlight",{"title":497,"path":960,"stem":961,"section":211},"\u002Fzh\u002Freference\u002Fhover-card","zh\u002F03.reference\u002F70.hover-card",{"title":501,"path":963,"stem":964,"section":120},"\u002Fzh\u002Freference\u002Ficon","zh\u002F03.reference\u002F71.icon",{"title":505,"path":966,"stem":967,"section":90},"\u002Fzh\u002Freference\u002Fimage-cropper","zh\u002F03.reference\u002F72.image-cropper",{"title":509,"path":969,"stem":970,"section":90},"\u002Fzh\u002Freference\u002Fimage-viewer","zh\u002F03.reference\u002F73.image-viewer",{"title":513,"path":972,"stem":973,"section":90},"\u002Fzh\u002Freference\u002Fimage","zh\u002F03.reference\u002F74.image",{"title":517,"path":975,"stem":976,"section":95},"\u002Fzh\u002Freference\u002Finput-group","zh\u002F03.reference\u002F75.input-group",{"title":521,"path":978,"stem":979,"section":95},"\u002Fzh\u002Freference\u002Finput","zh\u002F03.reference\u002F76.input",{"title":525,"path":981,"stem":982,"section":162},"\u002Fzh\u002Freference\u002Fjson-tree-view","zh\u002F03.reference\u002F77.json-tree-view",{"title":529,"path":984,"stem":985,"section":120},"\u002Fzh\u002Freference\u002Fkbd","zh\u002F03.reference\u002F78.kbd",{"title":533,"path":987,"stem":988,"section":42},"\u002Fzh\u002Freference\u002Flayout","zh\u002F03.reference\u002F79.layout",{"title":537,"path":990,"stem":991,"section":47},"\u002Fzh\u002Freference\u002Flink","zh\u002F03.reference\u002F80.link",{"title":541,"path":993,"stem":994,"section":162},"\u002Fzh\u002Freference\u002Flist","zh\u002F03.reference\u002F81.list",{"title":545,"path":996,"stem":997,"section":95},"\u002Fzh\u002Freference\u002Flistbox","zh\u002F03.reference\u002F82.listbox",{"title":549,"path":999,"stem":1000,"section":90},"\u002Fzh\u002Freference\u002Fmarquee","zh\u002F03.reference\u002F83.marquee",{"title":553,"path":1002,"stem":1003,"section":42},"\u002Fzh\u002Freference\u002Fmasonry","zh\u002F03.reference\u002F84.masonry",{"title":557,"path":1005,"stem":1006,"section":95},"\u002Fzh\u002Freference\u002Fmentions","zh\u002F03.reference\u002F85.mentions",{"title":561,"path":1008,"stem":1009,"section":211},"\u002Fzh\u002Freference\u002Fmenu","zh\u002F03.reference\u002F86.menu",{"title":565,"path":1011,"stem":1012,"section":47},"\u002Fzh\u002Freference\u002Fmenubar","zh\u002F03.reference\u002F87.menubar",{"title":569,"path":1014,"stem":1015,"section":85},"\u002Fzh\u002Freference\u002Fmeter","zh\u002F03.reference\u002F88.meter",{"title":573,"path":1017,"stem":1018,"section":47},"\u002Fzh\u002Freference\u002Fnavigation-menu","zh\u002F03.reference\u002F89.navigation-menu",{"title":577,"path":1020,"stem":1021,"section":95},"\u002Fzh\u002Freference\u002Fnumber-input","zh\u002F03.reference\u002F90.number-input",{"title":581,"path":1023,"stem":1024,"section":162},"\u002Fzh\u002Freference\u002Forder-list","zh\u002F03.reference\u002F91.order-list",{"title":585,"path":1026,"stem":1027,"section":42},"\u002Fzh\u002Freference\u002Fpage-header","zh\u002F03.reference\u002F92.page-header",{"title":589,"path":1029,"stem":1030,"section":47},"\u002Fzh\u002Freference\u002Fpagination","zh\u002F03.reference\u002F93.pagination",{"title":593,"path":1032,"stem":1033,"section":95},"\u002Fzh\u002Freference\u002Fpassword-input","zh\u002F03.reference\u002F94.password-input",{"title":597,"path":1035,"stem":1036,"section":95},"\u002Fzh\u002Freference\u002Fpin-input","zh\u002F03.reference\u002F95.pin-input",{"title":601,"path":1038,"stem":1039,"section":211},"\u002Fzh\u002Freference\u002Fpopconfirm","zh\u002F03.reference\u002F96.popconfirm",{"title":605,"path":1041,"stem":1042,"section":211},"\u002Fzh\u002Freference\u002Fpopover","zh\u002F03.reference\u002F97.popover",{"title":609,"path":1044,"stem":1045,"section":120},"\u002Fzh\u002Freference\u002Fpresence","zh\u002F03.reference\u002F98.presence",{"title":613,"path":1047,"stem":1048,"section":85},"\u002Fzh\u002Freference\u002Fprogress-group","zh\u002F03.reference\u002F99.progress-group",{"id":1050,"title":273,"body":1051,"description":1070,"extension":1071,"meta":1072,"navigation":1073,"path":274,"seo":1074,"stem":275,"__hash__":1075},"docs_zh\u002Fzh\u002F02.components\u002F142.workflow.md",{"type":1052,"value":1053,"toc":1065},"minimark",[1054,1058,1062],[1055,1056,1057],"h2",{"id":1057},"基础用法",[1059,1060],"component-demo",{"name":1061},"workflow\u002Fbasic",[1059,1063],{"name":1064},"workflow\u002Fmindmap",{"title":1066,"searchDepth":1067,"depth":1067,"links":1068},"",2,[1069],{"id":1057,"depth":1067,"text":1057},"工作流画布：createWorkflowCanvas 把 X6 图挂载到任意元素，并让无头协议存储与每个手势（拖拽、连线、选中、撤销）保持同步。宿主通过 renderNode 把任意组件装进节点；执行器通过存储写回状态，画布只负责呈现。","md",{},{"section":162},{"title":273,"description":1070},"aswrePPJ19huZsBVX8VKe-tyZHAJDM1BHJnN6CaOjBM",[1077,1079],{"title":269,"path":270,"stem":271,"description":1078,"section":90,"children":-1},"Watermark：水印层，显示在内容下方。canvas 先把文字绘制成一张图块（旋转、浅淡，并按屏幕像素密度保持清晰），标记层在默认插槽上重复平铺。prop 变化时水印会重绘，并且不接收指针事件。",{"title":277,"path":278,"stem":279,"description":1080,"section":42,"children":-1},"AspectRatio：固定宽高比的容器。无论外部宽度如何，盒子都保持指定比例，子元素填满容器。","\u003Cpre class=\"th-code th-code--vue\" data-language=\"vue\">\u003Ccode><\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan> setup \u003Cspan class=\"th-token th-attr\">lang\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"ts"\u003C\u002Fspan>>\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { \u003Cspan class=\"th-token th-type\">Button\u003C\u002Fspan> } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"@bysages\u002Fvue"\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> \u003Cspan class=\"th-token th-keyword\">type\u003C\u002Fspan> { \u003Cspan class=\"th-token th-type\">WorkflowCanvas\u003C\u002Fspan>, \u003Cspan class=\"th-token th-type\">WorkflowGraph\u003C\u002Fspan> } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"@bysages\u002Fworkflow"\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { onBeforeUnmount, onMounted, ref } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"vue"\u003C\u002Fspan>;\n\n\u003Cspan class=\"th-token th-comment\">\u002F\u002F Three nodes on paper. Ports carry the direction the protocol validates\u003C\u002Fspan>\n\u003Cspan class=\"th-token th-comment\">\u002F\u002F against: connections run out → in, ins take the top (or left), outs\u003C\u002Fspan>\n\u003Cspan class=\"th-token th-comment\">\u002F\u002F the bottom (or right).\u003C\u002Fspan>\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> fixture = (): \u003Cspan class=\"th-token th-type\">WorkflowGraph\u003C\u002Fspan> => ({\n  \u003Cspan class=\"th-token th-property\">nodes\u003C\u002Fspan>: [\n    {\n      \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"start"\u003C\u002Fspan>,\n      \u003Cspan class=\"th-token th-property\">type\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"start"\u003C\u002Fspan>,\n      \u003Cspan class=\"th-token th-property\">position\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">x\u003C\u002Fspan>: \u003Cspan class=\"th-token th-number\">60\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">y\u003C\u002Fspan>: \u003Cspan class=\"th-token th-number\">40\u003C\u002Fspan> },\n      \u003Cspan class=\"th-token th-property\">ports\u003C\u002Fspan>: [{ \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"out-1"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">dir\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"out"\u003C\u002Fspan> }],\n      \u003Cspan class=\"th-token th-property\">data\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"Start"\u003C\u002Fspan> },\n    },\n    {\n      \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"prompt"\u003C\u002Fspan>,\n      \u003Cspan class=\"th-token th-property\">type\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"prompt"\u003C\u002Fspan>,\n      \u003Cspan class=\"th-token th-property\">position\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">x\u003C\u002Fspan>: \u003Cspan class=\"th-token th-number\">60\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">y\u003C\u002Fspan>: \u003Cspan class=\"th-token th-number\">210\u003C\u002Fspan> },\n      \u003Cspan class=\"th-token th-property\">ports\u003C\u002Fspan>: [\n        { \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"in-1"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">dir\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"in"\u003C\u002Fspan> },\n        { \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"out-1"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">dir\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"out"\u003C\u002Fspan> },\n      ],\n      \u003Cspan class=\"th-token th-property\">data\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"Draft the reply"\u003C\u002Fspan> },\n    },\n    {\n      \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"tool"\u003C\u002Fspan>,\n      \u003Cspan class=\"th-token th-property\">type\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"tool"\u003C\u002Fspan>,\n      \u003Cspan class=\"th-token th-property\">position\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">x\u003C\u002Fspan>: \u003Cspan class=\"th-token th-number\">60\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">y\u003C\u002Fspan>: \u003Cspan class=\"th-token th-number\">400\u003C\u002Fspan> },\n      \u003Cspan class=\"th-token th-property\">ports\u003C\u002Fspan>: [{ \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"in-1"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">dir\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"in"\u003C\u002Fspan> }],\n      \u003Cspan class=\"th-token th-property\">data\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"search_web"\u003C\u002Fspan> },\n    },\n  ],\n  \u003Cspan class=\"th-token th-property\">edges\u003C\u002Fspan>: [\n    {\n      \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"e1"\u003C\u002Fspan>,\n      \u003Cspan class=\"th-token th-property\">source\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">node\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"start"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">port\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"out-1"\u003C\u002Fspan> },\n      \u003Cspan class=\"th-token th-property\">target\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">node\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"prompt"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">port\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"in-1"\u003C\u002Fspan> },\n    },\n    {\n      \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"e2"\u003C\u002Fspan>,\n      \u003Cspan class=\"th-token th-property\">source\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">node\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"prompt"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">port\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"out-1"\u003C\u002Fspan> },\n      \u003Cspan class=\"th-token th-property\">target\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">node\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"tool"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">port\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"in-1"\u003C\u002Fspan> },\n    },\n  ],\n});\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> host = ref<\u003Cspan class=\"th-token th-type\">HTMLElement\u003C\u002Fspan> | \u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>>(\u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>);\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> mapHost = ref<\u003Cspan class=\"th-token th-type\">HTMLElement\u003C\u002Fspan> | \u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>>(\u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>);\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> zoom = \u003Cspan class=\"th-token th-function\">ref\u003C\u002Fspan>(\u003Cspan class=\"th-token th-number\">100\u003C\u002Fspan>);\n\u003Cspan class=\"th-token th-keyword\">let\u003C\u002Fspan> canvas: \u003Cspan class=\"th-token th-type\">WorkflowCanvas\u003C\u002Fspan> | \u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan> = \u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">let\u003C\u002Fspan> disposed = \u003Cspan class=\"th-token th-literal\">false\u003C\u002Fspan>;\n\n\u003Cspan class=\"th-token th-comment\">\u002F\u002F X6 is browser-only, so the engine is pulled in from the client only —\u003C\u002Fspan>\n\u003Cspan class=\"th-token th-comment\">\u002F\u002F a static import here would drag it into the server module graph.\u003C\u002Fspan>\n\u003Cspan class=\"th-token th-function\">onMounted\u003C\u002Fspan>(\u003Cspan class=\"th-token th-keyword\">async\u003C\u002Fspan> () => {\n  \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (!host.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>) \u003Cspan class=\"th-token th-keyword\">return\u003C\u002Fspan>;\n  \u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> { createWorkflowCanvas, createWorkflowStore } = \u003Cspan class=\"th-token th-keyword\">await\u003C\u002Fspan> \u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">"@bysages\u002Fworkflow"\u003C\u002Fspan>);\n  \u003Cspan class=\"th-token th-comment\">\u002F\u002F The chunk load may outlive the visit — never mount onto a departed host.\u003C\u002Fspan>\n  \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (disposed || !host.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>) \u003Cspan class=\"th-token th-keyword\">return\u003C\u002Fspan>;\n  canvas = \u003Cspan class=\"th-token th-function\">createWorkflowCanvas\u003C\u002Fspan>(host.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>, \u003Cspan class=\"th-token th-function\">createWorkflowStore\u003C\u002Fspan>(\u003Cspan class=\"th-token th-function\">fixture\u003C\u002Fspan>()), {\n    \u003Cspan class=\"th-token th-comment\">\u002F\u002F The host mounts its own content into each card — a plain label\u003C\u002Fspan>\n    \u003Cspan class=\"th-token th-comment\">\u002F\u002F here; any component works through this one hook.\u003C\u002Fspan>\n    \u003Cspan class=\"th-token th-property\">renderNode\u003C\u002Fspan>: (card, node) => {\n      \u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> label = document.\u003Cspan class=\"th-token th-property\">createElement\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">"span"\u003C\u002Fspan>);\n      label.\u003Cspan class=\"th-token th-property\">textContent\u003C\u002Fspan> = \u003Cspan class=\"th-token th-function\">String\u003C\u002Fspan>(node.\u003Cspan class=\"th-token th-property\">data\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan> ?? node.\u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>);\n      card.\u003Cspan class=\"th-token th-property\">append\u003C\u002Fspan>(label);\n    },\n    \u003Cspan class=\"th-token th-property\">minimap\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">container\u003C\u002Fspan>: mapHost.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>! },\n  });\n  canvas.\u003Cspan class=\"th-token th-property\">graph\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">on\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">"scale"\u003C\u002Fspan>, () => {\n    zoom.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan> = \u003Cspan class=\"th-token th-type\">Math\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">round\u003C\u002Fspan>(canvas.\u003Cspan class=\"th-token th-property\">graph\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">zoom\u003C\u002Fspan>() * \u003Cspan class=\"th-token th-number\">100\u003C\u002Fspan>);\n  });\n});\n\n\u003Cspan class=\"th-token th-function\">onBeforeUnmount\u003C\u002Fspan>(() => {\n  disposed = \u003Cspan class=\"th-token th-literal\">true\u003C\u002Fspan>;\n  canvas?.\u003Cspan class=\"th-token th-property\">destroy\u003C\u002Fspan>();\n});\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> zoomTo = (factor: \u003Cspan class=\"th-token th-type\">number\u003C\u002Fspan>) => canvas?.\u003Cspan class=\"th-token th-property\">zoomBy\u003C\u002Fspan>(factor);\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> fit = () => canvas?.\u003Cspan class=\"th-token th-property\">fitView\u003C\u002Fspan>();\n<\u002F\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan>>\n\n<\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n  <\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"relative w-full h-144"\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">ref\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"host"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"absolute inset-0"\u003C\u002Fspan>><\u002F\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>\n      \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"absolute bottom-3 start-3 flex items-center gap-1 rounded-md border border-border bg-surface-2 p-1 shadow-xs"\u003C\u002Fspan>\n    >\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan> square \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Zoom out"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"zoomTo(1 \u002F 1.2)"\u003C\u002Fspan>>\n        −\n      <\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">span\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"min-w-[3em] text-center text-xs text-secondary"\u003C\u002Fspan>> {{ zoom }}% <\u002F\u003Cspan class=\"th-token th-tag\">span\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan> square \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Zoom in"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"zoomTo(1.2)"\u003C\u002Fspan>\n        >+<\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>\n      >\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan> square \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Fit view"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"fit"\u003C\u002Fspan>>⤢<\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Auto layout"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"ms-1"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"canvas?.layout()"\u003C\u002Fspan>\n      >\n        Auto layout\n      <\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">ref\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"mapHost"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"absolute bottom-3 end-3 h-36 w-52"\u003C\u002Fspan>><\u002F\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>>\n  <\u002F\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>>\n<\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"th-code th-code--vue\" data-language=\"vue\">\u003Ccode><\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan> setup \u003Cspan class=\"th-token th-attr\">lang\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"ts"\u003C\u002Fspan>>\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { \u003Cspan class=\"th-token th-type\">Button\u003C\u002Fspan> } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"@bysages\u002Fvue"\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> \u003Cspan class=\"th-token th-keyword\">type\u003C\u002Fspan> { \u003Cspan class=\"th-token th-type\">WorkflowCanvas\u003C\u002Fspan> } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"@bysages\u002Fworkflow"\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan> { onBeforeUnmount, onMounted, ref } \u003Cspan class=\"th-token th-keyword\">from\u003C\u002Fspan> \u003Cspan class=\"th-token th-string\">"vue"\u003C\u002Fspan>;\n\n\u003Cspan class=\"th-token th-comment\">\u002F\u002F The outline is the whole input: headings and nested lists become the\u003C\u002Fspan>\n\u003Cspan class=\"th-token th-comment\">\u002F\u002F tree, and a json fence rides along as its section's payload.\u003C\u002Fspan>\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> outline = \u003Cspan class=\"th-token th-string\">`\n# Paper & Ink\n\n## Design language\n- Surfaces rest in ambient shade\n- Ink is the only hierarchy\n\n## Tokens\n- Spacing\n  - Semantic tiers\n  - Raw ramp\n- Elevation\n\n\\`\\`\\`json\n{ "spacing": 8, "elevation": 5 }\n\\`\\`\\`\n\n## Lighting\n- Source model\n- Pigment bleed\n`\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">trim\u003C\u002Fspan>();\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> host = ref<\u003Cspan class=\"th-token th-type\">HTMLElement\u003C\u002Fspan> | \u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>>(\u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>);\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> mapHost = ref<\u003Cspan class=\"th-token th-type\">HTMLElement\u003C\u002Fspan> | \u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>>(\u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>);\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> zoom = \u003Cspan class=\"th-token th-function\">ref\u003C\u002Fspan>(\u003Cspan class=\"th-token th-number\">100\u003C\u002Fspan>);\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> outlineText = \u003Cspan class=\"th-token th-function\">ref\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">""\u003C\u002Fspan>);\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> showOutline = \u003Cspan class=\"th-token th-function\">ref\u003C\u002Fspan>(\u003Cspan class=\"th-token th-literal\">false\u003C\u002Fspan>);\n\u003Cspan class=\"th-token th-keyword\">let\u003C\u002Fspan> canvas: \u003Cspan class=\"th-token th-type\">WorkflowCanvas\u003C\u002Fspan> | \u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan> = \u003Cspan class=\"th-token th-literal\">null\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">let\u003C\u002Fspan> disposed = \u003Cspan class=\"th-token th-literal\">false\u003C\u002Fspan>;\n\u003Cspan class=\"th-token th-keyword\">let\u003C\u002Fspan> grown = \u003Cspan class=\"th-token th-number\">0\u003C\u002Fspan>;\n\n\u003Cspan class=\"th-token th-comment\">\u002F\u002F X6 is browser-only, so the engine is pulled in from the client only —\u003C\u002Fspan>\n\u003Cspan class=\"th-token th-comment\">\u002F\u002F a static import here would drag it into the server module graph.\u003C\u002Fspan>\n\u003Cspan class=\"th-token th-function\">onMounted\u003C\u002Fspan>(\u003Cspan class=\"th-token th-keyword\">async\u003C\u002Fspan> () => {\n  \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (!host.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>) \u003Cspan class=\"th-token th-keyword\">return\u003C\u002Fspan>;\n  \u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> { createWorkflowCanvas, createWorkflowStore, outlineToGraph } =\n    \u003Cspan class=\"th-token th-keyword\">await\u003C\u002Fspan> \u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">"@bysages\u002Fworkflow"\u003C\u002Fspan>);\n  \u003Cspan class=\"th-token th-comment\">\u002F\u002F The chunk load may outlive the visit — never mount onto a departed host.\u003C\u002Fspan>\n  \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (disposed || !host.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>) \u003Cspan class=\"th-token th-keyword\">return\u003C\u002Fspan>;\n  canvas = \u003Cspan class=\"th-token th-function\">createWorkflowCanvas\u003C\u002Fspan>(host.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>, \u003Cspan class=\"th-token th-function\">createWorkflowStore\u003C\u002Fspan>(\u003Cspan class=\"th-token th-function\">outlineToGraph\u003C\u002Fspan>(outline)), {\n    \u003Cspan class=\"th-token th-property\">renderNode\u003C\u002Fspan>: (card, node) => {\n      \u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> label = document.\u003Cspan class=\"th-token th-property\">createElement\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">"span"\u003C\u002Fspan>);\n      label.\u003Cspan class=\"th-token th-property\">textContent\u003C\u002Fspan> = \u003Cspan class=\"th-token th-keyword\">typeof\u003C\u002Fspan> node.\u003Cspan class=\"th-token th-property\">data\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan> === \u003Cspan class=\"th-token th-string\">"string"\u003C\u002Fspan> ? node.\u003Cspan class=\"th-token th-property\">data\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan> : node.\u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>;\n      card.\u003Cspan class=\"th-token th-property\">append\u003C\u002Fspan>(label);\n      \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (node.\u003Cspan class=\"th-token th-property\">data\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">payload\u003C\u002Fspan> !== \u003Cspan class=\"th-token th-literal\">undefined\u003C\u002Fspan>) {\n        \u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> note = document.\u003Cspan class=\"th-token th-property\">createElement\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">"span"\u003C\u002Fspan>);\n        note.\u003Cspan class=\"th-token th-property\">className\u003C\u002Fspan> = \u003Cspan class=\"th-token th-string\">"text-xs text-tertiary"\u003C\u002Fspan>;\n        note.\u003Cspan class=\"th-token th-property\">textContent\u003C\u002Fspan> = \u003Cspan class=\"th-token th-type\">JSON\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">stringify\u003C\u002Fspan>(node.\u003Cspan class=\"th-token th-property\">data\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">payload\u003C\u002Fspan>);\n        card.\u003Cspan class=\"th-token th-property\">append\u003C\u002Fspan>(note);\n      }\n    },\n    \u003Cspan class=\"th-token th-property\">orientation\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"LR"\u003C\u002Fspan>,\n    \u003Cspan class=\"th-token th-property\">minimap\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">container\u003C\u002Fspan>: mapHost.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>! },\n  });\n  canvas.\u003Cspan class=\"th-token th-property\">graph\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">on\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">"scale"\u003C\u002Fspan>, () => {\n    zoom.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan> = \u003Cspan class=\"th-token th-type\">Math\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">round\u003C\u002Fspan>(canvas.\u003Cspan class=\"th-token th-property\">graph\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">zoom\u003C\u002Fspan>() * \u003Cspan class=\"th-token th-number\">100\u003C\u002Fspan>);\n  });\n  \u003Cspan class=\"th-token th-comment\">\u002F\u002F Double-click grows a branch: the store's own primitives carry the\u003C\u002Fspan>\n  \u003Cspan class=\"th-token th-comment\">\u002F\u002F whole edit, and the tree sweep re-hands out the geometry.\u003C\u002Fspan>\n  canvas.\u003Cspan class=\"th-token th-property\">graph\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">on\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">"node:dblclick"\u003C\u002Fspan>, ({ node }) => {\n    \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (!canvas) \u003Cspan class=\"th-token th-keyword\">return\u003C\u002Fspan>;\n    grown += \u003Cspan class=\"th-token th-number\">1\u003C\u002Fspan>;\n    \u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> id = \u003Cspan class=\"th-token th-string\">`grown-\u003C\u002Fspan>\u003Cspan class=\"th-token th-operator\">${\u003C\u002Fspan>grown\u003Cspan class=\"th-token th-operator\">}\u003C\u002Fspan>\u003Cspan class=\"th-token th-string\">`\u003C\u002Fspan>;\n    canvas.\u003Cspan class=\"th-token th-property\">store\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">addNode\u003C\u002Fspan>({\n      id,\n      \u003Cspan class=\"th-token th-property\">type\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"mindmap"\u003C\u002Fspan>,\n      \u003Cspan class=\"th-token th-property\">position\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">x\u003C\u002Fspan>: \u003Cspan class=\"th-token th-number\">0\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">y\u003C\u002Fspan>: \u003Cspan class=\"th-token th-number\">0\u003C\u002Fspan> },\n      \u003Cspan class=\"th-token th-property\">ports\u003C\u002Fspan>: [\n        { \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"in"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">dir\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"in"\u003C\u002Fspan> },\n        { \u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"out"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">dir\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"out"\u003C\u002Fspan> },\n      ],\n      \u003Cspan class=\"th-token th-property\">data\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">label\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"New branch"\u003C\u002Fspan> },\n    });\n    canvas.\u003Cspan class=\"th-token th-property\">store\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">connect\u003C\u002Fspan>({\n      \u003Cspan class=\"th-token th-property\">source\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">node\u003C\u002Fspan>: node.\u003Cspan class=\"th-token th-property\">id\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">port\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"out"\u003C\u002Fspan> },\n      \u003Cspan class=\"th-token th-property\">target\u003C\u002Fspan>: { \u003Cspan class=\"th-token th-property\">node\u003C\u002Fspan>: id, \u003Cspan class=\"th-token th-property\">port\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"in"\u003C\u002Fspan> },\n    });\n    \u003Cspan class=\"th-token th-type\">void\u003C\u002Fspan> canvas.\u003Cspan class=\"th-token th-property\">layout\u003C\u002Fspan>({ \u003Cspan class=\"th-token th-property\">algorithm\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"org.eclipse.elk.mrtree"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">direction\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"LR"\u003C\u002Fspan> });\n  });\n  \u003Cspan class=\"th-token th-comment\">\u002F\u002F The tree sweep hands out the geometry the outline implies — root on\u003C\u002Fspan>\n  \u003Cspan class=\"th-token th-comment\">\u002F\u002F the left, branches growing right.\u003C\u002Fspan>\n  \u003Cspan class=\"th-token th-keyword\">await\u003C\u002Fspan> canvas.\u003Cspan class=\"th-token th-property\">layout\u003C\u002Fspan>({ \u003Cspan class=\"th-token th-property\">algorithm\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"org.eclipse.elk.mrtree"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">direction\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"LR"\u003C\u002Fspan> });\n  canvas.\u003Cspan class=\"th-token th-property\">fitView\u003C\u002Fspan>();\n});\n\n\u003Cspan class=\"th-token th-function\">onBeforeUnmount\u003C\u002Fspan>(() => {\n  disposed = \u003Cspan class=\"th-token th-literal\">true\u003C\u002Fspan>;\n  canvas?.\u003Cspan class=\"th-token th-property\">destroy\u003C\u002Fspan>();\n});\n\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> zoomTo = (factor: \u003Cspan class=\"th-token th-type\">number\u003C\u002Fspan>) => canvas?.\u003Cspan class=\"th-token th-property\">zoomBy\u003C\u002Fspan>(factor);\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> fit = () => canvas?.\u003Cspan class=\"th-token th-property\">fitView\u003C\u002Fspan>();\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> sweep = () => \u003Cspan class=\"th-token th-type\">void\u003C\u002Fspan> canvas?.\u003Cspan class=\"th-token th-property\">layout\u003C\u002Fspan>({ \u003Cspan class=\"th-token th-property\">algorithm\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"org.eclipse.elk.mrtree"\u003C\u002Fspan>, \u003Cspan class=\"th-token th-property\">direction\u003C\u002Fspan>: \u003Cspan class=\"th-token th-string\">"LR"\u003C\u002Fspan> });\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> toggleOutline = \u003Cspan class=\"th-token th-keyword\">async\u003C\u002Fspan> () => {\n  \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (!canvas) \u003Cspan class=\"th-token th-keyword\">return\u003C\u002Fspan>;\n  showOutline.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan> = !showOutline.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>;\n  \u003Cspan class=\"th-token th-keyword\">if\u003C\u002Fspan> (showOutline.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>) {\n    \u003Cspan class=\"th-token th-comment\">\u002F\u002F The module is already in the client by now — this hits the cache.\u003C\u002Fspan>\n    \u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> { graphToOutline } = \u003Cspan class=\"th-token th-keyword\">await\u003C\u002Fspan> \u003Cspan class=\"th-token th-keyword\">import\u003C\u002Fspan>(\u003Cspan class=\"th-token th-string\">"@bysages\u002Fworkflow"\u003C\u002Fspan>);\n    outlineText.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan> = \u003Cspan class=\"th-token th-function\">graphToOutline\u003C\u002Fspan>(canvas.\u003Cspan class=\"th-token th-property\">store\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">getGraph\u003C\u002Fspan>());\n  }\n};\n\u003Cspan class=\"th-token th-keyword\">const\u003C\u002Fspan> copyOutline = () => \u003Cspan class=\"th-token th-type\">void\u003C\u002Fspan> navigator.\u003Cspan class=\"th-token th-property\">clipboard\u003C\u002Fspan>.\u003Cspan class=\"th-token th-property\">writeText\u003C\u002Fspan>(outlineText.\u003Cspan class=\"th-token th-property\">value\u003C\u002Fspan>);\n<\u002F\u003Cspan class=\"th-token th-tag\">script\u003C\u002Fspan>>\n\n<\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n  <\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"relative w-full h-144"\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">ref\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"host"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"absolute inset-0"\u003C\u002Fspan>><\u002F\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>\n      \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"absolute bottom-3 start-3 flex items-center gap-1 rounded-md border border-border bg-surface-2 p-1 shadow-xs"\u003C\u002Fspan>\n    >\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan> square \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Zoom out"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"zoomTo(1 \u002F 1.2)"\u003C\u002Fspan>>\n        −\n      <\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">span\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"min-w-[3em] text-center text-xs text-secondary"\u003C\u002Fspan>> {{ zoom }}% <\u002F\u003Cspan class=\"th-token th-tag\">span\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan> square \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Zoom in"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"zoomTo(1.2)"\u003C\u002Fspan>\n        >+<\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>\n      >\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan> square \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Fit view"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"fit"\u003C\u002Fspan>>⤢<\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Re-sweep the tree"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"ms-1"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sweep"\u003C\u002Fspan>\n      >\n        Re-sweep\n      <\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Show the outline markdown"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"ms-1"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"toggleOutline"\u003C\u002Fspan>\n      >\n        Outline\n      <\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n      <\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">v-if\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"showOutline"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">variant\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"outline"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">size\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"sm"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">aria-label\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"Copy the outline markdown"\u003C\u002Fspan>\n        \u003Cspan class=\"th-token th-attr\">@click\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"copyOutline"\u003C\u002Fspan>\n      >\n        Copy\n      <\u002F\u003Cspan class=\"th-token th-tag\">Button\u003C\u002Fspan>>\n    <\u002F\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">pre\u003C\u002Fspan>\n      \u003Cspan class=\"th-token th-attr\">v-if\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"showOutline"\u003C\u002Fspan>\n      \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"absolute inset-x-3 top-3 z-10 max-h-60 overflow-auto rounded-md border border-border bg-surface-1 p-3 text-xs text-secondary"\u003C\u002Fspan>\n      >{{ outlineText }}<\u002F\u003Cspan class=\"th-token th-tag\">pre\u003C\u002Fspan>>\n    <\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">ref\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"mapHost"\u003C\u002Fspan> \u003Cspan class=\"th-token th-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"th-token th-string\">"absolute bottom-3 end-3 h-36 w-52"\u003C\u002Fspan>><\u002F\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>>\n  <\u002F\u003Cspan class=\"th-token th-tag\">div\u003C\u002Fspan>>\n<\u002F\u003Cspan class=\"th-token th-tag\">template\u003C\u002Fspan>>\n\u003C\u002Fcode>\u003C\u002Fpre>",1790878660163]