[{"data":1,"prerenderedAt":3075},["ShallowReactive",2],{"navigation-source":3,"navigation-pt":271,"docs-\u002Fpt\u002Fdocs\u002Fguides\u002Fdrop-decisions":474,"docs-surround-\u002Fpt\u002Fdocs\u002Fguides\u002Fdrop-decisions":2977,"example-drop-confirm":2982,"example-drop-rules":3004,"example-drop-partial":3018,"example-drop-hooks":3033,"example-drop-server":3050,"example-drop-outside":3064},[4],{"title":5,"path":6,"stem":7,"children":8,"page":35},"Docs","\u002Fdocs","docs",[9,36,122,198,251],{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":35},"Getting started","i-lucide-rocket","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[15,20,25,30],{"title":16,"path":17,"stem":18,"icon":19},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":21,"path":22,"stem":23,"icon":24},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":26,"path":27,"stem":28,"icon":29},"Quick start","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002F1.getting-started\u002F3.quick-start","i-lucide-zap",{"title":31,"path":32,"stem":33,"icon":34},"Migrating from v2","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","docs\u002F1.getting-started\u002F4.migrating-from-v2","i-lucide-arrow-right-left",false,{"title":37,"icon":38,"path":39,"stem":40,"children":41,"page":35},"Guides","i-lucide-book-marked","\u002Fdocs\u002Fguides","docs\u002F2.guides",[42,47,52,57,62,67,72,77,82,87,92,97,102,107,112,117],{"title":43,"path":44,"stem":45,"icon":46},"The provider","\u002Fdocs\u002Fguides\u002Fprovider","docs\u002F2.guides\u002F01.provider","i-lucide-layers",{"title":48,"path":49,"stem":50,"icon":51},"Drag and drop","\u002Fdocs\u002Fguides\u002Fdrag-and-drop","docs\u002F2.guides\u002F02.drag-and-drop","i-lucide-move",{"title":53,"path":54,"stem":55,"icon":56},"Sortable lists","\u002Fdocs\u002Fguides\u002Fsortable-lists","docs\u002F2.guides\u002F03.sortable-lists","i-lucide-list-ordered",{"title":58,"path":59,"stem":60,"icon":61},"Lists that share items","\u002Fdocs\u002Fguides\u002Fshared-lists","docs\u002F2.guides\u002F04.shared-lists","i-lucide-kanban",{"title":63,"path":64,"stem":65,"icon":66},"Trees","\u002Fdocs\u002Fguides\u002Ftrees","docs\u002F2.guides\u002F05.trees","i-lucide-folder-tree",{"title":68,"path":69,"stem":70,"icon":71},"Multi-drag and selection","\u002Fdocs\u002Fguides\u002Fmulti-drag","docs\u002F2.guides\u002F06.multi-drag","i-lucide-copy",{"title":73,"path":74,"stem":75,"icon":76},"The overlay","\u002Fdocs\u002Fguides\u002Foverlay","docs\u002F2.guides\u002F07.overlay","i-lucide-mouse-pointer-2",{"title":78,"path":79,"stem":80,"icon":81},"Axes, bounds and grids","\u002Fdocs\u002Fguides\u002Fconstraints","docs\u002F2.guides\u002F08.constraints","i-lucide-axis-3d",{"title":83,"path":84,"stem":85,"icon":86},"Deciding a drop","\u002Fdocs\u002Fguides\u002Fdrop-decisions","docs\u002F2.guides\u002F09.drop-decisions","i-lucide-check-check",{"title":88,"path":89,"stem":90,"icon":91},"Animations","\u002Fdocs\u002Fguides\u002Fanimations","docs\u002F2.guides\u002F10.animations","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Accessibility","\u002Fdocs\u002Fguides\u002Faccessibility","docs\u002F2.guides\u002F11.accessibility","i-lucide-accessibility",{"title":98,"path":99,"stem":100,"icon":101},"Virtual lists","\u002Fdocs\u002Fguides\u002Fvirtual-lists","docs\u002F2.guides\u002F12.virtual-lists","i-lucide-rows-3",{"title":103,"path":104,"stem":105,"icon":106},"Styling","\u002Fdocs\u002Fguides\u002Fstyling","docs\u002F2.guides\u002F13.styling","i-lucide-palette",{"title":108,"path":109,"stem":110,"icon":111},"Sensors and programmatic drags","\u002Fdocs\u002Fguides\u002Fsensors","docs\u002F2.guides\u002F14.sensors","i-lucide-joystick",{"title":113,"path":114,"stem":115,"icon":116},"DevTools","\u002Fdocs\u002Fguides\u002Fdevtools","docs\u002F2.guides\u002F15.devtools","i-lucide-bug",{"title":118,"path":119,"stem":120,"icon":121},"Files and other apps","\u002Fdocs\u002Fguides\u002Fnative","docs\u002F2.guides\u002F16.native","i-lucide-app-window",{"title":123,"icon":124,"path":125,"stem":126,"children":127,"page":35},"API","i-lucide-braces","\u002Fdocs\u002Fapi","docs\u002F3.api",[128,133,137,142,146,151,156,161,166,171,175,180,184,188,193],{"title":129,"path":130,"stem":131,"icon":132},"DnDProvider","\u002Fdocs\u002Fapi\u002Fdnd-provider","docs\u002F3.api\u002F01.dnd-provider","i-lucide-box",{"title":134,"path":135,"stem":136,"icon":51},"makeDraggable","\u002Fdocs\u002Fapi\u002Fmake-draggable","docs\u002F3.api\u002F02.make-draggable",{"title":138,"path":139,"stem":140,"icon":141},"makeDroppable","\u002Fdocs\u002Fapi\u002Fmake-droppable","docs\u002F3.api\u002F03.make-droppable","i-lucide-inbox",{"title":143,"path":144,"stem":145,"icon":56},"makeSortableList","\u002Fdocs\u002Fapi\u002Fmake-sortable-list","docs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":148,"stem":149,"icon":150},"makeSortableItem","\u002Fdocs\u002Fapi\u002Fmake-sortable-item","docs\u002F3.api\u002F05.make-sortable-item","i-lucide-grip-vertical",{"title":152,"path":153,"stem":154,"icon":155},"makeSortableTree","\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","docs\u002F3.api\u002F06.make-sortable-tree","i-lucide-list-tree",{"title":157,"path":158,"stem":159,"icon":160},"makeSelectionArea","\u002Fdocs\u002Fapi\u002Fmake-selection-area","docs\u002F3.api\u002F07.make-selection-area","i-lucide-square-dashed-mouse-pointer",{"title":162,"path":163,"stem":164,"icon":165},"makeDragArea","\u002Fdocs\u002Fapi\u002Fmake-drag-area","docs\u002F3.api\u002F08.make-drag-area","i-lucide-frame",{"title":167,"path":168,"stem":169,"icon":170},"useDnD and monitors","\u002Fdocs\u002Fapi\u002Fuse-dnd","docs\u002F3.api\u002F09.use-dnd","i-lucide-radio",{"title":172,"path":173,"stem":174,"icon":29},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F3.api\u002F10.events",{"title":176,"path":177,"stem":178,"icon":179},"Modifiers and collision","\u002Fdocs\u002Fapi\u002Fmodifiers","docs\u002F3.api\u002F11.modifiers","i-lucide-sliders-horizontal",{"title":181,"path":182,"stem":183,"icon":71},"DragPreview and overlay props","\u002Fdocs\u002Fapi\u002Fdrag-preview","docs\u002F3.api\u002F12.drag-preview",{"title":88,"path":185,"stem":186,"icon":187},"\u002Fdocs\u002Fapi\u002Fanimations","docs\u002F3.api\u002F13.animations","i-lucide-wand-sparkles",{"title":189,"path":190,"stem":191,"icon":192},"Sensors","\u002Fdocs\u002Fapi\u002Fsensors","docs\u002F3.api\u002F14.sensors","i-lucide-gamepad-2",{"title":194,"path":195,"stem":196,"icon":197},"Common types","\u002Fdocs\u002Fapi\u002Ftypes","docs\u002F3.api\u002F15.types","i-lucide-shapes",{"title":199,"path":200,"stem":201,"children":202,"icon":205},"Examples","\u002Fdocs\u002Fexamples","docs\u002F4.examples\u002F00.index",[203,206,211,216,221,226,231,236,241,246],{"title":204,"path":200,"stem":201,"icon":205},"Overview","i-lucide-layout-grid",{"title":207,"path":208,"stem":209,"icon":210},"Project board","\u002Fdocs\u002Fexamples\u002Fboard","docs\u002F4.examples\u002F01.board","i-lucide-square-kanban",{"title":212,"path":213,"stem":214,"icon":215},"Week calendar","\u002Fdocs\u002Fexamples\u002Fcalendar","docs\u002F4.examples\u002F02.calendar","i-lucide-calendar-days",{"title":217,"path":218,"stem":219,"icon":220},"File manager","\u002Fdocs\u002Fexamples\u002Ffile-manager","docs\u002F4.examples\u002F03.file-manager","i-lucide-folder-open",{"title":222,"path":223,"stem":224,"icon":225},"Block editor","\u002Fdocs\u002Fexamples\u002Fblock-editor","docs\u002F4.examples\u002F04.block-editor","i-lucide-blocks",{"title":227,"path":228,"stem":229,"icon":230},"Chess","\u002Fdocs\u002Fexamples\u002Fchess","docs\u002F4.examples\u002F05.chess","i-lucide-chess-knight",{"title":232,"path":233,"stem":234,"icon":235},"Form builder","\u002Fdocs\u002Fexamples\u002Fform-builder","docs\u002F4.examples\u002F06.form-builder","i-lucide-text-cursor-input",{"title":237,"path":238,"stem":239,"icon":240},"Design canvas","\u002Fdocs\u002Fexamples\u002Fdesign-canvas","docs\u002F4.examples\u002F07.design-canvas","i-lucide-pen-tool",{"title":242,"path":243,"stem":244,"icon":245},"Page builder","\u002Fdocs\u002Fexamples\u002Fpage-builder","docs\u002F4.examples\u002F08.page-builder","i-lucide-layout-template",{"title":247,"path":248,"stem":249,"icon":250},"Data table","\u002Fdocs\u002Fexamples\u002Fdata-table","docs\u002F4.examples\u002F09.data-table","i-lucide-table-2",{"title":252,"path":253,"stem":254,"children":255,"icon":257},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F5.changelog\u002F0.index",[256,258,263,267],{"title":204,"path":253,"stem":254,"icon":257},"i-lucide-history",{"title":259,"path":260,"stem":261,"icon":262},"3.0.0","\u002Fdocs\u002Fchangelog\u002Fv3-0-0","docs\u002F5.changelog\u002F997.v3-0-0","i-lucide-tag",{"title":264,"path":265,"stem":266,"icon":262},"3.0.0-beta.2","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-2","docs\u002F5.changelog\u002F998.v3-0-0-beta-2",{"title":268,"path":269,"stem":270,"icon":262},"3.0.0-beta.1","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-1","docs\u002F5.changelog\u002F999.v3-0-0-beta-1",[272],{"title":273,"path":274,"stem":275,"children":276,"page":35},"Pt","\u002Fpt","pt",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"Documentação","6556add362","\u002Fpt\u002Fdocs","pt\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"Primeiros passos","e345edbff3","\u002Fpt\u002Fdocs\u002Fgetting-started","pt\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"Introdução","\u002Fpt\u002Fdocs\u002Fgetting-started\u002Fintroduction","pt\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"Instalação","\u002Fpt\u002Fdocs\u002Fgetting-started\u002Finstallation","pt\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"Início rápido","\u002Fpt\u002Fdocs\u002Fgetting-started\u002Fquick-start","pt\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"Migrando da v2","\u002Fpt\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","pt\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"Guias","0338bbaa33","\u002Fpt\u002Fdocs\u002Fguides","pt\u002Fdocs\u002F2.guides",[311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,370],{"title":312,"path":313,"stem":314,"icon":46},"O provider","\u002Fpt\u002Fdocs\u002Fguides\u002Fprovider","pt\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"Arrastar e soltar","\u002Fpt\u002Fdocs\u002Fguides\u002Fdrag-and-drop","pt\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"Listas ordenáveis","\u002Fpt\u002Fdocs\u002Fguides\u002Fsortable-lists","pt\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"Listas que compartilham itens","\u002Fpt\u002Fdocs\u002Fguides\u002Fshared-lists","pt\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"Árvores","\u002Fpt\u002Fdocs\u002Fguides\u002Ftrees","pt\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"Multi-drag e seleção","\u002Fpt\u002Fdocs\u002Fguides\u002Fmulti-drag","pt\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"O overlay","\u002Fpt\u002Fdocs\u002Fguides\u002Foverlay","pt\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"Eixos, limites e grades","\u002Fpt\u002Fdocs\u002Fguides\u002Fconstraints","pt\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"Decidindo um drop","\u002Fpt\u002Fdocs\u002Fguides\u002Fdrop-decisions","pt\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"Animações","\u002Fpt\u002Fdocs\u002Fguides\u002Fanimations","pt\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"Acessibilidade","\u002Fpt\u002Fdocs\u002Fguides\u002Faccessibility","pt\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"Listas virtuais","\u002Fpt\u002Fdocs\u002Fguides\u002Fvirtual-lists","pt\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"Estilização","\u002Fpt\u002Fdocs\u002Fguides\u002Fstyling","pt\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"Sensores e arrastes programáticos","\u002Fpt\u002Fdocs\u002Fguides\u002Fsensors","pt\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fpt\u002Fdocs\u002Fguides\u002Fdevtools","pt\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"Arquivos e outros apps","\u002Fpt\u002Fdocs\u002Fguides\u002Fnative","pt\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fpt\u002Fdocs\u002Fapi","pt\u002Fdocs\u002F3.api",[379,382,385,388,391,394,397,400,403,407,411,415,419,422,426],{"title":129,"path":380,"stem":381,"icon":132},"\u002Fpt\u002Fdocs\u002Fapi\u002Fdnd-provider","pt\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-draggable","pt\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-droppable","pt\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-sortable-list","pt\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-sortable-item","pt\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","pt\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-selection-area","pt\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fpt\u002Fdocs\u002Fapi\u002Fmake-drag-area","pt\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD e monitores","\u002Fpt\u002Fdocs\u002Fapi\u002Fuse-dnd","pt\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"Eventos","\u002Fpt\u002Fdocs\u002Fapi\u002Fevents","pt\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"Modificadores e colisão","\u002Fpt\u002Fdocs\u002Fapi\u002Fmodifiers","pt\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview e props do overlay","\u002Fpt\u002Fdocs\u002Fapi\u002Fdrag-preview","pt\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fpt\u002Fdocs\u002Fapi\u002Fanimations","pt\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"Sensores","\u002Fpt\u002Fdocs\u002Fapi\u002Fsensors","pt\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"Tipos comuns","\u002Fpt\u002Fdocs\u002Fapi\u002Ftypes","pt\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"Exemplos","\u002Fpt\u002Fdocs\u002Fexamples","pt\u002Fdocs\u002F4.examples\u002F00.index",[435,437,441,445,449,453,457,461,465,469],{"title":436,"path":432,"stem":433,"icon":205},"Visão geral",{"title":438,"path":439,"stem":440,"icon":210},"Quadro de projeto","\u002Fpt\u002Fdocs\u002Fexamples\u002Fboard","pt\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"Calendário semanal","\u002Fpt\u002Fdocs\u002Fexamples\u002Fcalendar","pt\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"Gerenciador de arquivos","\u002Fpt\u002Fdocs\u002Fexamples\u002Ffile-manager","pt\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"Editor de blocos","\u002Fpt\u002Fdocs\u002Fexamples\u002Fblock-editor","pt\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"Xadrez","\u002Fpt\u002Fdocs\u002Fexamples\u002Fchess","pt\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"Construtor de formulários","\u002Fpt\u002Fdocs\u002Fexamples\u002Fform-builder","pt\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"Canvas de design","\u002Fpt\u002Fdocs\u002Fexamples\u002Fdesign-canvas","pt\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"Construtor de páginas","\u002Fpt\u002Fdocs\u002Fexamples\u002Fpage-builder","pt\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"Tabela de dados","\u002Fpt\u002Fdocs\u002Fexamples\u002Fdata-table","pt\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":475,"fallback":35},{"id":476,"title":344,"body":477,"category":306,"description":2969,"extension":2970,"links":2971,"meta":2972,"navigation":2974,"path":345,"seo":2975,"stem":346,"__hash__":2976},"docs_pt\u002Fpt\u002Fdocs\u002F2.guides\u002F09.drop-decisions.md",{"type":478,"value":479,"toc":2955},"minimark",[480,489,495,500,626,639,714,765,769,776,781,901,1000,1012,1017,1020,1025,1300,1322,1326,1335,1369,1380,1426,1430,1435,1586,1790,1793,1819,1843,1847,1850,1855,1919,1935,1938,2012,2016,2134,2149,2153,2331,2353,2357,2368,2373,2606,2614,2625,2679,2683,2686,2691,2883,2941,2951],[481,482,483,484,488],"p",{},"Arraste um card para ",[485,486,487],"strong",{},"Done",". O drop espera a sua resposta: mover o card, continuar arrastando\npara outro lugar, ou cancelar.",[490,491],"example",{"height":492,"hint":493,"name":494},"25rem","Arraste um card para Done","drop-confirm",[496,497,499],"h2",{"id":498},"onbeforedrop","onBeforeDrop",[501,502,507],"pre",{"className":503,"code":504,"language":505,"meta":506,"style":506},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","makeSortableList(listRef, {\n  items: tasks,\n  onBeforeDrop: (e) => (e.items.some((task) => task.locked) ? 'reject' : 'accept'),\n});\n","ts","",[508,509,510,532,548,620],"code",{"__ignoreMap":506},[511,512,515,518,522,526,529],"span",{"class":513,"line":514},"line",1,[511,516,143],{"class":517},"sbwC8",[511,519,521],{"class":520},"s6cML","(",[511,523,525],{"class":524},"snmWg","listRef",[511,527,528],{"class":520},",",[511,530,531],{"class":520}," {\n",[511,533,535,539,542,545],{"class":513,"line":534},2,[511,536,538],{"class":537},"sVvmN","  items",[511,540,541],{"class":520},":",[511,543,544],{"class":524}," tasks",[511,546,547],{"class":520},",\n",[511,549,551,554,556,559,562,565,569,571,573,576,579,581,584,587,590,592,594,597,599,602,604,607,611,614,617],{"class":513,"line":550},3,[511,552,553],{"class":517},"  onBeforeDrop",[511,555,541],{"class":520},[511,557,558],{"class":520}," (",[511,560,561],{"class":537},"e",[511,563,564],{"class":520},")",[511,566,568],{"class":567},"s78Kj"," =>",[511,570,558],{"class":520},[511,572,561],{"class":517},[511,574,575],{"class":520},".",[511,577,578],{"class":517},"items",[511,580,575],{"class":520},[511,582,583],{"class":517},"some",[511,585,586],{"class":520},"((",[511,588,589],{"class":537},"task",[511,591,564],{"class":520},[511,593,568],{"class":567},[511,595,596],{"class":524}," task",[511,598,575],{"class":520},[511,600,601],{"class":524},"locked",[511,603,564],{"class":520},[511,605,606],{"class":520}," ?",[511,608,610],{"class":609},"sN8r7"," 'reject'",[511,612,613],{"class":520}," :",[511,615,616],{"class":609}," 'accept'",[511,618,619],{"class":520},"),\n",[511,621,623],{"class":513,"line":622},4,[511,624,625],{"class":520},"});\n",[481,627,628,629,631,632,635,636,638],{},"Listas, árvores, alvos de drop (",[508,630,138],{},") e monitores (",[508,633,634],{},"useDnDMonitor",") aceitam um\n",[508,637,499],{},". Ele roda quando o arraste é solto, antes de qualquer coisa mudar, e a resposta\ndele decide:",[640,641,642,655],"table",{},[643,644,645],"thead",{},[646,647,648,652],"tr",{},[649,650,651],"th",{},"Resposta",[649,653,654],{},"O que acontece",[656,657,658,674,688,696,706],"tbody",{},[646,659,660,671],{},[661,662,663,666,667,670],"td",{},[508,664,665],{},"'accept'",", ",[508,668,669],{},"true"," ou nada",[661,672,673],{},"O drop é concluído.",[646,675,676,685],{},[661,677,678,681,682],{},[508,679,680],{},"'reject'"," ou ",[508,683,684],{},"false",[661,686,687],{},"Sem drop: os itens voltam ao lugar. Um erro lançado também rejeita.",[646,689,690,693],{},[661,691,692],{},"Um array de keys",[661,694,695],{},"Só esses itens são soltos; os outros voltam ao lugar.",[646,697,698,703],{},[661,699,700],{},[508,701,702],{},"'continue'",[661,704,705],{},"Sem drop, e o arraste continua.",[646,707,708,711],{},[661,709,710],{},"Uma promise de qualquer um desses",[661,712,713],{},"O overlay espera onde foi solto até a promise se resolver.",[481,715,716,717,720,721,666,724,666,726,666,729,666,732,666,735,738,739,742,743,746,747,666,750,666,753,756,757,760,761,575],{},"Listas e árvores passam um ",[508,718,719],{},"SortableDropEvent",": ",[508,722,723],{},"keys",[508,725,578],{},[508,727,728],{},"from",[508,730,731],{},"to",[508,733,734],{},"mode",[508,736,737],{},"sameList"," e\n",[508,740,741],{},"result",", os novos arrays de cada lista que o drop altera. Alvos de drop e monitores recebem o\n",[508,744,745],{},"DnDEvent"," genérico: ",[508,748,749],{},"active",[508,751,752],{},"over",[508,754,755],{},"position"," e ",[508,758,759],{},"source",". Veja ",[762,763,764],"a",{"href":173},"eventos",[496,766,768],{"id":767},"a-rule-while-dragging-or-on-release","Uma regra durante o arraste, ou ao soltar",[481,770,771,772,775],{},"Email e Chat aceitam anexos de no máximo 10 MB. Arraste ",[485,773,774],{},"demo.mov"," sobre cada um: Email o\nrecusa enquanto você passa por cima, Chat o aceita e o devolve quando você solta.",[490,777],{"height":778,"hint":779,"name":780},"27rem","Arraste um arquivo de mais de 10 MB para cada lugar","drop-rules",[501,782,785],{"className":503,"code":783,"filename":784,"language":505,"meta":506,"style":506},"\u002F\u002F Asked while dragging: a refused drag never enters the list.\ngroup: { name: 'attachments', put: ({ items }) => fits(items as Attachment[]) },\n\n\u002F\u002F Asked on release: the drag enters the list, then flies back.\nonBeforeDrop: (e) => (fits(e.items) ? 'accept' : 'reject'),\n","Column.vue",[508,786,787,793,850,856,861],{"__ignoreMap":506},[511,788,789],{"class":513,"line":514},[511,790,792],{"class":791},"sytrG","\u002F\u002F Asked while dragging: a refused drag never enters the list.\n",[511,794,795,798,800,803,806,808,811,813,816,818,821,824,827,829,832,834,837,840,844,847],{"class":513,"line":534},[511,796,797],{"class":524},"group",[511,799,541],{"class":520},[511,801,802],{"class":520}," {",[511,804,805],{"class":524}," name",[511,807,541],{"class":520},[511,809,810],{"class":609}," 'attachments'",[511,812,528],{"class":520},[511,814,815],{"class":524}," put",[511,817,541],{"class":520},[511,819,820],{"class":520}," ({",[511,822,823],{"class":537}," items",[511,825,826],{"class":520}," })",[511,828,568],{"class":567},[511,830,831],{"class":517}," fits",[511,833,521],{"class":520},[511,835,836],{"class":524},"items ",[511,838,839],{"class":567},"as",[511,841,843],{"class":842},"sR6Ar"," Attachment",[511,845,846],{"class":520},"[])",[511,848,849],{"class":520}," },\n",[511,851,852],{"class":513,"line":550},[511,853,855],{"emptyLinePlaceholder":854},true,"\n",[511,857,858],{"class":513,"line":622},[511,859,860],{"class":791},"\u002F\u002F Asked on release: the drag enters the list, then flies back.\n",[511,862,864,866,868,870,872,874,876,878,881,883,885,887,889,891,893,895,897,899],{"class":513,"line":863},5,[511,865,499],{"class":524},[511,867,541],{"class":520},[511,869,558],{"class":520},[511,871,561],{"class":537},[511,873,564],{"class":520},[511,875,568],{"class":567},[511,877,558],{"class":520},[511,879,880],{"class":517},"fits",[511,882,521],{"class":520},[511,884,561],{"class":524},[511,886,575],{"class":520},[511,888,578],{"class":524},[511,890,564],{"class":520},[511,892,606],{"class":520},[511,894,616],{"class":609},[511,896,613],{"class":520},[511,898,610],{"class":609},[511,900,619],{"class":520},[640,902,903,923],{},[643,904,905],{},[646,906,907,909,919],{},[649,908],{},[649,910,911,914,915,918],{},[508,912,913],{},"group.put"," (ou o ",[508,916,917],{},"accept"," de um alvo)",[649,920,921],{},[508,922,499],{},[656,924,925,936,958,989],{},[646,926,927,930,933],{},[661,928,929],{},"Consultado",[661,931,932],{},"Durante o arraste, assim que ele chega à lista.",[661,934,935],{},"Uma vez, quando o arraste é solto.",[646,937,938,941,955],{},[661,939,940],{},"O usuário vê",[661,942,943,944,947,948,666,950,947,953,575],{},"A lista recusa na hora: nenhuma posição se abre, ",[508,945,946],{},"isAccepting"," é ",[508,949,684],{},[508,951,952],{},"over.accepted",[508,954,684],{},[661,956,957],{},"A posição se abre como sempre; os itens voltam ao lugar ao soltar.",[646,959,960,963,977],{},[661,961,962],{},"Sabe",[661,964,965,966,666,968,666,970,666,973,666,975,575],{},"O que é arrastado: ",[508,967,723],{},[508,969,578],{},[508,971,972],{},"types",[508,974,728],{},[508,976,731],{},[661,978,979,980,666,983,666,985,666,987,575],{},"O drop inteiro: ",[508,981,982],{},"to.index",[508,984,737],{},[508,986,734],{},[508,988,741],{},[646,990,991,994,997],{},[661,992,993],{},"Pode",[661,995,996],{},"Dizer sim ou não.",[661,998,999],{},"Esperar uma promise, aceitar algumas keys, manter o arraste em andamento.",[481,1001,1002,1003,1005,1006,1008,1009,1011],{},"Use ",[508,1004,913],{}," para o que se sabe só pelos itens (um tipo, uma flag, uma contagem): o usuário\nfica sabendo antes de soltar. Use ",[508,1007,499],{}," para o que depende do lugar, da resposta do\nusuário ou da do servidor. As regras do próprio alvo vêm primeiro: sobre uma lista ou um alvo que\nrecusa o arraste, o drop é cancelado e o ",[508,1010,499],{}," dele não é consultado.",[1013,1014,1016],"h3",{"id":1015},"accepting-some-of-the-items","Aceitar alguns dos itens",[481,1018,1019],{},"Algumas regras só podem ser verificadas ao soltar, junto a um servidor. As vagas deste workshop\ntambém são reservadas por outras pessoas: ao soltar, a lista pergunta ao servidor quantas restam\ne aceita essa quantidade das pessoas arrastadas para dentro. Marque algumas e arraste-as juntas.",[490,1021],{"height":1022,"hint":1023,"name":1024},"28.5rem","Marque três pessoas, arraste uma delas para o workshop","drop-partial",[501,1026,1028],{"className":503,"code":1027,"filename":784,"language":505,"meta":506,"style":506},"makeSortableList(list, {\n  items: toRef(props.column, 'people'),\n  group: 'workshop',\n  \u002F\u002F Some keys: those land, the others fly back to where they came from.\n  onBeforeDrop: async (e) => {\n    const { free } = await seatsLeft(props.column.people.length); \u002F\u002F the overlay waits\n    return e.keys.slice(0, free);\n  },\n  onDrop: (e) => {\n    selection.delete(...e.accepted); \u002F\u002F the ones sent back stay selected\n    notice.value = `${e.accepted.length} booked, ${e.rejected.length} back to the waiting list`;\n  },\n});\n",[508,1029,1030,1043,1069,1081,1086,1105,1152,1184,1190,1208,1234,1290,1295],{"__ignoreMap":506},[511,1031,1032,1034,1036,1039,1041],{"class":513,"line":514},[511,1033,143],{"class":517},[511,1035,521],{"class":520},[511,1037,1038],{"class":524},"list",[511,1040,528],{"class":520},[511,1042,531],{"class":520},[511,1044,1045,1047,1049,1052,1054,1057,1059,1062,1064,1067],{"class":513,"line":534},[511,1046,538],{"class":537},[511,1048,541],{"class":520},[511,1050,1051],{"class":517}," toRef",[511,1053,521],{"class":520},[511,1055,1056],{"class":524},"props",[511,1058,575],{"class":520},[511,1060,1061],{"class":524},"column",[511,1063,528],{"class":520},[511,1065,1066],{"class":609}," 'people'",[511,1068,619],{"class":520},[511,1070,1071,1074,1076,1079],{"class":513,"line":550},[511,1072,1073],{"class":537},"  group",[511,1075,541],{"class":520},[511,1077,1078],{"class":609}," 'workshop'",[511,1080,547],{"class":520},[511,1082,1083],{"class":513,"line":622},[511,1084,1085],{"class":791},"  \u002F\u002F Some keys: those land, the others fly back to where they came from.\n",[511,1087,1088,1090,1092,1095,1097,1099,1101,1103],{"class":513,"line":863},[511,1089,553],{"class":517},[511,1091,541],{"class":520},[511,1093,1094],{"class":567}," async",[511,1096,558],{"class":520},[511,1098,561],{"class":537},[511,1100,564],{"class":520},[511,1102,568],{"class":567},[511,1104,531],{"class":520},[511,1106,1108,1111,1113,1116,1119,1122,1125,1128,1130,1132,1134,1136,1138,1141,1143,1146,1149],{"class":513,"line":1107},6,[511,1109,1110],{"class":567},"    const",[511,1112,802],{"class":520},[511,1114,1115],{"class":524}," free ",[511,1117,1118],{"class":520},"}",[511,1120,1121],{"class":520}," =",[511,1123,1124],{"class":567}," await",[511,1126,1127],{"class":517}," seatsLeft",[511,1129,521],{"class":520},[511,1131,1056],{"class":524},[511,1133,575],{"class":520},[511,1135,1061],{"class":524},[511,1137,575],{"class":520},[511,1139,1140],{"class":524},"people",[511,1142,575],{"class":520},[511,1144,1145],{"class":524},"length",[511,1147,1148],{"class":520},");",[511,1150,1151],{"class":791}," \u002F\u002F the overlay waits\n",[511,1153,1155,1158,1161,1163,1165,1167,1170,1172,1176,1178,1181],{"class":513,"line":1154},7,[511,1156,1157],{"class":567},"    return",[511,1159,1160],{"class":517}," e",[511,1162,575],{"class":520},[511,1164,723],{"class":517},[511,1166,575],{"class":520},[511,1168,1169],{"class":517},"slice",[511,1171,521],{"class":520},[511,1173,1175],{"class":1174},"s3IRZ","0",[511,1177,528],{"class":520},[511,1179,1180],{"class":524}," free",[511,1182,1183],{"class":520},");\n",[511,1185,1187],{"class":513,"line":1186},8,[511,1188,1189],{"class":520},"  },\n",[511,1191,1193,1196,1198,1200,1202,1204,1206],{"class":513,"line":1192},9,[511,1194,1195],{"class":517},"  onDrop",[511,1197,541],{"class":520},[511,1199,558],{"class":520},[511,1201,561],{"class":537},[511,1203,564],{"class":520},[511,1205,568],{"class":567},[511,1207,531],{"class":520},[511,1209,1211,1214,1216,1219,1222,1224,1226,1229,1231],{"class":513,"line":1210},10,[511,1212,1213],{"class":517},"    selection",[511,1215,575],{"class":520},[511,1217,1218],{"class":517},"delete",[511,1220,1221],{"class":520},"(...",[511,1223,561],{"class":524},[511,1225,575],{"class":520},[511,1227,1228],{"class":524},"accepted",[511,1230,1148],{"class":520},[511,1232,1233],{"class":791}," \u002F\u002F the ones sent back stay selected\n",[511,1235,1237,1240,1242,1245,1248,1251,1254,1256,1258,1260,1262,1264,1266,1269,1271,1273,1275,1278,1280,1282,1284,1287],{"class":513,"line":1236},11,[511,1238,1239],{"class":524},"    notice",[511,1241,575],{"class":520},[511,1243,1244],{"class":524},"value ",[511,1246,1247],{"class":520},"=",[511,1249,1250],{"class":609}," `",[511,1252,1253],{"class":520},"${",[511,1255,561],{"class":609},[511,1257,575],{"class":520},[511,1259,1228],{"class":609},[511,1261,575],{"class":520},[511,1263,1145],{"class":609},[511,1265,1118],{"class":520},[511,1267,1268],{"class":609}," booked, ",[511,1270,1253],{"class":520},[511,1272,561],{"class":609},[511,1274,575],{"class":520},[511,1276,1277],{"class":609},"rejected",[511,1279,575],{"class":520},[511,1281,1145],{"class":609},[511,1283,1118],{"class":520},[511,1285,1286],{"class":609}," back to the waiting list`",[511,1288,1289],{"class":520},";\n",[511,1291,1293],{"class":513,"line":1292},12,[511,1294,1189],{"class":520},[511,1296,1298],{"class":513,"line":1297},13,[511,1299,625],{"class":520},[481,1301,1302,1303,1306,1307,1310,1311,756,1314,1317,1318,1321],{},"Em um ",[762,1304,1305],{"href":69},"multi-drag",", as keys que você retorna pousam juntas e o resto volta\naos seus lugares. O ",[508,1308,1309],{},"onDrop"," então as vê em ",[508,1312,1313],{},"e.accepted",[508,1315,1316],{},"e.rejected",", e o ",[508,1319,1320],{},"e.result"," dele é o\nfinal. Um array vazio não aceita nada: o drop é recusado.",[496,1323,1325],{"id":1324},"keep-dragging-continue","Continuar arrastando: 'continue'",[481,1327,1328,1330,1331,1334],{},[508,1329,702],{}," cancela o drop, não o arraste. Responda ",[485,1332,1333],{},"Keep dragging"," no diálogo acima: o item\ncontinua na mão a partir de onde estava, a página volta para o modo de arraste, e o usuário\nsegue em frente.",[1336,1337,1338,1342,1345,1357,1363],"ul",{},[1339,1340,1341],"li",{},"Com um mouse ou uma caneta, o item segue o ponteiro sem nenhum botão pressionado. O próximo\nsoltar — um clique — solta o item, e esse clique nunca chega à página embaixo.",[1339,1343,1344],{},"Um toque pega o item de novo onde o dedo encosta; levantar o dedo o solta.",[1339,1346,1347,1348,1352,1353,1356],{},"Um arraste por teclado continua: as setas movem o item, ",[1349,1350],"kbd",{"value":1351},"Space"," ou\n",[1349,1354],{"value":1355},"Enter"," o soltam.",[1339,1358,1359,1362],{},[1349,1360],{"value":1361},"Escape"," o cancela, como qualquer arraste.",[1339,1364,1365,1366,1368],{},"O próximo drop consulta o ",[508,1367,499],{}," de novo.",[481,1370,1371,1372,1375,1376,1379],{},"Os monitores ouvem ",[508,1373,1374],{},"onDragResume",", e os leitores de tela anunciam que o item não foi solto e ainda\nestá se movendo (substitua o texto com o ",[508,1377,1378],{},"announcements.onDragResume"," do provider).",[501,1381,1383],{"className":503,"code":1382,"language":505,"meta":506,"style":506},"useDnDMonitor({\n  onDragResume() {\n    hint.value = 'Still dragging: click to drop, Esc to cancel';\n  },\n});\n",[508,1384,1385,1392,1402,1418,1422],{"__ignoreMap":506},[511,1386,1387,1389],{"class":513,"line":514},[511,1388,634],{"class":517},[511,1390,1391],{"class":520},"({\n",[511,1393,1394,1397,1400],{"class":513,"line":534},[511,1395,1396],{"class":517},"  onDragResume",[511,1398,1399],{"class":520},"()",[511,1401,531],{"class":520},[511,1403,1404,1407,1409,1411,1413,1416],{"class":513,"line":550},[511,1405,1406],{"class":524},"    hint",[511,1408,575],{"class":520},[511,1410,1244],{"class":524},[511,1412,1247],{"class":520},[511,1414,1415],{"class":609}," 'Still dragging: click to drop, Esc to cancel'",[511,1417,1289],{"class":520},[511,1419,1420],{"class":513,"line":622},[511,1421,1189],{"class":520},[511,1423,1424],{"class":513,"line":863},[511,1425,625],{"class":520},[496,1427,1429],{"id":1428},"asking-the-user","Perguntar ao usuário",[481,1431,1432,1434],{},[508,1433,499],{}," pode retornar uma promise. Abra um diálogo, e resolva a promise com o botão que o\nusuário escolher:",[501,1436,1438],{"className":503,"code":1437,"filename":784,"language":505,"meta":506,"style":506},"const { items } = makeSortableList(list, {\n  id: props.column.id,\n  items: toRef(props.column, 'tasks'),\n  group: 'release',\n  onBeforeDrop: (e) => (props.column.confirm && !e.sameList ? props.ask(e) : 'accept'),\n});\n",[508,1439,1440,1465,1486,1509,1520,1582],{"__ignoreMap":506},[511,1441,1442,1445,1447,1450,1452,1454,1457,1459,1461,1463],{"class":513,"line":514},[511,1443,1444],{"class":567},"const",[511,1446,802],{"class":520},[511,1448,1449],{"class":524}," items ",[511,1451,1118],{"class":520},[511,1453,1121],{"class":520},[511,1455,1456],{"class":517}," makeSortableList",[511,1458,521],{"class":520},[511,1460,1038],{"class":524},[511,1462,528],{"class":520},[511,1464,531],{"class":520},[511,1466,1467,1470,1472,1475,1477,1479,1481,1484],{"class":513,"line":534},[511,1468,1469],{"class":537},"  id",[511,1471,541],{"class":520},[511,1473,1474],{"class":524}," props",[511,1476,575],{"class":520},[511,1478,1061],{"class":524},[511,1480,575],{"class":520},[511,1482,1483],{"class":524},"id",[511,1485,547],{"class":520},[511,1487,1488,1490,1492,1494,1496,1498,1500,1502,1504,1507],{"class":513,"line":550},[511,1489,538],{"class":537},[511,1491,541],{"class":520},[511,1493,1051],{"class":517},[511,1495,521],{"class":520},[511,1497,1056],{"class":524},[511,1499,575],{"class":520},[511,1501,1061],{"class":524},[511,1503,528],{"class":520},[511,1505,1506],{"class":609}," 'tasks'",[511,1508,619],{"class":520},[511,1510,1511,1513,1515,1518],{"class":513,"line":622},[511,1512,1073],{"class":537},[511,1514,541],{"class":520},[511,1516,1517],{"class":609}," 'release'",[511,1519,547],{"class":520},[511,1521,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1547,1550,1553,1555,1557,1560,1563,1565,1567,1570,1572,1574,1576,1578,1580],{"class":513,"line":863},[511,1523,553],{"class":517},[511,1525,541],{"class":520},[511,1527,558],{"class":520},[511,1529,561],{"class":537},[511,1531,564],{"class":520},[511,1533,568],{"class":567},[511,1535,558],{"class":520},[511,1537,1056],{"class":524},[511,1539,575],{"class":520},[511,1541,1061],{"class":524},[511,1543,575],{"class":520},[511,1545,1546],{"class":524},"confirm ",[511,1548,1549],{"class":520},"&&",[511,1551,1552],{"class":520}," !",[511,1554,561],{"class":524},[511,1556,575],{"class":520},[511,1558,1559],{"class":524},"sameList ",[511,1561,1562],{"class":520},"?",[511,1564,1474],{"class":517},[511,1566,575],{"class":520},[511,1568,1569],{"class":517},"ask",[511,1571,521],{"class":520},[511,1573,561],{"class":524},[511,1575,564],{"class":520},[511,1577,613],{"class":520},[511,1579,616],{"class":609},[511,1581,619],{"class":520},[511,1583,1584],{"class":513,"line":1107},[511,1585,625],{"class":520},[501,1587,1590],{"className":503,"code":1588,"filename":1589,"language":505,"meta":506,"style":506},"type Answer = 'accept' | 'continue' | 'reject';\nconst question = shallowRef\u003C{ title: string; resolve: (answer: Answer) => void } | null>(null);\n\n\u002F** Opens the dialog: `onBeforeDrop` waits for the button the user picks. *\u002F\nconst ask = (e: SortableDropEvent\u003CTask>) =>\n  new Promise\u003CAnswer>((resolve) => {\n    question.value = { title: e.items[0]!.title, resolve };\n  });\n","Board.vue",[508,1591,1592,1616,1679,1683,1688,1718,1743,1785],{"__ignoreMap":506},[511,1593,1594,1597,1600,1602,1604,1607,1610,1612,1614],{"class":513,"line":514},[511,1595,1596],{"class":567},"type",[511,1598,1599],{"class":842}," Answer",[511,1601,1121],{"class":520},[511,1603,616],{"class":609},[511,1605,1606],{"class":520}," |",[511,1608,1609],{"class":609}," 'continue'",[511,1611,1606],{"class":520},[511,1613,610],{"class":609},[511,1615,1289],{"class":520},[511,1617,1618,1620,1623,1625,1628,1631,1634,1636,1639,1642,1645,1647,1649,1652,1654,1656,1658,1660,1663,1666,1668,1671,1674,1677],{"class":513,"line":534},[511,1619,1444],{"class":567},[511,1621,1622],{"class":524}," question ",[511,1624,1247],{"class":520},[511,1626,1627],{"class":517}," shallowRef",[511,1629,1630],{"class":520},"\u003C{",[511,1632,1633],{"class":524}," title",[511,1635,541],{"class":520},[511,1637,1638],{"class":842}," string",[511,1640,1641],{"class":520},";",[511,1643,1644],{"class":517}," resolve",[511,1646,541],{"class":520},[511,1648,558],{"class":520},[511,1650,1651],{"class":537},"answer",[511,1653,541],{"class":520},[511,1655,1599],{"class":842},[511,1657,564],{"class":520},[511,1659,568],{"class":567},[511,1661,1662],{"class":842}," void",[511,1664,1665],{"class":520}," }",[511,1667,1606],{"class":520},[511,1669,1670],{"class":842}," null",[511,1672,1673],{"class":520},">(",[511,1675,1676],{"class":1174},"null",[511,1678,1183],{"class":520},[511,1680,1681],{"class":513,"line":550},[511,1682,855],{"emptyLinePlaceholder":854},[511,1684,1685],{"class":513,"line":622},[511,1686,1687],{"class":791},"\u002F** Opens the dialog: `onBeforeDrop` waits for the button the user picks. *\u002F\n",[511,1689,1690,1692,1695,1697,1699,1701,1703,1706,1709,1712,1715],{"class":513,"line":863},[511,1691,1444],{"class":567},[511,1693,1694],{"class":517}," ask",[511,1696,1121],{"class":520},[511,1698,558],{"class":520},[511,1700,561],{"class":537},[511,1702,541],{"class":520},[511,1704,1705],{"class":842}," SortableDropEvent",[511,1707,1708],{"class":520},"\u003C",[511,1710,1711],{"class":842},"Task",[511,1713,1714],{"class":520},">)",[511,1716,1717],{"class":567}," =>\n",[511,1719,1720,1723,1726,1728,1731,1734,1737,1739,1741],{"class":513,"line":1107},[511,1721,1722],{"class":567},"  new",[511,1724,1725],{"class":842}," Promise",[511,1727,1708],{"class":520},[511,1729,1730],{"class":842},"Answer",[511,1732,1733],{"class":520},">((",[511,1735,1736],{"class":537},"resolve",[511,1738,564],{"class":520},[511,1740,568],{"class":567},[511,1742,531],{"class":520},[511,1744,1745,1748,1750,1752,1754,1756,1758,1760,1762,1764,1766,1769,1771,1774,1777,1779,1782],{"class":513,"line":1154},[511,1746,1747],{"class":524},"    question",[511,1749,575],{"class":520},[511,1751,1244],{"class":524},[511,1753,1247],{"class":520},[511,1755,802],{"class":520},[511,1757,1633],{"class":537},[511,1759,541],{"class":520},[511,1761,1160],{"class":524},[511,1763,575],{"class":520},[511,1765,578],{"class":524},[511,1767,1768],{"class":520},"[",[511,1770,1175],{"class":1174},[511,1772,1773],{"class":520},"]!.",[511,1775,1776],{"class":524},"title",[511,1778,528],{"class":520},[511,1780,1781],{"class":524}," resolve ",[511,1783,1784],{"class":520},"};\n",[511,1786,1787],{"class":513,"line":1186},[511,1788,1789],{"class":520},"  });\n",[481,1791,1792],{},"Enquanto a promise está pendente:",[1336,1794,1795,1801,1813,1816],{},[1339,1796,1797,1798,1641],{},"o overlay espera onde foi solto, marcado com ",[508,1799,1800],{},"data-dnd-overlay=\"dropping\"",[1339,1802,1803,1806,1807,947,1810,1641],{},[508,1804,1805],{},"useDnD()"," mantém o estado que tinha no momento de soltar, e ",[508,1808,1809],{},"status",[508,1811,1812],{},"'dropping'",[1339,1814,1815],{},"a página sai do modo de arraste: o cursor e a seleção de texto voltam, então um diálogo funciona\ncomo sempre;",[1339,1817,1818],{},"nenhum outro arraste pode começar.",[1820,1821,1822],"tip",{},[481,1823,1824,1825,1828,1829,1832,1833,1836,1837,1839,1840,1842],{},"Um ",[508,1826,1827],{},"\u003Cdialog>"," modal aberto com ",[508,1830,1831],{},"showModal()"," fica na top layer, acima do overlay que espera.\nTransforme o evento ",[508,1834,1835],{},"cancel"," dele (",[1349,1838],{"value":1361},") em ",[508,1841,680],{},", como o exemplo faz.",[496,1844,1846],{"id":1845},"the-order-of-the-hooks","A ordem dos hooks",[481,1848,1849],{},"Reordene as notas, solte uma na lixeira, depois troque uma resposta e faça de novo. O painel\nlista os hooks do último drop na ordem em que rodaram.",[490,1851],{"height":1852,"hint":1853,"name":1854},"27.5rem","Mova uma nota ou jogue uma na lixeira, depois troque uma resposta para reject ou continue","drop-hooks",[1856,1857,1858,1873,1878,1899,1902],"ol",{},[1339,1859,1860,1861,1863,1864,1866,1867,1869,1870,1872],{},"O ",[508,1862,499],{}," de cada ",[508,1865,634],{},", um de cada vez. Um ",[508,1868,680],{}," ou um ",[508,1871,702],{},"\nencerra a consulta; keys restringem o drop.",[1339,1874,1860,1875,1877],{},[508,1876,499],{}," do alvo: a lista ou a árvore em que os itens entram, ou o alvo de drop.",[1339,1879,1860,1880,1882,1883,1885,1886,1889,1890,1892,1893,1895,1896,575],{},[508,1881,1309],{}," só do alvo: uma lista que os itens deixam rumo a outra não é consultada, e o novo\narray dela está no ",[508,1884,1320],{}," do alvo. Quando itens são removidos (uma lixeira,\n",[508,1887,1888],{},"dropOutside: 'remove'","), o ",[508,1891,1309],{}," da lista deles roda, com ",[508,1894,982],{}," igual a ",[508,1897,1898],{},"-1",[1339,1900,1901],{},"A gravação padrão: cada lista que o drop altera recebe o seu novo array.",[1339,1903,1860,1904,1907,1908,1911,1912,558,1915,1918],{},[508,1905,1906],{},"onDragEnd"," do provider (",[508,1909,1910],{},"@drag-end",") e dos monitores. Depois o overlay pousa, e\n",[508,1913,1914],{},"onDragSettle",[508,1916,1917],{},"@drag-settle",") avisa que pousou.",[481,1920,1921,1922,558,1925,1928,1929,1931,1932,1934],{},"Um drop recusado pula direto para ",[508,1923,1924],{},"onDragCancel",[508,1926,1927],{},"@drag-cancel","), e os itens voltam ao lugar. Um\n",[508,1930,702],{}," também encerra a consulta, com ",[508,1933,1374],{},": o arraste continua, e o próximo drop\nconsulta de novo.",[481,1936,1937],{},"Os monitores decidem antes do alvo, então um veto nunca vem depois que uma lista já aplicou um\ndrop por conta própria. Isso faz de um monitor o lugar para regras sobre todo drop do app:",[501,1939,1942],{"className":503,"code":1940,"filename":1941,"language":505,"meta":506,"style":506},"const { syncing } = useSync();\n\n\u002F\u002F Read-only while syncing: every drop under the provider flies back.\nuseDnDMonitor({\n  onBeforeDrop: () => (syncing.value ? 'reject' : 'accept'),\n});\n","Monitor.vue",[508,1943,1944,1963,1967,1972,1978,2008],{"__ignoreMap":506},[511,1945,1946,1948,1950,1953,1955,1957,1960],{"class":513,"line":514},[511,1947,1444],{"class":567},[511,1949,802],{"class":520},[511,1951,1952],{"class":524}," syncing ",[511,1954,1118],{"class":520},[511,1956,1121],{"class":520},[511,1958,1959],{"class":517}," useSync",[511,1961,1962],{"class":520},"();\n",[511,1964,1965],{"class":513,"line":534},[511,1966,855],{"emptyLinePlaceholder":854},[511,1968,1969],{"class":513,"line":550},[511,1970,1971],{"class":791},"\u002F\u002F Read-only while syncing: every drop under the provider flies back.\n",[511,1973,1974,1976],{"class":513,"line":622},[511,1975,634],{"class":517},[511,1977,1391],{"class":520},[511,1979,1980,1982,1984,1987,1989,1991,1994,1996,1998,2000,2002,2004,2006],{"class":513,"line":863},[511,1981,553],{"class":517},[511,1983,541],{"class":520},[511,1985,1986],{"class":520}," ()",[511,1988,568],{"class":567},[511,1990,558],{"class":520},[511,1992,1993],{"class":524},"syncing",[511,1995,575],{"class":520},[511,1997,1244],{"class":524},[511,1999,1562],{"class":520},[511,2001,610],{"class":609},[511,2003,613],{"class":520},[511,2005,616],{"class":609},[511,2007,619],{"class":520},[511,2009,2010],{"class":513,"line":1107},[511,2011,625],{"class":520},[496,2013,2015],{"id":2014},"ondrop-told-before-the-write","onDrop: avisado antes da gravação",[501,2017,2019],{"className":503,"code":2018,"language":505,"meta":506,"style":506},"makeSortableList(listRef, {\n  items: tasks,\n  onDrop: (e) => {\n    \u002F\u002F `tasks` still holds the old order, `e.result` the new one.\n    console.log(e.keys, e.from, e.to, e.result.get(e.to.list));\n  },\n});\n",[508,2020,2021,2033,2043,2059,2064,2126,2130],{"__ignoreMap":506},[511,2022,2023,2025,2027,2029,2031],{"class":513,"line":514},[511,2024,143],{"class":517},[511,2026,521],{"class":520},[511,2028,525],{"class":524},[511,2030,528],{"class":520},[511,2032,531],{"class":520},[511,2034,2035,2037,2039,2041],{"class":513,"line":534},[511,2036,538],{"class":537},[511,2038,541],{"class":520},[511,2040,544],{"class":524},[511,2042,547],{"class":520},[511,2044,2045,2047,2049,2051,2053,2055,2057],{"class":513,"line":550},[511,2046,1195],{"class":517},[511,2048,541],{"class":520},[511,2050,558],{"class":520},[511,2052,561],{"class":537},[511,2054,564],{"class":520},[511,2056,568],{"class":567},[511,2058,531],{"class":520},[511,2060,2061],{"class":513,"line":622},[511,2062,2063],{"class":791},"    \u002F\u002F `tasks` still holds the old order, `e.result` the new one.\n",[511,2065,2066,2069,2071,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102,2104,2106,2108,2111,2113,2115,2117,2119,2121,2123],{"class":513,"line":863},[511,2067,2068],{"class":517},"    console",[511,2070,575],{"class":520},[511,2072,2073],{"class":517},"log",[511,2075,521],{"class":520},[511,2077,561],{"class":524},[511,2079,575],{"class":520},[511,2081,723],{"class":524},[511,2083,528],{"class":520},[511,2085,1160],{"class":524},[511,2087,575],{"class":520},[511,2089,728],{"class":524},[511,2091,528],{"class":520},[511,2093,1160],{"class":524},[511,2095,575],{"class":520},[511,2097,731],{"class":524},[511,2099,528],{"class":520},[511,2101,1160],{"class":517},[511,2103,575],{"class":520},[511,2105,741],{"class":517},[511,2107,575],{"class":520},[511,2109,2110],{"class":517},"get",[511,2112,521],{"class":520},[511,2114,561],{"class":524},[511,2116,575],{"class":520},[511,2118,731],{"class":524},[511,2120,575],{"class":520},[511,2122,1038],{"class":524},[511,2124,2125],{"class":520},"));\n",[511,2127,2128],{"class":513,"line":1107},[511,2129,1189],{"class":520},[511,2131,2132],{"class":513,"line":1154},[511,2133,625],{"class":520},[481,2135,1860,2136,2138,2139,2141,2142,2145,2146,2148],{},[508,2137,1309],{}," de uma lista roda assim que o drop é aceito, de forma síncrona, logo antes de a lista\ngravá-lo. Para agir depois da gravação, use o ",[508,2140,1910],{}," do provider ou\n",[508,2143,2144],{},"useDnDMonitor({ onDragEnd })",". Em um alvo de drop simples, o ",[508,2147,1309],{}," é onde você muda os seus\ndados: a biblioteca não move nada por ele.",[496,2150,2152],{"id":2151},"stores-and-servers-controlled-lists","Stores e servidores: listas controladas",[501,2154,2156],{"className":503,"code":2155,"language":505,"meta":506,"style":506},"const store = useBoardStore();\nconst { items } = makeSortableList(listRef, {\n  id: 'todo',\n  group: 'board',\n  items: () => store.lists.todo, \u002F\u002F a getter: read-only\n  onDrop: (e) => {\n    e.preventDefault();\n    for (const [listId, next] of e.result) store.setList(listId, next);\n  },\n});\n",[508,2157,2158,2172,2194,2205,2216,2244,2260,2272,2323,2327],{"__ignoreMap":506},[511,2159,2160,2162,2165,2167,2170],{"class":513,"line":514},[511,2161,1444],{"class":567},[511,2163,2164],{"class":524}," store ",[511,2166,1247],{"class":520},[511,2168,2169],{"class":517}," useBoardStore",[511,2171,1962],{"class":520},[511,2173,2174,2176,2178,2180,2182,2184,2186,2188,2190,2192],{"class":513,"line":534},[511,2175,1444],{"class":567},[511,2177,802],{"class":520},[511,2179,1449],{"class":524},[511,2181,1118],{"class":520},[511,2183,1121],{"class":520},[511,2185,1456],{"class":517},[511,2187,521],{"class":520},[511,2189,525],{"class":524},[511,2191,528],{"class":520},[511,2193,531],{"class":520},[511,2195,2196,2198,2200,2203],{"class":513,"line":550},[511,2197,1469],{"class":537},[511,2199,541],{"class":520},[511,2201,2202],{"class":609}," 'todo'",[511,2204,547],{"class":520},[511,2206,2207,2209,2211,2214],{"class":513,"line":622},[511,2208,1073],{"class":537},[511,2210,541],{"class":520},[511,2212,2213],{"class":609}," 'board'",[511,2215,547],{"class":520},[511,2217,2218,2220,2222,2224,2226,2229,2231,2234,2236,2239,2241],{"class":513,"line":863},[511,2219,538],{"class":517},[511,2221,541],{"class":520},[511,2223,1986],{"class":520},[511,2225,568],{"class":567},[511,2227,2228],{"class":524}," store",[511,2230,575],{"class":520},[511,2232,2233],{"class":524},"lists",[511,2235,575],{"class":520},[511,2237,2238],{"class":524},"todo",[511,2240,528],{"class":520},[511,2242,2243],{"class":791}," \u002F\u002F a getter: read-only\n",[511,2245,2246,2248,2250,2252,2254,2256,2258],{"class":513,"line":1107},[511,2247,1195],{"class":517},[511,2249,541],{"class":520},[511,2251,558],{"class":520},[511,2253,561],{"class":537},[511,2255,564],{"class":520},[511,2257,568],{"class":567},[511,2259,531],{"class":520},[511,2261,2262,2265,2267,2270],{"class":513,"line":1154},[511,2263,2264],{"class":517},"    e",[511,2266,575],{"class":520},[511,2268,2269],{"class":517},"preventDefault",[511,2271,1962],{"class":520},[511,2273,2274,2277,2279,2281,2284,2287,2289,2292,2295,2298,2300,2302,2304,2306,2308,2310,2313,2315,2317,2319,2321],{"class":513,"line":1186},[511,2275,2276],{"class":567},"    for",[511,2278,558],{"class":520},[511,2280,1444],{"class":567},[511,2282,2283],{"class":520}," [",[511,2285,2286],{"class":524},"listId",[511,2288,528],{"class":520},[511,2290,2291],{"class":524}," next",[511,2293,2294],{"class":520},"]",[511,2296,2297],{"class":520}," of",[511,2299,1160],{"class":524},[511,2301,575],{"class":520},[511,2303,741],{"class":524},[511,2305,564],{"class":520},[511,2307,2228],{"class":517},[511,2309,575],{"class":520},[511,2311,2312],{"class":517},"setList",[511,2314,521],{"class":520},[511,2316,2286],{"class":524},[511,2318,528],{"class":520},[511,2320,2291],{"class":524},[511,2322,1183],{"class":520},[511,2324,2325],{"class":513,"line":1192},[511,2326,1189],{"class":520},[511,2328,2329],{"class":513,"line":1210},[511,2330,625],{"class":520},[481,2332,2333,2334,2337,2338,2341,2342,2345,2346,2348,2349,2352],{},"A biblioteca só grava um drop em um ref gravável. Um getter, um ",[508,2335,2336],{},"computed"," ou um ref ",[508,2339,2340],{},"readonly","\nnunca é gravado: chame ",[508,2343,2344],{},"e.preventDefault()"," e aplique ",[508,2347,1320],{}," você mesmo — os novos arrays de\ncada lista que o drop altera, por id de lista. ",[508,2350,2351],{},"preventDefault()"," pula a gravação em todas elas, já\nque gravar só em algumas perderia ou duplicaria itens. Os builds de desenvolvimento avisam quando o\ndrop de uma lista somente leitura fica a cargo da biblioteca.",[1013,2354,2356],{"id":2355},"saving-to-a-server-first","Salvar em um servidor primeiro",[481,2358,2359,2360,2363,2364,2367],{},"Mova um card com o servidor ",[485,2361,2362],{},"flaky"," (uma requisição sim, outra não, falha) ou ",[485,2365,2366],{},"down",". O card\nespera com um selo enquanto a requisição roda, depois pousa, ou volta ao lugar se ela falhou.",[490,2369],{"height":2370,"hint":2371,"name":2372},"31.5rem","Mova cards, depois mude o servidor para flaky ou down","drop-server",[501,2374,2376],{"className":503,"code":2375,"filename":784,"language":505,"meta":506,"style":506},"const { items } = makeSortableList(list, {\n  id: props.id,\n  \u002F\u002F A getter: the library never writes it. The drop is applied below, once saved.\n  items: () => board[props.id]!,\n  group: 'sprint',\n  onBeforeDrop: async (e) => {\n    e.preventDefault();\n    try {\n      await saveMove(e.keys, e.to);\n    } catch {\n      return 'reject'; \u002F\u002F nothing applied: the card flies back\n    }\n    for (const [id, tasks] of e.result) board[id] = tasks; \u002F\u002F lands in its new place\n    return 'accept';\n  },\n});\n",[508,2377,2378,2400,2414,2419,2443,2454,2472,2482,2489,2515,2525,2537,2542,2587,2596,2601],{"__ignoreMap":506},[511,2379,2380,2382,2384,2386,2388,2390,2392,2394,2396,2398],{"class":513,"line":514},[511,2381,1444],{"class":567},[511,2383,802],{"class":520},[511,2385,1449],{"class":524},[511,2387,1118],{"class":520},[511,2389,1121],{"class":520},[511,2391,1456],{"class":517},[511,2393,521],{"class":520},[511,2395,1038],{"class":524},[511,2397,528],{"class":520},[511,2399,531],{"class":520},[511,2401,2402,2404,2406,2408,2410,2412],{"class":513,"line":534},[511,2403,1469],{"class":537},[511,2405,541],{"class":520},[511,2407,1474],{"class":524},[511,2409,575],{"class":520},[511,2411,1483],{"class":524},[511,2413,547],{"class":520},[511,2415,2416],{"class":513,"line":550},[511,2417,2418],{"class":791},"  \u002F\u002F A getter: the library never writes it. The drop is applied below, once saved.\n",[511,2420,2421,2423,2425,2427,2429,2432,2434,2436,2438,2440],{"class":513,"line":622},[511,2422,538],{"class":517},[511,2424,541],{"class":520},[511,2426,1986],{"class":520},[511,2428,568],{"class":567},[511,2430,2431],{"class":524}," board",[511,2433,1768],{"class":520},[511,2435,1056],{"class":524},[511,2437,575],{"class":520},[511,2439,1483],{"class":524},[511,2441,2442],{"class":520},"]!,\n",[511,2444,2445,2447,2449,2452],{"class":513,"line":863},[511,2446,1073],{"class":537},[511,2448,541],{"class":520},[511,2450,2451],{"class":609}," 'sprint'",[511,2453,547],{"class":520},[511,2455,2456,2458,2460,2462,2464,2466,2468,2470],{"class":513,"line":1107},[511,2457,553],{"class":517},[511,2459,541],{"class":520},[511,2461,1094],{"class":567},[511,2463,558],{"class":520},[511,2465,561],{"class":537},[511,2467,564],{"class":520},[511,2469,568],{"class":567},[511,2471,531],{"class":520},[511,2473,2474,2476,2478,2480],{"class":513,"line":1154},[511,2475,2264],{"class":517},[511,2477,575],{"class":520},[511,2479,2269],{"class":517},[511,2481,1962],{"class":520},[511,2483,2484,2487],{"class":513,"line":1186},[511,2485,2486],{"class":567},"    try",[511,2488,531],{"class":520},[511,2490,2491,2494,2497,2499,2501,2503,2505,2507,2509,2511,2513],{"class":513,"line":1192},[511,2492,2493],{"class":567},"      await",[511,2495,2496],{"class":517}," saveMove",[511,2498,521],{"class":520},[511,2500,561],{"class":524},[511,2502,575],{"class":520},[511,2504,723],{"class":524},[511,2506,528],{"class":520},[511,2508,1160],{"class":524},[511,2510,575],{"class":520},[511,2512,731],{"class":524},[511,2514,1183],{"class":520},[511,2516,2517,2520,2523],{"class":513,"line":1210},[511,2518,2519],{"class":520},"    }",[511,2521,2522],{"class":567}," catch",[511,2524,531],{"class":520},[511,2526,2527,2530,2532,2534],{"class":513,"line":1236},[511,2528,2529],{"class":567},"      return",[511,2531,610],{"class":609},[511,2533,1641],{"class":520},[511,2535,2536],{"class":791}," \u002F\u002F nothing applied: the card flies back\n",[511,2538,2539],{"class":513,"line":1292},[511,2540,2541],{"class":520},"    }\n",[511,2543,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564,2566,2568,2570,2572,2574,2576,2578,2580,2582,2584],{"class":513,"line":1297},[511,2545,2276],{"class":567},[511,2547,558],{"class":520},[511,2549,1444],{"class":567},[511,2551,2283],{"class":520},[511,2553,1483],{"class":524},[511,2555,528],{"class":520},[511,2557,544],{"class":524},[511,2559,2294],{"class":520},[511,2561,2297],{"class":520},[511,2563,1160],{"class":524},[511,2565,575],{"class":520},[511,2567,741],{"class":524},[511,2569,564],{"class":520},[511,2571,2431],{"class":524},[511,2573,1768],{"class":520},[511,2575,1483],{"class":524},[511,2577,2294],{"class":520},[511,2579,1121],{"class":520},[511,2581,544],{"class":524},[511,2583,1641],{"class":520},[511,2585,2586],{"class":791}," \u002F\u002F lands in its new place\n",[511,2588,2590,2592,2594],{"class":513,"line":2589},14,[511,2591,1157],{"class":567},[511,2593,616],{"class":609},[511,2595,1289],{"class":520},[511,2597,2599],{"class":513,"line":2598},15,[511,2600,1189],{"class":520},[511,2602,2604],{"class":513,"line":2603},16,[511,2605,625],{"class":520},[481,2607,2608,2609,2611,2612,575],{},"Aplique ",[508,2610,1320],{}," antes de a promise resolver, e o overlay pousa na nova ordem. Quando a\nrequisição falha, não aplique nada e rejeite: os itens voltam ao lugar, e os monitores ouvem\n",[508,2613,1924],{},[481,2615,2616,2617,2620,2621,2624],{},"O selo vem do slot ",[508,2618,2619],{},"#overlay"," do provider, que renderiza o overlay de todo arraste. Um\n",[508,2622,2623],{},"DragPreview"," mostra a cópia de sempre do card, e o selo fica por cima enquanto a requisição roda:",[501,2626,2631],{"className":2627,"code":2628,"filename":2629,"language":2630,"meta":506,"style":506},"language-vue shiki shiki-themes dnd-light dnd-light dnd-dark","\u003CDnDProvider>\n  \u003CBoard \u002F>\n  \u003Ctemplate #overlay=\"{ active }\">\n    \u003Cdiv class=\"carried\">\n      \u003CDragPreview :id=\"active.id\" \u002F>\n      \u003Cspan v-if=\"saving\" class=\"saving\">Saving…\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002FDnDProvider>\n","index.vue","vue",[508,2632,2633,2639,2644,2649,2654,2659,2664,2669,2674],{"__ignoreMap":506},[511,2634,2635],{"class":513,"line":514},[511,2636,2638],{"class":2637},"sf6mc","\u003CDnDProvider>\n",[511,2640,2641],{"class":513,"line":534},[511,2642,2643],{"class":524},"  \u003CBoard \u002F>\n",[511,2645,2646],{"class":513,"line":550},[511,2647,2648],{"class":524},"  \u003Ctemplate #overlay=\"{ active }\">\n",[511,2650,2651],{"class":513,"line":622},[511,2652,2653],{"class":524},"    \u003Cdiv class=\"carried\">\n",[511,2655,2656],{"class":513,"line":863},[511,2657,2658],{"class":524},"      \u003CDragPreview :id=\"active.id\" \u002F>\n",[511,2660,2661],{"class":513,"line":1107},[511,2662,2663],{"class":524},"      \u003Cspan v-if=\"saving\" class=\"saving\">Saving…\u003C\u002Fspan>\n",[511,2665,2666],{"class":513,"line":1154},[511,2667,2668],{"class":524},"    \u003C\u002Fdiv>\n",[511,2670,2671],{"class":513,"line":1186},[511,2672,2673],{"class":524},"  \u003C\u002Ftemplate>\n",[511,2675,2676],{"class":513,"line":1192},[511,2677,2678],{"class":2637},"\u003C\u002FDnDProvider>\n",[496,2680,2682],{"id":2681},"dropping-outside-every-target","Soltar fora de qualquer alvo",[481,2684,2685],{},"Arraste um app para fora do dock e solte, em cada modo.",[490,2687],{"height":2688,"hint":2689,"name":2690},"24.5rem","Arraste um app para fora do dock e solte","drop-outside",[501,2692,2695],{"className":503,"code":2693,"filename":2694,"language":505,"meta":506,"style":506},"const { items } = makeSortableList(dock, {\n  items: apps,\n  strategy: 'horizontal',\n  dropOutside: () => props.dropOutside,\n  \u002F\u002F Called on the list the items leave, with `to.index` -1, when they are removed.\n  onDrop: (e) => {\n    if (e.to.index === -1) notice.value = `Removed ${e.items.map((app) => app.name).join(', ')}`;\n  },\n});\n","Dock.vue",[508,2696,2697,2720,2731,2743,2763,2768,2784,2875,2879],{"__ignoreMap":506},[511,2698,2699,2701,2703,2705,2707,2709,2711,2713,2716,2718],{"class":513,"line":514},[511,2700,1444],{"class":567},[511,2702,802],{"class":520},[511,2704,1449],{"class":524},[511,2706,1118],{"class":520},[511,2708,1121],{"class":520},[511,2710,1456],{"class":517},[511,2712,521],{"class":520},[511,2714,2715],{"class":524},"dock",[511,2717,528],{"class":520},[511,2719,531],{"class":520},[511,2721,2722,2724,2726,2729],{"class":513,"line":534},[511,2723,538],{"class":537},[511,2725,541],{"class":520},[511,2727,2728],{"class":524}," apps",[511,2730,547],{"class":520},[511,2732,2733,2736,2738,2741],{"class":513,"line":550},[511,2734,2735],{"class":537},"  strategy",[511,2737,541],{"class":520},[511,2739,2740],{"class":609}," 'horizontal'",[511,2742,547],{"class":520},[511,2744,2745,2748,2750,2752,2754,2756,2758,2761],{"class":513,"line":622},[511,2746,2747],{"class":517},"  dropOutside",[511,2749,541],{"class":520},[511,2751,1986],{"class":520},[511,2753,568],{"class":567},[511,2755,1474],{"class":524},[511,2757,575],{"class":520},[511,2759,2760],{"class":524},"dropOutside",[511,2762,547],{"class":520},[511,2764,2765],{"class":513,"line":863},[511,2766,2767],{"class":791},"  \u002F\u002F Called on the list the items leave, with `to.index` -1, when they are removed.\n",[511,2769,2770,2772,2774,2776,2778,2780,2782],{"class":513,"line":1107},[511,2771,1195],{"class":517},[511,2773,541],{"class":520},[511,2775,558],{"class":520},[511,2777,561],{"class":537},[511,2779,564],{"class":520},[511,2781,568],{"class":567},[511,2783,531],{"class":520},[511,2785,2786,2789,2791,2793,2795,2797,2799,2802,2805,2808,2811,2813,2816,2818,2820,2822,2825,2827,2829,2831,2833,2835,2838,2840,2843,2845,2847,2850,2852,2855,2858,2861,2863,2866,2868,2870,2873],{"class":513,"line":1154},[511,2787,2788],{"class":567},"    if",[511,2790,558],{"class":520},[511,2792,561],{"class":524},[511,2794,575],{"class":520},[511,2796,731],{"class":524},[511,2798,575],{"class":520},[511,2800,2801],{"class":524},"index ",[511,2803,2804],{"class":520},"===",[511,2806,2807],{"class":520}," -",[511,2809,2810],{"class":1174},"1",[511,2812,564],{"class":520},[511,2814,2815],{"class":524}," notice",[511,2817,575],{"class":520},[511,2819,1244],{"class":524},[511,2821,1247],{"class":520},[511,2823,2824],{"class":609}," `Removed ",[511,2826,1253],{"class":520},[511,2828,561],{"class":517},[511,2830,575],{"class":520},[511,2832,578],{"class":517},[511,2834,575],{"class":520},[511,2836,2837],{"class":517},"map",[511,2839,586],{"class":520},[511,2841,2842],{"class":537},"app",[511,2844,564],{"class":520},[511,2846,568],{"class":567},[511,2848,2849],{"class":609}," app",[511,2851,575],{"class":520},[511,2853,2854],{"class":609},"name",[511,2856,2857],{"class":520},").",[511,2859,2860],{"class":517},"join",[511,2862,521],{"class":520},[511,2864,2865],{"class":609},"', '",[511,2867,564],{"class":520},[511,2869,1118],{"class":520},[511,2871,2872],{"class":609},"`",[511,2874,1289],{"class":520},[511,2876,2877],{"class":513,"line":1186},[511,2878,1189],{"class":520},[511,2880,2881],{"class":513,"line":1192},[511,2882,625],{"class":520},[640,2884,2885,2896],{},[643,2886,2887],{},[646,2888,2889,2893],{},[649,2890,2891],{},[508,2892,2760],{},[649,2894,2895],{},"Um drop fora de qualquer alvo…",[656,2897,2898,2908,2921],{},[646,2899,2900,2905],{},[661,2901,2902],{},[508,2903,2904],{},"'placeholder'",[661,2906,2907],{},"Pousa onde o placeholder está: o último lugar que a lista mostrou. O padrão.",[646,2909,2910,2915],{},[661,2911,2912],{},[508,2913,2914],{},"'cancel'",[661,2916,2917,2918,575],{},"É cancelado: os itens voltam ao lugar. O padrão com ",[508,2919,2920],{},"placeholder: 'indicator'",[646,2922,2923,2928],{},[661,2924,2925],{},[508,2926,2927],{},"'remove'",[661,2929,2930,2931,2933,2934,2936,2937,1895,2939,575],{},"Remove os itens da lista deles. O ",[508,2932,499],{}," da lista é consultado primeiro, e o ",[508,2935,1309],{}," dela recebe ",[508,2938,982],{},[508,2940,1898],{},[481,2942,2943,2944,2947,2948,575],{},"Ele é lido no drop, então um ref ou um getter pode trocá-lo. Uma lixeira faz o mesmo de propósito:\n",[508,2945,2946],{},"makeDroppable(trash, { onDrop: (e) => e.source?.remove() })",". Veja\n",[762,2949,2950],{"href":49},"arrastar e soltar",[2952,2953,2954],"style",{},"html pre.shiki code .sbwC8, html code.shiki .sbwC8{--shiki-light:#0969DA;--shiki-default:#0969DA;--shiki-dark:#7CC4FF}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .snmWg, html code.shiki .snmWg{--shiki-light:#27272A;--shiki-default:#27272A;--shiki-dark:#E4E4E7}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}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 .sytrG, html code.shiki .sytrG{--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-default:#85858D;--shiki-default-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic}html pre.shiki code .sR6Ar, html code.shiki .sR6Ar{--shiki-light:#0F766E;--shiki-default:#0F766E;--shiki-dark:#7EE0C0}html pre.shiki code .s3IRZ, html code.shiki .s3IRZ{--shiki-light:#BC4C00;--shiki-default:#BC4C00;--shiki-dark:#F4A261}html pre.shiki code .sf6mc, html code.shiki .sf6mc{--shiki-light:#CF2257;--shiki-default:#CF2257;--shiki-dark:#FF7B9C}",{"title":506,"searchDepth":550,"depth":550,"links":2956},[2957,2958,2961,2962,2963,2964,2965,2968],{"id":498,"depth":534,"text":499},{"id":767,"depth":534,"text":768,"children":2959},[2960],{"id":1015,"depth":550,"text":1016},{"id":1324,"depth":534,"text":1325},{"id":1428,"depth":534,"text":1429},{"id":1845,"depth":534,"text":1846},{"id":2014,"depth":534,"text":2015},{"id":2151,"depth":534,"text":2152,"children":2966},[2967],{"id":2355,"depth":550,"text":2356},{"id":2681,"depth":534,"text":2682},"Aceite, recuse ou adie um drop — regras durante o arraste ou ao soltar, parte de um multi-drag, um diálogo, um servidor que precisa concordar antes, monitores que vetam e drops fora de qualquer alvo.","md",null,{"source":2973},"6759f5344b",{"icon":86},{"title":344,"description":2969},"RGuih7DCUztiaFynVQA8_aBu5N-Ba4ASdSwGurdKHnA",[2978,2980],{"title":340,"path":341,"stem":342,"description":2979,"icon":81},"Trave arrastes em um eixo, mantenha-os dentro de uma caixa, encaixe-os em uma grade ou em guias suas — para um item, uma lista ou uma parte inteira da página.",{"title":348,"path":349,"stem":350,"description":2981,"icon":91},"Os itens deslizam enquanto você ordena, o drop pousa na sua posição, e as mudanças nos dados também podem ser animadas. Ajuste cada uma, anime o overlay, a posição e as listas com CSS, ou traga o motion ou o GSAP.",[2983,2986,2989,2993,2996,3000],{"name":2629,"lang":2630,"code":2984,"html":2985},"\u003Cscript setup lang=\"ts\">\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport Board from '.\u002FBoard.vue';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDnDProvider>\n    \u003CBoard \u002F>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Board \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FBoard.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <Board\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":1589,"lang":2630,"code":2987,"html":2988},"\u003Cscript setup lang=\"ts\">\nimport { reactive, shallowRef } from 'vue';\nimport { useDnDMonitor, type SortableDropEvent } from '@vue-dnd-kit\u002Fcore';\nimport Column from '.\u002FColumn.vue';\nimport ConfirmDialog from '.\u002FConfirmDialog.vue';\nimport type { Answer, Task } from '.\u002Ftypes';\n\nconst columns = reactive([\n  {\n    id: 'todo',\n    title: 'To do',\n    color: '#a1a1aa',\n    tasks: [\n      { id: 'changelog', title: 'Write the changelog' },\n      { id: 'tag', title: 'Tag the release' },\n      { id: 'announce', title: 'Announce it' },\n    ],\n  },\n  {\n    id: 'done',\n    title: 'Done',\n    color: '#42b883',\n    confirm: true,\n    tasks: [{ id: 'tests', title: 'Fix the flaky tests' }],\n  },\n]);\n\n\u002F\u002F The open question: the card it is about, and how to answer the waiting `onBeforeDrop`.\nconst question = shallowRef\u003C{ title: string; resolve: (answer: Answer) => void } | null>(null);\nconst resumed = shallowRef(false);\n\n\u002F** Opens the dialog. The drop waits for the answer, the overlay where it was let go. *\u002F\nconst ask = (event: SortableDropEvent\u003CTask>) =>\n  new Promise\u003CAnswer>((resolve) => {\n    resumed.value = false;\n    question.value = { title: event.items[0]!.title, resolve };\n  });\n\nconst answer = (value: Answer) => {\n  question.value?.resolve(value);\n  question.value = null;\n};\n\n\u002F\u002F After \"Keep dragging\" the card follows the pointer with no button held: a click drops it.\nuseDnDMonitor({\n  onDragResume() {\n    resumed.value = true;\n  },\n  onDragEnd() {\n    resumed.value = false;\n  },\n  onDragCancel() {\n    resumed.value = false;\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"release\">\n    \u003Cdiv class=\"board\">\n      \u003CColumn v-for=\"column in columns\" :key=\"column.id\" :column=\"column\" :ask=\"ask\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cp v-if=\"resumed\" class=\"hint resumed\">Still dragging: click to drop, Esc to cancel\u003C\u002Fp>\n    \u003Cp v-else class=\"hint\">Cards moving into Done ask first\u003C\u002Fp>\n    \u003CConfirmDialog v-if=\"question\" :title=\"question.title\" @answer=\"answer\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.release {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.board {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 220px));\n  gap: 14px;\n  justify-content: center;\n  width: 100%;\n}\n\n.hint {\n  margin: 0;\n  font: 11px\u002F1.4 ui-monospace, Menlo, Consolas, monospace;\n  text-align: center;\n  opacity: 0.55;\n}\n\n.hint.resumed {\n  color: #42b883;\n  opacity: 1;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shallowRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnDMonitor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SortableDropEvent \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Column \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FColumn.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ConfirmDialog \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FConfirmDialog.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ftypes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> columns \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'todo'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'To do'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#a1a1aa'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    tasks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'changelog'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Write the changelog'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'tag'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Tag the release'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'announce'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Announce it'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'done'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Done'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#42b883'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    confirm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    tasks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'tests'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Fix the flaky tests'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The open question: the card it is about, and how to answer the waiting `onBeforeDrop`.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> question \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> void\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> resumed \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** Opens the dialog. The drop waits for the answer, the overlay where it was let go. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ask\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> SortableDropEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    resumed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    question\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> resolve \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  question\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  question\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F After \"Keep dragging\" the card follows the pointer with no button held: a click drops it.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">useDnDMonitor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragResume\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    resumed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragEnd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    resumed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragCancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    resumed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"release\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"board\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">ask\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ask\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"resumed\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hint resumed\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Still dragging: click to drop, Esc to cancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hint\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Cards moving into Done ask first\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ConfirmDialog\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">question\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">question\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">release\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">board\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 220\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">resumed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2990,"lang":2630,"code":2991,"html":2992},"Card.vue","\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\nimport type { Task } from '.\u002Ftypes';\n\nconst props = defineProps\u003C{ task: Task }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\nmakeSortableItem(el, { item: () => props.task });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"card\">{{ task.title }}\u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.card {\n  position: relative;\n  padding: 12px;\n  border-radius: 10px;\n  background: Canvas;\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, currentColor 9%, transparent),\n    0 2px 4px -2px rgb(0 0 0 \u002F 0.25);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: grab;\n  user-select: none;\n}\n\n.card:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\n\u002F* The slot the dragged card will land in: an empty, dashed box. *\u002F\n.card[data-dnd-placeholder] {\n  opacity: 1;\n}\n\n.card[data-dnd-placeholder]::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border: 1.5px dashed color-mix(in srgb, currentColor 30%, transparent);\n  border-radius: inherit;\n  background: color-mix(in srgb, currentColor 3%, Canvas);\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ftypes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"card\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ task.title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 500\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The slot the dragged card will land in: an empty, dashed box. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> dashed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":784,"lang":2630,"code":2994,"html":2995},"\u003Cscript setup lang=\"ts\">\nimport { toRef, useTemplateRef } from 'vue';\nimport { makeSortableList, type SortableDropEvent } from '@vue-dnd-kit\u002Fcore';\nimport Card from '.\u002FCard.vue';\nimport type { Answer, Column, Task } from '.\u002Ftypes';\n\nconst props = defineProps\u003C{\n  column: Column;\n  ask: (event: SortableDropEvent\u003CTask>) => Promise\u003CAnswer>;\n}>();\n\nconst zone = useTemplateRef\u003CHTMLElement>('zone');\nconst list = useTemplateRef\u003CHTMLElement>('list');\nconst { items, isOver } = makeSortableList(list, {\n  id: props.column.id,\n  items: toRef(props.column, 'tasks'),\n  group: 'release',\n  dropzone: zone,\n  \u002F\u002F Decides the drop before anything changes. A card coming from another column waits\n  \u002F\u002F for the answer here: 'accept', 'reject', or 'continue' to keep dragging it.\n  onBeforeDrop: (event) => (props.column.confirm && !event.sameList ? props.ask(event) : 'accept'),\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection ref=\"zone\" class=\"column\" :class=\"{ over: isOver }\">\n    \u003Ch3>\n      \u003Cspan class=\"dot\" :style=\"{ background: column.color }\" \u002F>\n      \u003Cspan class=\"title\">{{ column.title }}\u003C\u002Fspan>\n      \u003Cspan class=\"count\">{{ column.tasks.length }}\u003C\u002Fspan>\n    \u003C\u002Fh3>\n    \u003Cul ref=\"list\" class=\"cards\">\n      \u003CCard v-for=\"task in items\" :key=\"task.id\" :task=\"task\" \u002F>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.column {\n  display: flex;\n  flex-direction: column;\n  padding: 10px;\n  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);\n  border-radius: 14px;\n  background: color-mix(in srgb, currentColor 3%, transparent);\n  transition:\n    background 0.2s,\n    border-color 0.2s;\n}\n\n.column.over {\n  border-color: color-mix(in srgb, #42b883 60%, transparent);\n  background: color-mix(in srgb, #42b883 6%, transparent);\n}\n\nh3 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 4px 4px 12px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n\n.count {\n  margin-left: auto;\n  padding: 3px 7px;\n  border-radius: 99px;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n}\n\n.cards {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-height: 150px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> toRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SortableDropEvent \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Card \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FCard.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ftypes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  ask\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> SortableDropEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zone \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'zone'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isOver \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> toRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'tasks'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  group\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'release'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  dropzone\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zone\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Decides the drop before anything changes. A card coming from another column waits\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F for the answer here: 'accept', 'reject', or 'continue' to keep dragging it.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onBeforeDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">confirm \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">sameList \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">ask\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'accept'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"zone\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ over: isOver }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <h3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"dot\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ background: column.color }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"title\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ column.title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"count\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ column.tasks.length }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"cards\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fsection>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    background \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    border-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">dot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin-left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 99\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">cards\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 150\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2997,"lang":2630,"code":2998,"html":2999},"ConfirmDialog.vue","\u003Cscript setup lang=\"ts\">\nimport { onMounted, useTemplateRef } from 'vue';\nimport type { Answer } from '.\u002Ftypes';\n\ndefineProps\u003C{ title: string }>();\nconst emit = defineEmits\u003C{ answer: [answer: Answer] }>();\n\nconst dialog = useTemplateRef\u003CHTMLDialogElement>('dialog');\n\u002F\u002F A modal dialog sits on top of everything, the overlay waiting where it was let go too.\nonMounted(() => dialog.value?.showModal());\n\nconst reply = (answer: Answer) => {\n  dialog.value?.close();\n  emit('answer', answer);\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- Escape (the dialog's `cancel` event) answers like Cancel. -->\n  \u003Cdialog ref=\"dialog\" class=\"confirm\" @cancel.prevent=\"reply('reject')\">\n    \u003Cp class=\"question\">Move to Done?\u003C\u002Fp>\n    \u003Cp class=\"subject\">{{ title }}\u003C\u002Fp>\n    \u003Cdiv class=\"actions\">\n      \u003Cbutton type=\"button\" @click=\"reply('reject')\">Cancel\u003C\u002Fbutton>\n      \u003Cbutton type=\"button\" @click=\"reply('continue')\">Keep dragging\u003C\u002Fbutton>\n      \u003Cbutton type=\"button\" class=\"primary\" autofocus @click=\"reply('accept')\">Move\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdialog>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.confirm {\n  \u002F* A modal dialog centers itself with auto margins: keep them if a CSS reset zeroes margins. *\u002F\n  margin: auto;\n  width: min(340px, calc(100vw - 32px));\n  padding: 20px;\n  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);\n  border-radius: 14px;\n  background: Canvas;\n  color: CanvasText;\n  box-shadow: 0 24px 48px -16px rgb(0 0 0 \u002F 0.5);\n}\n\n.confirm::backdrop {\n  background: rgb(0 0 0 \u002F 0.4);\n}\n\n.question {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 700;\n}\n\n.subject {\n  margin: 6px 0 18px;\n  font-size: 13px;\n  opacity: 0.7;\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 8px;\n}\n\nbutton {\n  padding: 7px 12px;\n  border: 0;\n  border-radius: 8px;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  color: inherit;\n  font: 600 12px\u002F1.2 system-ui, sans-serif;\n  cursor: pointer;\n}\n\nbutton.primary {\n  background: #42b883;\n  color: #fff;\n}\n\nbutton:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> onMounted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Answer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ftypes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> emit \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineEmits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dialog \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLDialogElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'dialog'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A modal dialog sits on top of everything, the overlay waiting where it was let go too.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">onMounted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> dialog\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">showModal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> reply\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  dialog\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">close\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  emit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'answer'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  <!-- Escape (the dialog's `cancel` event) answers like Cancel. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <dialog\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"dialog\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"confirm\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @cancel.prevent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"reply('reject')\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"question\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Move to Done?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"subject\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"actions\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"reply('reject')\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Cancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"reply('continue')\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Keep dragging\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"primary\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> autofocus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"reply('accept')\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Move\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdialog>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">confirm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F* A modal dialog centers itself with auto margins: keep them if a CSS reset zeroes margins. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">340\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">vw\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 32\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 20\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> CanvasText\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 48\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">confirm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">backdrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">question\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">subject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">actions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex-end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> system-ui\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> sans-serif\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">primary\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3001,"lang":505,"code":3002,"html":3003},"types.ts","export interface Task {\n  id: string;\n  title: string;\n}\n\nexport interface Column {\n  id: string;\n  title: string;\n  color: string;\n  \u002F** Cards coming in from another column ask first. *\u002F\n  confirm?: boolean;\n  tasks: Task[];\n}\n\n\u002F** What the dialog answers: words that `onBeforeDrop` understands as they are. *\u002F\nexport type Answer = 'accept' | 'continue' | 'reject';","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Cards coming in from another column ask first. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  confirm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  tasks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** What the dialog answers: words that `onBeforeDrop` understands as they are. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'accept'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'continue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'reject'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3005,3008,3011,3014],{"name":2629,"lang":2630,"code":3006,"html":3007},"\u003Cscript setup lang=\"ts\">\nimport { reactive } from 'vue';\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport Column from '.\u002FColumn.vue';\n\nconst columns = reactive([\n  {\n    id: 'desktop',\n    title: 'Desktop',\n    files: [\n      { id: 'notes', name: 'notes.pdf', size: 2 },\n      { id: 'demo', name: 'demo.mov', size: 48 },\n      { id: 'logo', name: 'logo.png', size: 1 },\n      { id: 'backup', name: 'backup.zip', size: 120 },\n    ],\n  },\n  \u002F\u002F Both take files of 10 MB at most, and say so at different times.\n  { id: 'email', title: 'Email', rule: 'put' as const, files: [] },\n  { id: 'chat', title: 'Chat', rule: 'onBeforeDrop' as const, files: [] },\n]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDnDProvider>\n    \u003Cdiv class=\"board\">\n      \u003CColumn v-for=\"column in columns\" :key=\"column.id\" :column=\"column\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.board {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 10px;\n}\n\n.board > * {\n  flex: 0 1 170px;\n  min-width: 150px;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reactive \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Column \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FColumn.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> columns \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'desktop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Desktop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    files\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'notes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'notes.pdf'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'demo'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'demo.mov'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 48\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'logo'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'logo.png'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'backup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'backup.zip'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 120\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Both take files of 10 MB at most, and say so at different times.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'email'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Email'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> rule\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'put'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> files\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> []\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'chat'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Chat'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> rule\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'onBeforeDrop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> files\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> []\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"board\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">board\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">board\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 170\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 150\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2990,"lang":2630,"code":3009,"html":3010},"\u003Cscript setup lang=\"ts\">\nimport { computed, useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\nimport { LIMIT, type Attachment } from '.\u002Ffiles';\n\nconst props = defineProps\u003C{ file: Attachment }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\nmakeSortableItem(el, { item: () => props.file });\n\nconst tooBig = computed(() => props.file.size > LIMIT);\nconst extension = computed(() => props.file.name.split('.').pop());\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"file\">\n    \u003Cspan class=\"kind\" aria-hidden=\"true\">{{ extension }}\u003C\u002Fspan>\n    \u003Cspan class=\"text\">\n      \u003Cspan class=\"name\">{{ file.name }}\u003C\u002Fspan>\n      \u003Cspan class=\"size\" :class=\"{ big: tooBig }\">{{ file.size }} MB{{ tooBig ? ' · too big' : '' }}\u003C\u002Fspan>\n    \u003C\u002Fspan>\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.file {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 8px 10px;\n  border-radius: 9px;\n  background: Canvas;\n  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent);\n  font-size: 12px;\n  cursor: grab;\n  user-select: none;\n}\n\n.file:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\n.file[data-dnd-placeholder] {\n  opacity: 1;\n  background: transparent;\n  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 25%, transparent);\n}\n\n.file[data-dnd-placeholder] > * {\n  visibility: hidden;\n}\n\n.kind {\n  display: grid;\n  flex: none;\n  place-items: center;\n  width: 30px;\n  height: 34px;\n  border-radius: 4px 10px 4px 4px;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  font: 700 8px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  text-transform: uppercase;\n}\n\n.text {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  min-width: 0;\n}\n\n.name {\n  overflow: hidden;\n  font-weight: 500;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.size {\n  font: 10px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.6;\n}\n\n.size.big {\n  color: #e5a00d;\n  opacity: 1;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> LIMIT\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Attachment \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ffiles'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Attachment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">file \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tooBig \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> LIMIT\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> extension \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">split\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'.'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">pop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"file\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"kind\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ extension }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"text\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"name\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ file.name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"size\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ big: tooBig }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ file.size }} MB{{ tooBig ? ' · too big' : '' }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  place-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 34\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> uppercase\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 500\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ellipsis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">big\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">e5a00d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":784,"lang":2630,"code":3012,"html":3013},"\u003Cscript setup lang=\"ts\">\nimport { ref, toRef, useTemplateRef } from 'vue';\nimport { makeSortableList, useDnDMonitor, type SortableGroupOptions } from '@vue-dnd-kit\u002Fcore';\nimport Card from '.\u002FCard.vue';\nimport { LIMIT, fits, type Attachment } from '.\u002Ffiles';\n\nconst props = defineProps\u003C{\n  column: { id: string; title: string; rule?: 'put' | 'onBeforeDrop'; files: Attachment[] };\n}>();\n\n\u002F\u002F The same rule, two ways.\n\u002F\u002F `group.put`: asked while dragging. A refused drag never enters the list.\nconst group: SortableGroupOptions =\n  props.column.rule === 'put'\n    ? { name: 'attachments', put: ({ items }) => fits(items as Attachment[]) }\n    : { name: 'attachments' };\n\n\u002F\u002F What the last release sent back, until the next drag.\nconst notice = ref('');\nuseDnDMonitor({ onDragStart: () => (notice.value = '') });\n\nconst list = useTemplateRef\u003CHTMLElement>('list');\nconst { items, isOver, isAccepting } = makeSortableList(list, {\n  id: props.column.id,\n  items: toRef(props.column, 'files'),\n  group,\n  \u002F\u002F `onBeforeDrop`: asked on release. The drag enters the list, then flies back.\n  onBeforeDrop: (event) => {\n    if (props.column.rule !== 'onBeforeDrop' || fits(event.items)) return 'accept';\n    notice.value = `${event.items[0]!.name}: over ${LIMIT} MB, sent back`;\n    return 'reject';\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"column\" :class=\"{ over: isOver && isAccepting, refuses: isOver && !isAccepting }\">\n    \u003Ch3>{{ column.title }}\u003C\u002Fh3>\n    \u003Ccode v-if=\"column.rule\" class=\"rule\">{{ column.rule === 'put' ? 'group.put' : 'onBeforeDrop' }}\u003C\u002Fcode>\n    \u003Cul ref=\"list\" class=\"files\">\n      \u003CCard v-for=\"file in items\" :key=\"file.id\" :file=\"file\" \u002F>\n    \u003C\u002Ful>\n    \u003Cp v-if=\"column.rule === 'onBeforeDrop'\" class=\"notice\" role=\"status\">{{ notice }}\u003C\u002Fp>\n    \u003Cp v-else-if=\"column.rule === 'put'\" class=\"notice refused\">{{ isOver && !isAccepting ? `Over ${LIMIT} MB: refused` : '' }}\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.column {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  padding: 10px;\n  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);\n  border-radius: 14px;\n  background: color-mix(in srgb, currentColor 3%, transparent);\n  transition:\n    border-color 0.2s,\n    background 0.2s;\n}\n\n.column.over {\n  border-color: color-mix(in srgb, #42b883 60%, transparent);\n}\n\n.column.refuses {\n  border-color: color-mix(in srgb, #e5484d 70%, transparent);\n  background: color-mix(in srgb, #e5484d 6%, transparent);\n}\n\nh3 {\n  margin: 2px 4px 4px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.rule {\n  align-self: flex-start;\n  margin: 0 4px 10px;\n  font: 10px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  color: #42b883;\n}\n\n.files {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-height: 170px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.notice {\n  min-height: 15px;\n  margin: 8px 4px 0;\n  font: 11px\u002F1.4 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.7;\n}\n\n.notice.refused {\n  color: #e5484d;\n  opacity: 1;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> toRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnDMonitor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SortableGroupOptions \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Card \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FCard.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> LIMIT\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> fits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Attachment \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ffiles'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> rule\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'put'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'onBeforeDrop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> files\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Attachment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The same rule, two ways.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F `group.put`: asked while dragging. A refused drag never enters the list.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> group\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> SortableGroupOptions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">rule \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'put'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'attachments'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> put\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> })\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> fits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">items \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Attachment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[])\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'attachments'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F What the last release sent back, until the next drag.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> notice \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">useDnDMonitor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> onDragStart\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isOver\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isAccepting \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> toRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'files'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  group\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F `onBeforeDrop`: asked on release. The drag enters the list, then flies back.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onBeforeDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">rule \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'onBeforeDrop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> fits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'accept'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">: over \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">LIMIT\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> MB, sent back`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'reject'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ over: isOver && isAccepting, refuses: isOver && !isAccepting }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <h3>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ column.title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column.rule\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"rule\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ column.rule === 'put' ? 'group.put' : 'onBeforeDrop' }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fcode>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"files\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">file \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column.rule === 'onBeforeDrop'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"notice\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"status\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ notice }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column.rule === 'put'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"notice refused\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ isOver && !isAccepting ? `Over ${LIMIT} MB: refused` : '' }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fsection>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    border-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    background \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">refuses\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">e5484d \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">70\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">e5484d \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">rule\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex-start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">files\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 170\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">refused\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">e5484d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3015,"lang":505,"code":3016,"html":3017},"files.ts","export interface Attachment {\n  id: string;\n  name: string;\n  \u002F** In megabytes. *\u002F\n  size: number;\n}\n\n\u002F** The largest attachment both places take, in megabytes. *\u002F\nexport const LIMIT = 10;\n\nexport const fits = (files: Attachment[]) => files.every((file) => file.size \u003C= LIMIT);","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Attachment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** In megabytes. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** The largest attachment both places take, in megabytes. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> LIMIT \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> fits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">files\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Attachment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[])\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> files\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">every\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> file\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> LIMIT\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3019,3022,3025,3029],{"name":2629,"lang":2630,"code":3020,"html":3021},"\u003Cscript setup lang=\"ts\">\nimport { reactive } from 'vue';\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport Column from '.\u002FColumn.vue';\n\nconst columns = reactive([\n  {\n    id: 'waiting',\n    title: 'Waiting list',\n    people: [\n      { id: 'ada', name: 'Ada', hue: 200 },\n      { id: 'bo', name: 'Bo', hue: 30 },\n      { id: 'cy', name: 'Cyrus', hue: 280 },\n      { id: 'dee', name: 'Dee', hue: 140 },\n    ],\n  },\n  {\n    id: 'workshop',\n    title: 'Workshop',\n    seats: true,\n    people: [\n      { id: 'eli', name: 'Eli', hue: 340 },\n      { id: 'fay', name: 'Fay', hue: 90 },\n    ],\n  },\n]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDnDProvider>\n    \u003Cdiv class=\"demo\">\n      \u003Cp class=\"tip\">Tick a few people, then drag one of them into the workshop\u003C\u002Fp>\n      \u003Cdiv class=\"board\">\n        \u003CColumn v-for=\"column in columns\" :key=\"column.id\" :column=\"column\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.demo {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n}\n\n.tip {\n  margin: 0;\n  font: 11px\u002F1.4 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.55;\n}\n\n.board {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 230px));\n  justify-content: center;\n  gap: 14px;\n  width: 100%;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reactive \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Column \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FColumn.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> columns \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'waiting'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Waiting list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    people\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ada'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ada'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'bo'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Bo'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'cy'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Cyrus'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 280\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dee'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Dee'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 140\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'workshop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Workshop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    seats\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    people\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'eli'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Eli'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 340\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'fay'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Fay'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 90\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"demo\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tip\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Tick a few people, then drag one of them into the workshop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"board\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <Column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">demo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">board\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">auto-fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 230\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":784,"lang":2630,"code":3023,"html":3024},"\u003Cscript setup lang=\"ts\">\nimport { ref, toRef, useTemplateRef } from 'vue';\nimport { makeSortableList, useDnD } from '@vue-dnd-kit\u002Fcore';\nimport PersonRow from '.\u002FPersonRow.vue';\nimport { CAPACITY, seatsLeft, type Person } from '.\u002Fserver';\n\nconst props = defineProps\u003C{ column: { id: string; title: string; seats?: boolean; people: Person[] } }>();\n\nconst notice = ref('');\n\u002F\u002F Seats booked by others, as the server last said.\nconst others = ref(0);\nconst why = ref('');\nconst { selection } = useDnD();\nconst list = useTemplateRef\u003CHTMLElement>('list');\nconst { items, isOver } = makeSortableList(list, {\n  id: props.column.id,\n  items: toRef(props.column, 'people'),\n  group: 'workshop',\n  \u002F\u002F Only the server knows how many seats are left. The drop waits for it, the overlay\n  \u002F\u002F where it was let go, then takes as many people as fit: the others fly back.\n  onBeforeDrop: async (event) => {\n    if (!props.column.seats || event.sameList) return 'accept';\n    notice.value = 'Checking seats…';\n    const { free, takenElsewhere } = await seatsLeft(props.column.people.length + others.value);\n    others.value += takenElsewhere;\n    why.value = takenElsewhere ? 'a seat just went to someone else' : 'the workshop is full';\n    if (!free) notice.value = `None booked: ${why.value}`;\n    \u002F\u002F No keys at all: nothing lands, and `onDrop` isn't called.\n    return event.keys.slice(0, free);\n  },\n  onDrop: (event) => {\n    if (!props.column.seats || event.sameList) return;\n    \u002F\u002F The people sent back stay selected.\n    selection.delete(...event.accepted);\n    notice.value = event.rejected.length\n      ? `${event.accepted.length} booked, ${event.rejected.length} back: ${why.value}`\n      : `${event.accepted.length} booked`;\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"column\" :class=\"{ over: isOver }\">\n    \u003Ch3>\n      {{ column.title }}\n      \u003Cspan v-if=\"column.seats\" class=\"seats\">{{ column.people.length + others }} \u002F {{ CAPACITY }} seats\u003C\u002Fspan>\n    \u003C\u002Fh3>\n    \u003Cul ref=\"list\" class=\"people\">\n      \u003CPersonRow v-for=\"person in items\" :key=\"person.id\" :person=\"person\" \u002F>\n    \u003C\u002Ful>\n    \u003Cp v-if=\"column.seats\" class=\"notice\" role=\"status\">{{ notice }}\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.column {\n  display: flex;\n  flex-direction: column;\n  padding: 10px;\n  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);\n  border-radius: 14px;\n  background: color-mix(in srgb, currentColor 3%, transparent);\n  transition: border-color 0.2s;\n}\n\n.column.over {\n  border-color: color-mix(in srgb, #42b883 60%, transparent);\n}\n\nh3 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 2px 4px 10px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.seats {\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  font-weight: 400;\n  opacity: 0.6;\n}\n\n.people {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-height: 210px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.notice {\n  min-height: 15px;\n  margin: 10px 4px 0;\n  font: 11px\u002F1.4 ui-monospace, Menlo, Consolas, monospace;\n  color: #42b883;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> toRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> PersonRow \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FPersonRow.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> CAPACITY\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> seatsLeft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Person \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Fserver'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> seats\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> people\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> notice \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Seats booked by others, as the server last said.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> others \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> why \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selection \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isOver \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> toRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'people'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  group\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'workshop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Only the server knows how many seats are left. The drop waits for it, the overlay\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F where it was let go, then takes as many people as fit: the others fly back.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onBeforeDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">seats \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">sameList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'accept'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Checking seats…'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> free\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> takenElsewhere \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> seatsLeft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">people\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> others\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    others\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> takenElsewhere\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    why\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> takenElsewhere \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'a seat just went to someone else'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'the workshop is full'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">free\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `None booked: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">why\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    \u002F\u002F No keys at all: nothing lands, and `onDrop` isn't called.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">slice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> free\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">seats \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">sameList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    \u002F\u002F The people sent back stay selected.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">delete\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">accepted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">rejected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">accepted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> booked, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">rejected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> back: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">why\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">accepted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> booked`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ over: isOver }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <h3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      {{ column.title }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column.seats\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"seats\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ column.people.length + others }} \u002F {{ CAPACITY }} seats\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"people\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <PersonRow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">person \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column.seats\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"notice\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"status\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ notice }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fsection>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> border-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> space-between\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">seats\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 400\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">people\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 210\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3026,"lang":2630,"code":3027,"html":3028},"PersonRow.vue","\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\nimport type { Person } from '.\u002Fserver';\n\nconst props = defineProps\u003C{ person: Person }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\u002F\u002F `selected` is the provider's selection for this row: drag a selected row, and every\n\u002F\u002F selected row comes along.\nconst { selected } = makeSortableItem(el, { item: () => props.person });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"person\" :class=\"{ selected }\">\n    \u003Cinput v-model=\"selected\" type=\"checkbox\" :aria-label=\"`Select ${person.name}`\" \u002F>\n    \u003Cspan class=\"avatar\" :style=\"{ '--hue': person.hue }\" aria-hidden=\"true\">{{ person.name[0] }}\u003C\u002Fspan>\n    \u003Cspan class=\"name\">{{ person.name }}\u003C\u002Fspan>\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.person {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 7px 10px;\n  border-radius: 99px;\n  background: Canvas;\n  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent);\n  font-size: 13px;\n  cursor: grab;\n  user-select: none;\n}\n\n.person.selected {\n  background: color-mix(in srgb, #42b883 12%, Canvas);\n  box-shadow: 0 0 0 1.5px #42b883;\n}\n\n.person[data-dnd-placeholder] {\n  opacity: 1;\n  background: none;\n  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 22%, transparent);\n}\n\n.person[data-dnd-placeholder] > * {\n  visibility: hidden;\n}\n\ninput {\n  margin: 0;\n  accent-color: #42b883;\n  cursor: pointer;\n}\n\n.avatar {\n  display: grid;\n  flex: none;\n  place-items: center;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: hsl(var(--hue) 60% 55%);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 700;\n}\n\n.name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Person \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Fserver'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F `selected` is the provider's selection for this row: drag a selected row, and every\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F selected row comes along.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">person \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"person\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ selected }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-model\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"selected\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"checkbox\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"`Select ${person.name}`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"avatar\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ '--hue': person.hue }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ person.name[0] }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"name\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ person.name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 99\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  accent-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">avatar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  place-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ellipsis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3030,"lang":505,"code":3031,"html":3032},"server.ts","export interface Person {\n  id: string;\n  name: string;\n  hue: number;\n}\n\nexport const CAPACITY = 5;\n\n\u002F**\n * The booking server: how many seats are left for the people being added. Others book\n * the workshop too, so the count is only known when asked: sometimes a seat has just gone.\n *\u002F\nexport const seatsLeft = (booked: number): Promise\u003C{ free: number; takenElsewhere: number }> =>\n  new Promise((resolve) =>\n    setTimeout(() => {\n      const takenElsewhere = Math.min(Math.random() \u003C 0.5 ? 1 : 0, CAPACITY - booked);\n      resolve({ free: CAPACITY - booked - takenElsewhere, takenElsewhere });\n    }, 700),\n  );","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Person\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> CAPACITY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> * The booking server: how many seats are left for the people being added. Others book\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> * the workshop too, so the count is only known when asked: sometimes a seat has just gone.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> seatsLeft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">booked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> free\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> takenElsewhere\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    setTimeout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> takenElsewhere \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">random\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> CAPACITY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> booked\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">      resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> free\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> CAPACITY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> booked \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> takenElsewhere\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> takenElsewhere \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    },\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  );\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3034,3037,3040,3043,3047],{"name":2629,"lang":2630,"code":3035,"html":3036},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport Monitor from '.\u002FMonitor.vue';\nimport Notes from '.\u002FNotes.vue';\nimport { ANSWERS, type Answer } from '.\u002Ftypes';\n\nconst monitorAnswer = ref\u003CAnswer>('accept');\nconst targetAnswer = ref\u003CAnswer>('accept');\n\n\u002F\u002F Every hook of the last drop, in the order they ran.\nconst steps = ref\u003C{ who: string; what: string }[]>([]);\nconst trace = (who: string, what: string) => steps.value.push({ who, what });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDnDProvider\n    @drag-start=\"steps = []\"\n    @drag-end=\"trace('provider', '@drag-end')\"\n    @drag-cancel=\"trace('provider', '@drag-cancel')\"\n    @drag-settle=\"trace('provider', '@drag-settle: landed')\"\n  >\n    \u003Cdiv class=\"demo\">\n      \u003Cdiv class=\"switches\">\n        \u003Cfieldset>\n          \u003Clegend>monitor answers\u003C\u002Flegend>\n          \u003Clabel v-for=\"value in ANSWERS\" :key=\"value\" :class=\"{ on: monitorAnswer === value }\">\n            \u003Cinput v-model=\"monitorAnswer\" type=\"radio\" :value=\"value\" \u002F>\n            {{ value }}\n          \u003C\u002Flabel>\n        \u003C\u002Ffieldset>\n        \u003Cfieldset>\n          \u003Clegend>target answers\u003C\u002Flegend>\n          \u003Clabel v-for=\"value in ANSWERS\" :key=\"value\" :class=\"{ on: targetAnswer === value }\">\n            \u003Cinput v-model=\"targetAnswer\" type=\"radio\" :value=\"value\" \u002F>\n            {{ value }}\n          \u003C\u002Flabel>\n        \u003C\u002Ffieldset>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"layout\">\n        \u003CNotes :answer=\"targetAnswer\" :trace=\"trace\" \u002F>\n        \u003Col class=\"steps\" aria-label=\"Hooks of the last drop\">\n          \u003Cli v-for=\"(step, index) in steps\" :key=\"index\">\n            \u003Cspan class=\"who\">{{ step.who }}\u003C\u002Fspan>{{ step.what }}\n          \u003C\u002Fli>\n          \u003Cli v-if=\"!steps.length\" class=\"empty\">Move a note, or drop one in the trash\u003C\u002Fli>\n        \u003C\u002Fol>\n      \u003C\u002Fdiv>\n      \u003CMonitor :answer=\"monitorAnswer\" :trace=\"trace\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.demo {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.switches {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 10px 16px;\n}\n\nfieldset {\n  display: inline-flex;\n  margin: 0;\n  padding: 3px;\n  border: 0;\n  border-radius: 9px;\n  background: color-mix(in srgb, currentColor 7%, transparent);\n}\n\nlegend {\n  float: left;\n  align-self: center;\n  padding: 0 8px 0 6px;\n  font: 10px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.55;\n}\n\nlabel {\n  padding: 5px 10px;\n  border-radius: 6px;\n  font: 12px\u002F1.2 ui-monospace, Menlo, Consolas, monospace;\n  cursor: pointer;\n}\n\nlabel.on {\n  background: Canvas;\n  box-shadow: 0 1px 3px rgb(0 0 0 \u002F 0.25);\n  font-weight: 600;\n}\n\nlabel:has(input:focus-visible) {\n  outline: 2px solid #42b883;\n}\n\ninput {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.layout {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 16px;\n}\n\n.steps {\n  box-sizing: border-box;\n  min-width: 220px;\n  min-height: 150px;\n  margin: 0;\n  padding: 10px 14px 10px 32px;\n  border-radius: 10px;\n  background: color-mix(in srgb, currentColor 5%, transparent);\n  font: 11px\u002F1.8 ui-monospace, Menlo, Consolas, monospace;\n  white-space: nowrap;\n  list-style: decimal;\n}\n\n.steps li::marker {\n  color: color-mix(in srgb, currentColor 45%, transparent);\n}\n\n.who {\n  display: inline-block;\n  min-width: 60px;\n  color: #42b883;\n}\n\n.steps li.empty {\n  margin-left: -18px;\n  list-style: none;\n  opacity: 0.45;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Monitor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FMonitor.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Notes \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FNotes.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ANSWERS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Answer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ftypes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> monitorAnswer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'accept'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targetAnswer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'accept'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Every hook of the last drop, in the order they ran.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> steps \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> who\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> what\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }[]>([]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">who\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> what\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> steps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">push\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> who\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> what \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">drag-start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">steps \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> []\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">drag-end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'provider'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@drag-end'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">drag-cancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'provider'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@drag-cancel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">drag-settle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'provider'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@drag-settle: landed'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"demo\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"switches\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <fieldset>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <legend>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">monitor answers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Flegend>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value in ANSWERS\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ on: monitorAnswer === value }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">            <input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-model\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"monitorAnswer\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"radio\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">            {{ value }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <\u002Flabel>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Ffieldset>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <fieldset>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <legend>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target answers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Flegend>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value in ANSWERS\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ on: targetAnswer === value }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">            <input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-model\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"targetAnswer\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"radio\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">            {{ value }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <\u002Flabel>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Ffieldset>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"layout\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <Notes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">targetAnswer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"steps\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Hooks of the last drop\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"(step, index) in steps\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"index\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">            <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"who\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ step.who }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ step.what }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"!steps.length\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"empty\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Move a note, or drop one in the trash\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Fol>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Monitor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">monitorAnswer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">demo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">switches\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">fieldset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inline-flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">legend\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  float\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">layout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex-start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">steps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 220\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 150\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 32\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> decimal\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">steps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">marker\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">who\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inline-block\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">steps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">empty\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin-left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2990,"lang":2630,"code":3038,"html":3039},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ task: { id: string; title: string } }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\nmakeSortableItem(el, { item: () => props.task });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"card\">\u003Cspan>{{ task.title }}\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.card {\n  padding: 9px 10px;\n  border-radius: 8px;\n  background: Canvas;\n  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: grab;\n  user-select: none;\n}\n\n.card:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\n.card[data-dnd-placeholder] {\n  opacity: 1;\n  background: transparent;\n  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 25%, transparent);\n}\n\n.card[data-dnd-placeholder] > * {\n  visibility: hidden;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"card\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">><span>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ task.title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan><\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 500\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":1941,"lang":2630,"code":3041,"html":3042},"\u003Cscript setup lang=\"ts\">\nimport { useDnDMonitor } from '@vue-dnd-kit\u002Fcore';\nimport type { Answer, Trace } from '.\u002Ftypes';\n\nconst props = defineProps\u003C{ answer: Answer; trace: Trace }>();\n\n\u002F\u002F Hears every drag under the provider, and decides before the target does.\nuseDnDMonitor({\n  onBeforeDrop: () => {\n    props.trace('monitor', `onBeforeDrop → ${props.answer}`);\n    return props.answer;\n  },\n  onDragEnd: () => props.trace('monitor', 'onDragEnd'),\n  onDragCancel: () => props.trace('monitor', 'onDragCancel'),\n  onDragResume: () => props.trace('monitor', 'onDragResume: click to drop'),\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp class=\"note\">A monitor answers every drop first: “reject” or “continue” end the asking before the target is asked.\u003C\u002Fp>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.note {\n  max-width: 440px;\n  margin: 0;\n  font: 11px\u002F1.5 ui-monospace, Menlo, Consolas, monospace;\n  text-align: center;\n  opacity: 0.55;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnDMonitor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Trace \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ftypes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Hears every drag under the provider, and decides before the target does.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">useDnDMonitor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onBeforeDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'monitor'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `onBeforeDrop → \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragEnd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'monitor'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'onDragEnd'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragCancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'monitor'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'onDragCancel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragResume\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'monitor'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'onDragResume: click to drop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"note\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">A monitor answers every drop first: “reject” or “continue” end the asking before the target is asked.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">note\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  max-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 440\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3044,"lang":2630,"code":3045,"html":3046},"Notes.vue","\u003Cscript setup lang=\"ts\">\nimport { ref, useTemplateRef, watch } from 'vue';\nimport { makeDroppable, makeSortableList } from '@vue-dnd-kit\u002Fcore';\nimport Card from '.\u002FCard.vue';\nimport type { Answer, Trace } from '.\u002Ftypes';\n\nconst props = defineProps\u003C{ answer: Answer; trace: Trace }>();\n\nconst notes = ref([\n  { id: 'milk', title: 'Buy oat milk' },\n  { id: 'call', title: 'Call the plumber' },\n  { id: 'book', title: 'Return the book' },\n  { id: 'plants', title: 'Water the plants' },\n]);\n\nconst list = useTemplateRef\u003CHTMLElement>('list');\nconst { items } = makeSortableList(list, {\n  id: 'notes',\n  items: notes,\n  \u002F\u002F Asked when the notes are reordered: the list is the target.\n  onBeforeDrop: () => {\n    props.trace('list', `onBeforeDrop → ${props.answer}`);\n    return props.answer;\n  },\n  \u002F\u002F Told when it is the target, and when notes leave it for the trash (`to.index` -1).\n  onDrop: (event) => props.trace('list', event.to.index \u003C 0 ? 'onDrop, removed' : 'onDrop'),\n});\n\nconst trash = useTemplateRef\u003CHTMLElement>('trash');\nconst { isOver } = makeDroppable(trash, {\n  id: 'trash',\n  \u002F\u002F Asked when a note is dropped in the trash: the trash is the target.\n  onBeforeDrop: () => {\n    props.trace('trash', `onBeforeDrop → ${props.answer}`);\n    return props.answer;\n  },\n  onDrop: (event) => {\n    props.trace('trash', 'onDrop');\n    event.source?.remove();\n  },\n});\n\n\u002F\u002F The library's write, the moment it happens.\nwatch(notes, () => props.trace('list', 'written'), { flush: 'sync' });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"notes\">\n    \u003Cul ref=\"list\" class=\"cards\">\n      \u003CCard v-for=\"note in items\" :key=\"note.id\" :task=\"note\" \u002F>\n    \u003C\u002Ful>\n    \u003Cdiv ref=\"trash\" class=\"trash\" :class=\"{ over: isOver }\">\n      \u003Csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath d=\"M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13\" \u002F>\u003C\u002Fsvg>\n      Trash\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.notes {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 190px;\n}\n\n.cards {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin: 0;\n  padding: 8px;\n  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);\n  border-radius: 12px;\n  background: color-mix(in srgb, currentColor 3%, transparent);\n  list-style: none;\n}\n\n.trash {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 12px;\n  border: 1.5px dashed color-mix(in srgb, currentColor 22%, transparent);\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  transition:\n    border-color 0.15s,\n    background-color 0.15s;\n}\n\n.trash.over {\n  border-color: #e5484d;\n  background: color-mix(in srgb, #e5484d 8%, transparent);\n  color: #e5484d;\n}\n\n.trash svg {\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.8;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> watch \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeDroppable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Card \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FCard.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Trace \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Ftypes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> notes \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'milk'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Buy oat milk'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'call'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Call the plumber'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'book'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Return the book'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'plants'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Water the plants'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'notes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> notes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Asked when the notes are reordered: the list is the target.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onBeforeDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `onBeforeDrop → \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Told when it is the target, and when notes leave it for the trash (`to.index` -1).\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'onDrop, removed'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'onDrop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> trash \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'trash'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isOver \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeDroppable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">trash\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'trash'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Asked when a note is dropped in the trash: the trash is the target.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onBeforeDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'trash'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `onBeforeDrop → \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'trash'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'onDrop'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">remove\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The library's write, the moment it happens.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">watch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">notes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'written'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> flush\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'sync'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"notes\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"cards\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">note \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">note\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">note\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"trash\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"trash\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ over: isOver }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">><path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"M4 7h16M9 7V4h6v3m-8 0 1 13h8l1-13\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F><\u002Fsvg>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      Trash\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">notes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 190\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">cards\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">trash\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> dashed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    border-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    background-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">trash\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">e5484d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">e5484d \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">e5484d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">trash\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke-linecap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke-linejoin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3001,"lang":505,"code":3048,"html":3049},"\u002F** What `onBeforeDrop` answers here: words it understands as they are. *\u002F\nexport type Answer = 'accept' | 'reject' | 'continue';\n\nexport const ANSWERS: Answer[] = ['accept', 'reject', 'continue'];\n\n\u002F** Adds a line to the list of hooks: who ran it, and what. *\u002F\nexport type Trace = (who: string, what: string) => void;","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** What `onBeforeDrop` answers here: words it understands as they are. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'accept'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'reject'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'continue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ANSWERS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Answer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'accept'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'reject'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'continue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** Adds a line to the list of hooks: who ran it, and what. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Trace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">who\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> what\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> void\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3051,3054,3057,3060],{"name":2629,"lang":2630,"code":3052,"html":3053},"\u003Cscript setup lang=\"ts\">\nimport { DnDProvider, DragPreview } from '@vue-dnd-kit\u002Fcore';\nimport Column from '.\u002FColumn.vue';\nimport { mode, requests, saving, type ServerMode } from '.\u002Fserver';\n\nconst MODES: ServerMode[] = ['reliable', 'flaky', 'down'];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDnDProvider>\n    \u003Cdiv class=\"demo\">\n      \u003Cfieldset class=\"modes\">\n        \u003Clegend>server\u003C\u002Flegend>\n        \u003Clabel v-for=\"value in MODES\" :key=\"value\" :class=\"{ on: mode === value }\">\n          \u003Cinput v-model=\"mode\" type=\"radio\" :value=\"value\" \u002F>\n          {{ value }}\n        \u003C\u002Flabel>\n      \u003C\u002Ffieldset>\n      \u003Cdiv class=\"board\">\n        \u003CColumn id=\"backlog\" title=\"Backlog\" \u002F>\n        \u003CColumn id=\"sprint\" title=\"Sprint\" \u002F>\n      \u003C\u002Fdiv>\n      \u003Col class=\"requests\" aria-label=\"Requests\">\n        \u003Cli v-for=\"request in requests\" :key=\"request.id\" :class=\"`status-${request.status}`\">\n          {{ request.text }} \u003Cspan>{{ request.status === 'pending' ? '…' : request.status }}\u003C\u002Fspan>\n        \u003C\u002Fli>\n        \u003Cli v-if=\"!requests.length\" class=\"empty\">No requests yet\u003C\u002Fli>\n      \u003C\u002Fol>\n    \u003C\u002Fdiv>\n\n    \u003C!-- The overlay of every drag: the card's copy, and a badge while the server answers. -->\n    \u003Ctemplate #overlay=\"{ active }\">\n      \u003Cdiv class=\"carried\">\n        \u003CDragPreview :id=\"active.id\" \u002F>\n        \u003Cspan v-if=\"saving\" class=\"saving\">Saving…\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.demo {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.modes {\n  display: inline-flex;\n  margin: 0;\n  padding: 3px;\n  border: 0;\n  border-radius: 9px;\n  background: color-mix(in srgb, currentColor 7%, transparent);\n}\n\nlegend {\n  float: left;\n  align-self: center;\n  padding: 0 8px 0 6px;\n  font: 10px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.55;\n}\n\n.modes label {\n  padding: 5px 10px;\n  border-radius: 6px;\n  font: 12px\u002F1.2 ui-monospace, Menlo, Consolas, monospace;\n  cursor: pointer;\n}\n\n.modes label.on {\n  background: Canvas;\n  box-shadow: 0 1px 3px rgb(0 0 0 \u002F 0.25);\n  font-weight: 600;\n}\n\n.modes label:has(input:focus-visible) {\n  outline: 2px solid #42b883;\n}\n\n.modes input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.board {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 220px));\n  gap: 14px;\n  justify-content: center;\n  width: 100%;\n}\n\n.requests {\n  width: min(100%, 454px);\n  min-height: 60px;\n  margin: 0;\n  padding: 8px 12px;\n  border-radius: 10px;\n  background: color-mix(in srgb, currentColor 5%, transparent);\n  font: 11px\u002F1.6 ui-monospace, Menlo, Consolas, monospace;\n  list-style: none;\n  white-space: pre;\n  overflow-x: auto;\n}\n\n.requests li + li {\n  opacity: 0.55;\n}\n\n.requests .status-200 span {\n  color: #42b883;\n}\n\n.requests .status-503 span {\n  color: #e5484d;\n}\n\n.requests li.empty {\n  color: inherit;\n  opacity: 0.45;\n}\n\n.carried {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.saving {\n  position: absolute;\n  top: 50%;\n  right: 10px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  translate: 0 -50%;\n  padding: 4px 8px;\n  border-radius: 99px;\n  background: #42b883;\n  color: #fff;\n  font: 600 11px\u002F1 system-ui, sans-serif;\n}\n\n.saving::before {\n  content: '';\n  width: 9px;\n  height: 9px;\n  border: 2px solid rgb(255 255 255 \u002F 0.4);\n  border-top-color: #fff;\n  border-radius: 50%;\n  animation: spin 0.7s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    rotate: 1turn;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DragPreview \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Column \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FColumn.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> mode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> requests\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> saving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ServerMode \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Fserver'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> MODES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> ServerMode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'reliable'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'flaky'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'down'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"demo\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <fieldset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"modes\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <legend>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">server\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Flegend>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value in MODES\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ on: mode === value }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-model\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"mode\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"radio\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">          {{ value }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Flabel>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Ffieldset>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"board\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <Column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"backlog\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Backlog\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <Column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"sprint\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Sprint\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <ol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"requests\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Requests\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"request in requests\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"request.id\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"`status-${request.status}`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">          {{ request.text }} \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><span>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ request.status === 'pending' ? '…' : request.status }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"!requests.length\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"empty\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">No requests yet\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fol>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    <!-- The overlay of every drag: the card's copy, and a badge while the server answers. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> active \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"carried\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <DragPreview\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"saving\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"saving\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Saving…\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">demo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inline-flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">legend\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  float\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">board\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 220\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">requests\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 454\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pre\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow-x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">requests\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">requests\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">status-200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">requests\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">status-503\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">e5484d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">requests\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">empty\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">carried\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">saving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inline-flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 99\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> system-ui\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> sans-serif\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">saving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">before\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-top-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  animation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> spin \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> linear\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> infinite\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">keyframes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> spin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    rotate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">turn\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":784,"lang":2630,"code":3055,"html":3056},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableList } from '@vue-dnd-kit\u002Fcore';\nimport { board, saveMove } from '.\u002Fserver';\nimport TaskCard from '.\u002FTaskCard.vue';\n\nconst props = defineProps\u003C{ id: string; title: string }>();\n\nconst list = useTemplateRef\u003CHTMLElement>('list');\nconst { items, isOver } = makeSortableList(list, {\n  id: props.id,\n  \u002F\u002F A getter: the library never writes it. The drop is applied below, once saved.\n  items: () => board[props.id]!,\n  group: 'sprint',\n  \u002F\u002F The overlay waits where it was let go until this promise settles.\n  onBeforeDrop: async (event) => {\n    event.preventDefault();\n    try {\n      await saveMove(event.keys, event.to);\n    } catch {\n      \u002F\u002F Nothing applied: the card flies back to where it was.\n      return 'reject';\n    }\n    \u002F\u002F Applied before the promise resolves: the card lands in its new place.\n    for (const [id, tasks] of event.result) board[id] = tasks;\n    return 'accept';\n  },\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"column\" :class=\"{ over: isOver }\">\n    \u003Ch3>\n      {{ title }}\n      \u003Cspan class=\"count\">{{ items.length }}\u003C\u002Fspan>\n    \u003C\u002Fh3>\n    \u003Cul ref=\"list\" class=\"cards\">\n      \u003CTaskCard v-for=\"task in items\" :key=\"task.id\" :task=\"task\" \u002F>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.column {\n  padding: 10px;\n  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);\n  border-radius: 14px;\n  background: color-mix(in srgb, currentColor 3%, transparent);\n  transition: border-color 0.2s;\n}\n\n.column.over {\n  border-color: color-mix(in srgb, #42b883 60%, transparent);\n}\n\nh3 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 2px 4px 10px;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.count {\n  padding: 3px 7px;\n  border-radius: 99px;\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  font: 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n}\n\n.cards {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  min-height: 170px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> board\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> saveMove \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002Fserver'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> TaskCard \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FTaskCard.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'list'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isOver \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F A getter: the library never writes it. The drop is applied below, once saved.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> board\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  group\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'sprint'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F The overlay waits where it was let go until this promise settles.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onBeforeDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">preventDefault\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    try\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> saveMove\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> catch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">      \u002F\u002F Nothing applied: the card flies back to where it was.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'reject'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    \u002F\u002F Applied before the promise resolves: the card lands in its new place.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tasks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">result\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> board\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tasks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'accept'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"column\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ over: isOver }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <h3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      {{ title }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"count\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ items.length }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"list\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"cards\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <TaskCard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fsection>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> border-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883 \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> space-between\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 99\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">cards\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 170\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3030,"lang":505,"code":3058,"html":3059},"import { reactive, ref } from 'vue';\nimport type { Key } from '@vue-dnd-kit\u002Fcore';\n\nexport interface Task {\n  id: string;\n  title: string;\n}\n\n\u002F** The store: changed only once the server has agreed. *\u002F\nexport const board = reactive\u003CRecord\u003Cstring, Task[]>>({\n  backlog: [\n    { id: 'search', title: 'Search in docs' },\n    { id: 'avatars', title: 'Upload avatars' },\n    { id: 'exports', title: 'Export to CSV' },\n  ],\n  sprint: [\n    { id: 'login', title: 'Passwordless login' },\n    { id: 'billing', title: 'Billing page' },\n  ],\n});\n\nexport type ServerMode = 'reliable' | 'flaky' | 'down';\nexport const mode = ref\u003CServerMode>('reliable');\n\n\u002F** A request is on its way: the overlay shows it. *\u002F\nexport const saving = ref(false);\n\ninterface Request {\n  id: number;\n  text: string;\n  status: 'pending' | 200 | 503;\n}\nexport const requests = ref\u003CRequest[]>([]);\n\nlet count = 0;\nconst wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));\n\n\u002F** A pretend `PATCH`: 0.9 s, and it fails when the server is down, or every other time when flaky. *\u002F\nexport async function saveMove(keys: Key[], to: { list: Key; index: number }): Promise\u003Cvoid> {\n  const request = reactive\u003CRequest>({ id: ++count, text: `PATCH ${keys.join(',')} → ${to.list}[${to.index}]`, status: 'pending' });\n  requests.value = [request, ...requests.value].slice(0, 3);\n  saving.value = true;\n  try {\n    await wait(900);\n    const ok = mode.value === 'reliable' || (mode.value === 'flaky' && request.id % 2 === 1);\n    request.status = ok ? 200 : 503;\n    if (!ok) throw new Error('503 Service Unavailable');\n  } finally {\n    saving.value = false;\n  }\n}","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** The store: changed only once the server has agreed. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> board \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Record\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]>>({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  backlog\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'search'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Search in docs'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'avatars'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Upload avatars'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'exports'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Export to CSV'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  sprint\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'login'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Passwordless login'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'billing'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Billing page'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> ServerMode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'reliable'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'flaky'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'down'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> mode \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">ServerMode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'reliable'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** A request is on its way: the overlay shows it. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> saving \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Request\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'pending'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 503\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> requests \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Request\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]>([]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> count \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> wait\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">ms\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> setTimeout\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">resolve\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ms\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** A pretend `PATCH`: 0.9 s, and it fails when the server is down, or every other time when flaky. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> saveMove\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Promise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">void\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> request \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Request\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ++\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `PATCH \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">join\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">','\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> → \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">]`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'pending'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  requests\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">request\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">requests\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">].\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">slice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  saving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  try\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> wait\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">900\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ok \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> mode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'reliable'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">mode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'flaky'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> request\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    request\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">status \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ok \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 503\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ok\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> throw\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Error\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'503 Service Unavailable'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> finally\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    saving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3061,"lang":2630,"code":3062,"html":3063},"TaskCard.vue","\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ task: { id: string; title: string } }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\nmakeSortableItem(el, { item: () => props.task });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"card\">\u003Cspan>{{ task.title }}\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.card {\n  position: relative;\n  padding: 12px;\n  border-radius: 10px;\n  background: Canvas;\n  box-shadow:\n    0 0 0 1px color-mix(in srgb, currentColor 10%, transparent),\n    0 2px 4px -2px rgb(0 0 0 \u002F 0.25);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: grab;\n  user-select: none;\n}\n\n.card:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 2px;\n}\n\n.card[data-dnd-placeholder] {\n  opacity: 1;\n  background: transparent;\n  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 25%, transparent);\n}\n\n.card[data-dnd-placeholder] > * {\n  visibility: hidden;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> title\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">task \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"card\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">><span>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ task.title }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan><\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 500\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">card\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[3065,3068,3071],{"name":2629,"lang":2630,"code":3066,"html":3067},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { DnDProvider, type DropOutside } from '@vue-dnd-kit\u002Fcore';\nimport Dock from '.\u002FDock.vue';\n\nconst MODES: DropOutside[] = ['placeholder', 'cancel', 'remove'];\nconst dropOutside = ref\u003CDropOutside>('remove');\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CDnDProvider>\n    \u003Cdiv class=\"demo\">\n      \u003Cfieldset class=\"modes\">\n        \u003Clegend>dropOutside\u003C\u002Flegend>\n        \u003Clabel v-for=\"value in MODES\" :key=\"value\" :class=\"{ on: dropOutside === value }\">\n          \u003Cinput v-model=\"dropOutside\" type=\"radio\" :value=\"value\" \u002F>\n          {{ value }}\n        \u003C\u002Flabel>\n      \u003C\u002Ffieldset>\n      \u003Ccode class=\"call\">makeSortableList(dock, { strategy: 'horizontal', dropOutside: '{{ dropOutside }}' })\u003C\u002Fcode>\n      \u003CDock :drop-outside=\"dropOutside\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FDnDProvider>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.demo {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.modes {\n  display: inline-flex;\n  margin: 0;\n  padding: 3px;\n  border: 0;\n  border-radius: 9px;\n  background: color-mix(in srgb, currentColor 7%, transparent);\n}\n\nlegend {\n  float: left;\n  align-self: center;\n  padding: 0 8px 0 6px;\n  font: 10px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.55;\n}\n\n.modes label {\n  padding: 5px 10px;\n  border-radius: 6px;\n  font: 12px\u002F1.2 ui-monospace, Menlo, Consolas, monospace;\n  cursor: pointer;\n}\n\n.modes label.on {\n  background: Canvas;\n  box-shadow: 0 1px 3px rgb(0 0 0 \u002F 0.25);\n  font-weight: 600;\n}\n\n.modes label:has(input:focus-visible) {\n  outline: 2px solid #42b883;\n}\n\n.modes input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.call {\n  max-width: 100%;\n  padding: 6px 10px;\n  overflow-x: auto;\n  border-radius: 8px;\n  background: color-mix(in srgb, currentColor 6%, transparent);\n  font: 11px\u002F1.4 ui-monospace, Menlo, Consolas, monospace;\n  white-space: nowrap;\n  color: #42b883;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DnDProvider\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DropOutside \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Dock \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FDock.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> MODES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> DropOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'placeholder'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'cancel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'remove'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dropOutside \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">DropOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'remove'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"demo\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <fieldset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"modes\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <legend>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">dropOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Flegend>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value in MODES\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ on: dropOutside === value }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-model\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"dropOutside\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"radio\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">          {{ value }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Flabel>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Ffieldset>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <code\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"call\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">makeSortableList(dock, { strategy: 'horizontal', dropOutside: '{{ dropOutside }}' })\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fcode>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <Dock\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">drop-outside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">dropOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002FDnDProvider>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">demo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inline-flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">legend\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  float\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.25\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">modes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">call\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  max-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow-x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2694,"lang":2630,"code":3069,"html":3070},"\u003Cscript setup lang=\"ts\">\nimport { ref, useTemplateRef } from 'vue';\nimport { makeSortableList, type DropOutside } from '@vue-dnd-kit\u002Fcore';\nimport DockIcon from '.\u002FDockIcon.vue';\n\nconst props = defineProps\u003C{ dropOutside: DropOutside }>();\n\nconst APPS = [\n  { id: 'mail', name: 'Mail', hue: 210 },\n  { id: 'calendar', name: 'Calendar', hue: 350 },\n  { id: 'notes', name: 'Notes', hue: 45 },\n  { id: 'photos', name: 'Photos', hue: 280 },\n  { id: 'weather', name: 'Weather', hue: 190 },\n  { id: 'terminal', name: 'Terminal', hue: 220 },\n];\nconst apps = ref([...APPS]);\nconst notice = ref('Drag an app off the dock and let go');\n\nconst dock = useTemplateRef\u003CHTMLElement>('dock');\nconst { items } = makeSortableList(dock, {\n  items: apps,\n  strategy: 'horizontal',\n  \u002F\u002F What a drop outside every target does. Read at the drop.\n  dropOutside: () => props.dropOutside,\n  \u002F\u002F Called on the list the items leave, with `to.index` -1, when they are removed.\n  onDrop: (event) => {\n    if (event.to.index === -1) notice.value = `Removed ${event.items.map((app) => app.name).join(', ')}`;\n  },\n});\n\nconst reset = () => {\n  apps.value = [...APPS];\n  notice.value = 'Dock reset';\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"area\">\n    \u003Cul ref=\"dock\" class=\"dock\">\n      \u003CDockIcon v-for=\"app in items\" :key=\"app.id\" :app=\"app\" \u002F>\n    \u003C\u002Ful>\n    \u003Cp class=\"notice\" role=\"status\">\n      {{ notice }}\n      \u003Cbutton v-if=\"apps.length \u003C APPS.length\" type=\"button\" @click=\"reset\">Reset\u003C\u002Fbutton>\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.area {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 14px;\n  width: 100%;\n  padding-top: 40px;\n}\n\n.dock {\n  display: flex;\n  gap: 6px;\n  min-width: 80px;\n  min-height: 58px;\n  margin: 0;\n  padding: 8px;\n  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);\n  border-radius: 20px;\n  background: color-mix(in srgb, currentColor 6%, Canvas);\n  box-shadow: 0 12px 32px -12px rgb(0 0 0 \u002F 0.5);\n  list-style: none;\n}\n\n.notice {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-height: 26px;\n  margin: 0;\n  font: 11px\u002F1.4 ui-monospace, Menlo, Consolas, monospace;\n  opacity: 0.7;\n}\n\nbutton {\n  padding: 4px 9px;\n  border: 0;\n  border-radius: 7px;\n  background: color-mix(in srgb, currentColor 10%, transparent);\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n}\n\nbutton:focus-visible {\n  outline: 2px solid #42b883;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DropOutside \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DockIcon \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FDockIcon.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dropOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> DropOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> APPS \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'mail'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Mail'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 210\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'calendar'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Calendar'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 350\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'notes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Notes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'photos'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Photos'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 280\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'weather'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Weather'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 190\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'terminal'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Terminal'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 220\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> apps \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">APPS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> notice \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'Drag an app off the dock and let go'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dock \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'dock'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableList\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">dock\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> apps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  strategy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'horizontal'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F What a drop outside every target does. Read at the drop.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  dropOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">dropOutside\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Called on the list the items leave, with `to.index` -1, when they are removed.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `Removed \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">join\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">', '\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> reset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  apps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">APPS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Dock reset'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"area\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"dock\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"dock\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <DockIcon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">app \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"notice\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"status\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      {{ notice }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"apps.length < APPS.length\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"reset\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Reset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fp>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">dock\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 80\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 58\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 20\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 32\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">notice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 26\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 9\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":3072,"lang":2630,"code":3073,"html":3074},"DockIcon.vue","\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\n\nconst props = defineProps\u003C{ app: { id: string; name: string; hue: number } }>();\nconst el = useTemplateRef\u003CHTMLElement>('el');\nmakeSortableItem(el, { item: () => props.app });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli ref=\"el\" class=\"app\" :aria-label=\"app.name\">\n    \u003Cspan class=\"tile\" :style=\"{ '--hue': app.hue }\">{{ app.name[0] }}\u003C\u002Fspan>\n    \u003Cspan class=\"name\">{{ app.name }}\u003C\u002Fspan>\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.app {\n  position: relative;\n  flex: none;\n  border-radius: 12px;\n  cursor: grab;\n  user-select: none;\n}\n\n.app:focus-visible {\n  outline: 2px solid #42b883;\n  outline-offset: 3px;\n}\n\n.tile {\n  display: grid;\n  place-items: center;\n  width: 42px;\n  height: 42px;\n  border-radius: 12px;\n  background: linear-gradient(160deg, hsl(var(--hue) 70% 62%), hsl(var(--hue) 60% 42%));\n  box-shadow: inset 0 0 0 1px rgb(255 255 255 \u002F 0.15);\n  color: #fff;\n  font-size: 18px;\n  font-weight: 700;\n}\n\n\u002F* The name floats above the dock on hover and focus, as in a real dock. *\u002F\n.name {\n  position: absolute;\n  bottom: calc(100% + 10px);\n  left: 50%;\n  translate: -50% 4px;\n  padding: 3px 7px;\n  border-radius: 6px;\n  background: color-mix(in srgb, currentColor 85%, Canvas);\n  color: Canvas;\n  font-size: 11px;\n  white-space: nowrap;\n  opacity: 0;\n  pointer-events: none;\n  transition:\n    opacity 0.15s,\n    translate 0.15s;\n}\n\n.app:hover .name,\n.app:focus-visible .name {\n  translate: -50% 0;\n  opacity: 1;\n}\n\n\u002F* No tooltip on the slot, nor on the copy that follows the pointer. *\u002F\n.app[data-dnd-placeholder] .name,\n[data-dnd-overlay] .name {\n  display: none;\n}\n\n.app[data-dnd-placeholder] {\n  opacity: 1;\n}\n\n\u002F* The slot: an empty outline, in the page's text color rather than the tile's white. *\u002F\n.app[data-dnd-placeholder] .tile {\n  background: color-mix(in srgb, currentColor 8%, transparent);\n  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 30%, transparent);\n  color: inherit;\n  font-size: 0;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">app \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"app\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"app.name\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tile\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ '--hue': app.hue }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ app.name[0] }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"name\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ app.name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">42b883\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tile\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  place-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 42\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 42\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linear-gradient\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">160\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">deg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 70\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 62\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hsl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--hue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 42\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The name floats above the dock on hover and focus, as in a real dock. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 85\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    opacity \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    translate \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* No tooltip on the slot, nor on the copy that follows the pointer. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The slot: an empty outline, in the page's text color rather than the tile's white. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">app\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tile\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1793707583023]