[{"data":1,"prerenderedAt":1503},["ShallowReactive",2],{"navigation-source":3,"navigation-ja":271,"docs-\u002Fja\u002Fdocs\u002Fexamples\u002Fdata-table":474,"docs-surround-\u002Fja\u002Fdocs\u002Fexamples\u002Fdata-table":1487,"example-ui-table":1490},[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},"Ja","\u002Fja","ja",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"ドキュメント","6556add362","\u002Fja\u002Fdocs","ja\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"はじめに","e345edbff3","\u002Fja\u002Fdocs\u002Fgetting-started","ja\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"イントロダクション","\u002Fja\u002Fdocs\u002Fgetting-started\u002Fintroduction","ja\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"インストール","\u002Fja\u002Fdocs\u002Fgetting-started\u002Finstallation","ja\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"クイックスタート","\u002Fja\u002Fdocs\u002Fgetting-started\u002Fquick-start","ja\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"v2 からの移行","\u002Fja\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","ja\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"ガイド","0338bbaa33","\u002Fja\u002Fdocs\u002Fguides","ja\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},"プロバイダー","\u002Fja\u002Fdocs\u002Fguides\u002Fprovider","ja\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"ドラッグ＆ドロップ","\u002Fja\u002Fdocs\u002Fguides\u002Fdrag-and-drop","ja\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"並べ替え可能なリスト","\u002Fja\u002Fdocs\u002Fguides\u002Fsortable-lists","ja\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"アイテムを共有するリスト","\u002Fja\u002Fdocs\u002Fguides\u002Fshared-lists","ja\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"ツリー","\u002Fja\u002Fdocs\u002Fguides\u002Ftrees","ja\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"マルチドラッグと選択","\u002Fja\u002Fdocs\u002Fguides\u002Fmulti-drag","ja\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"オーバーレイ","\u002Fja\u002Fdocs\u002Fguides\u002Foverlay","ja\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"軸、境界、グリッド","\u002Fja\u002Fdocs\u002Fguides\u002Fconstraints","ja\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"ドロップの判断","\u002Fja\u002Fdocs\u002Fguides\u002Fdrop-decisions","ja\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"アニメーション","\u002Fja\u002Fdocs\u002Fguides\u002Fanimations","ja\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"アクセシビリティ","\u002Fja\u002Fdocs\u002Fguides\u002Faccessibility","ja\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"仮想リスト","\u002Fja\u002Fdocs\u002Fguides\u002Fvirtual-lists","ja\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"スタイリング","\u002Fja\u002Fdocs\u002Fguides\u002Fstyling","ja\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"センサーとプログラムによるドラッグ","\u002Fja\u002Fdocs\u002Fguides\u002Fsensors","ja\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fja\u002Fdocs\u002Fguides\u002Fdevtools","ja\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"ファイルとほかのアプリ","\u002Fja\u002Fdocs\u002Fguides\u002Fnative","ja\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fja\u002Fdocs\u002Fapi","ja\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},"\u002Fja\u002Fdocs\u002Fapi\u002Fdnd-provider","ja\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-draggable","ja\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-droppable","ja\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-sortable-list","ja\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-sortable-item","ja\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","ja\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-selection-area","ja\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fja\u002Fdocs\u002Fapi\u002Fmake-drag-area","ja\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD とモニター","\u002Fja\u002Fdocs\u002Fapi\u002Fuse-dnd","ja\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"イベント","\u002Fja\u002Fdocs\u002Fapi\u002Fevents","ja\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"モディファイアと衝突判定","\u002Fja\u002Fdocs\u002Fapi\u002Fmodifiers","ja\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview とオーバーレイの props","\u002Fja\u002Fdocs\u002Fapi\u002Fdrag-preview","ja\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fja\u002Fdocs\u002Fapi\u002Fanimations","ja\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"センサー","\u002Fja\u002Fdocs\u002Fapi\u002Fsensors","ja\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"共通の型","\u002Fja\u002Fdocs\u002Fapi\u002Ftypes","ja\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"サンプル","\u002Fja\u002Fdocs\u002Fexamples","ja\u002Fdocs\u002F4.examples\u002F00.index",[435,437,441,445,449,453,457,461,465,469],{"title":436,"path":432,"stem":433,"icon":205},"概要",{"title":438,"path":439,"stem":440,"icon":210},"プロジェクトボード","\u002Fja\u002Fdocs\u002Fexamples\u002Fboard","ja\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"週間カレンダー","\u002Fja\u002Fdocs\u002Fexamples\u002Fcalendar","ja\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"ファイルマネージャー","\u002Fja\u002Fdocs\u002Fexamples\u002Ffile-manager","ja\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"ブロックエディター","\u002Fja\u002Fdocs\u002Fexamples\u002Fblock-editor","ja\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"チェス","\u002Fja\u002Fdocs\u002Fexamples\u002Fchess","ja\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"フォームビルダー","\u002Fja\u002Fdocs\u002Fexamples\u002Fform-builder","ja\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"デザインキャンバス","\u002Fja\u002Fdocs\u002Fexamples\u002Fdesign-canvas","ja\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"ページビルダー","\u002Fja\u002Fdocs\u002Fexamples\u002Fpage-builder","ja\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"データテーブル","\u002Fja\u002Fdocs\u002Fexamples\u002Fdata-table","ja\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":475,"fallback":35},{"id":476,"title":470,"body":477,"category":431,"description":1479,"extension":1480,"links":1481,"meta":1482,"navigation":1484,"path":471,"seo":1485,"stem":472,"__hash__":1486},"docs_ja\u002Fja\u002Fdocs\u002F4.examples\u002F09.data-table.md",{"type":478,"value":479,"toc":1472},"minimark",[480,486,499,504,581,585,595,764,856,870,901,905,915,1034,1071,1075,1322,1333,1415,1436,1440,1452,1468],[481,482],"example",{"height":483,"hint":484,"name":485,"title":470},"34rem","タスクをグリップでドラッグしてみましょう。検索してからドラッグしても、隠れたタスクは元の位置のままです","ui-table",[487,488,489,490,494,495,498],"p",{},"Nuxt UI の ",[491,492,493],"code",{},"UTable"," がテーブル、その行、その仮想化ライブラリを描画します：DOM にあるのは画面上の行だけです。Vue DnD Kit はそれを並べ替えます。テーブルは UI ライブラリが提供するそのままのもので、スロットも ",[491,496,497],{},"ui"," クラスもそのまま使っています。書き直した部分はありません。",[500,501,503],"h2",{"id":502},"what-to-look-at","注目ポイント",[505,506,507,544,559,569],"ul",{},[508,509,510,516,517,520,521,523,524,527,528,531,532,535,536,539,540,543],"li",{},[511,512,513],"strong",{},[491,514,515],{},"TaskTable.vue","：並べ替え可能なリストはテーブルの ",[491,518,519],{},"\u003Ctbody>"," で、",[491,522,493],{}," が公開する ",[491,525,526],{},"tableRef"," から取得します。テーブルはリストのドラフトを ",[491,529,530],{},"data"," として受け取るので、ドラッグ中に行が動きます。",[491,533,534],{},"get-row-id"," はリストと同じく、タスクごとに行のキーを決めます。",[491,537,538],{},"axis: 'y'"," はドラッグをその列の中に、",[491,541,542],{},"restrictToFirstScrollableAncestor"," はテーブルの中に留めます：テーブルのスクロール要素が、行を囲む最初のスクロール可能な要素です。デモを展開すると、テーブルが画面いっぱいに広がります。",[508,545,546,551,552,554,555,558],{},[511,547,548],{},[491,549,550],{},"RowGrip.vue","：行を描画するのは ",[491,553,493],{}," なので、あなたのコンポーネントが行になることはありません。最初のセルにあるグリップ（",[491,556,557],{},"#grip-cell"," スロット）が、自分を囲む行をアイテムにし、そのハンドルになります。",[508,560,561,564,565,568],{},[511,562,563],{},"検索","はリストの ",[491,566,567],{},"filter"," です：テーブルは一致するタスクを表示し、ドロップすると配列全体が書き戻され、隠れたタスクは元の位置に残ります。",[508,570,571,576,577,580],{},[511,572,573],{},[491,574,575],{},"tasks.ts","：2,000 件のタスクを ",[491,578,579],{},"shallowRef"," に入れています：ライブラリがその中身を見ることはありません。",[500,582,584],{"id":583},"a-row-the-table-renders","テーブルが描画する行",[487,586,587,588,590,591,594],{},"グリップは、行を返すゲッターを渡して ",[491,589,147],{}," を呼び出します：描画された後の、グリップを囲む ",[491,592,593],{},"\u003Ctr>"," です。ハンドルなので、フォーカスと ARIA 属性はグリップが受け取り、行の残りの部分はクリックやテキストの選択に自由に使えます。",[596,597,602],"pre",{"className":598,"code":599,"filename":550,"language":600,"meta":601,"style":601},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","const grip = useTemplateRef\u003CHTMLElement>('grip');\nmakeSortableItem(() => grip.value?.closest('tr') ?? null, {\n  id: () => props.task.id,\n  handle: grip,\n  label: () => props.task.title,\n});\n","ts","",[491,603,604,642,690,720,733,758],{"__ignoreMap":601},[605,606,609,613,617,621,625,628,632,635,639],"span",{"class":607,"line":608},"line",1,[605,610,612],{"class":611},"s78Kj","const",[605,614,616],{"class":615},"snmWg"," grip ",[605,618,620],{"class":619},"s6cML","=",[605,622,624],{"class":623},"sbwC8"," useTemplateRef",[605,626,627],{"class":619},"\u003C",[605,629,631],{"class":630},"sR6Ar","HTMLElement",[605,633,634],{"class":619},">(",[605,636,638],{"class":637},"sN8r7","'grip'",[605,640,641],{"class":619},");\n",[605,643,645,647,650,653,656,659,662,665,668,671,674,677,680,684,687],{"class":607,"line":644},2,[605,646,147],{"class":623},[605,648,649],{"class":619},"(()",[605,651,652],{"class":611}," =>",[605,654,655],{"class":623}," grip",[605,657,658],{"class":619},".",[605,660,661],{"class":623},"value",[605,663,664],{"class":619},"?.",[605,666,667],{"class":623},"closest",[605,669,670],{"class":619},"(",[605,672,673],{"class":637},"'tr'",[605,675,676],{"class":619},")",[605,678,679],{"class":619}," ??",[605,681,683],{"class":682},"s3IRZ"," null",[605,685,686],{"class":619},",",[605,688,689],{"class":619}," {\n",[605,691,693,696,699,702,704,707,709,712,714,717],{"class":607,"line":692},3,[605,694,695],{"class":623},"  id",[605,697,698],{"class":619},":",[605,700,701],{"class":619}," ()",[605,703,652],{"class":611},[605,705,706],{"class":615}," props",[605,708,658],{"class":619},[605,710,711],{"class":615},"task",[605,713,658],{"class":619},[605,715,716],{"class":615},"id",[605,718,719],{"class":619},",\n",[605,721,723,727,729,731],{"class":607,"line":722},4,[605,724,726],{"class":725},"sVvmN","  handle",[605,728,698],{"class":619},[605,730,655],{"class":615},[605,732,719],{"class":619},[605,734,736,739,741,743,745,747,749,751,753,756],{"class":607,"line":735},5,[605,737,738],{"class":623},"  label",[605,740,698],{"class":619},[605,742,701],{"class":619},[605,744,652],{"class":611},[605,746,706],{"class":615},[605,748,658],{"class":619},[605,750,711],{"class":615},[605,752,658],{"class":619},[605,754,755],{"class":615},"title",[605,757,719],{"class":619},[605,759,761],{"class":607,"line":760},6,[605,762,763],{"class":619},"});\n",[596,765,769],{"className":766,"code":767,"filename":515,"language":768,"meta":601,"style":601},"language-vue shiki shiki-themes dnd-light dnd-light dnd-dark","\u003CUTable ref=\"table\" :data=\"items\" :get-row-id=\"(task: Task) => task.id\" …>\n  \u003Ctemplate #grip-cell=\"{ row }\">\n    \u003CRowGrip :task=\"row.original\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FUTable>\n","vue",[491,770,771,836,841,846,851],{"__ignoreMap":601},[605,772,773,777,780,782,785,788,790,792,795,798,800,802,804,806,808,810,812,814,817,819,821,824,826,828,830,833],{"class":607,"line":608},[605,774,776],{"class":775},"sf6mc","\u003CUTable",[605,778,779],{"class":725}," ref",[605,781,620],{"class":619},[605,783,784],{"class":637},"\"table\"",[605,786,787],{"class":619}," :",[605,789,530],{"class":725},[605,791,620],{"class":619},[605,793,794],{"class":637},"\"",[605,796,797],{"class":615},"items",[605,799,794],{"class":637},[605,801,787],{"class":619},[605,803,534],{"class":725},[605,805,620],{"class":619},[605,807,794],{"class":637},[605,809,670],{"class":619},[605,811,711],{"class":725},[605,813,698],{"class":619},[605,815,816],{"class":630}," Task",[605,818,676],{"class":619},[605,820,652],{"class":611},[605,822,823],{"class":615}," task",[605,825,658],{"class":619},[605,827,716],{"class":615},[605,829,794],{"class":637},[605,831,832],{"class":725}," …",[605,834,835],{"class":775},">\n",[605,837,838],{"class":607,"line":644},[605,839,840],{"class":615},"  \u003Ctemplate #grip-cell=\"{ row }\">\n",[605,842,843],{"class":607,"line":692},[605,844,845],{"class":615},"    \u003CRowGrip :task=\"row.original\" \u002F>\n",[605,847,848],{"class":607,"line":722},[605,849,850],{"class":615},"  \u003C\u002Ftemplate>\n",[605,852,853],{"class":607,"line":735},[605,854,855],{"class":775},"\u003C\u002FUTable>\n",[487,857,858,859,862,863,865,866,869],{},"オーバーレイはライブラリが作る行のコピーで、セルの幅を保った専用のテーブルに入っています。テーブルの行は影を描かないので、プロバイダーの ",[491,860,861],{},"overlay-class"," がオーバーレイの中身に影を付け、テーブルの背景とリングも加えます。行が移動している間は、行の ",[491,864,497],{}," クラスがその位置に色を付けます（",[491,867,868],{},"data-[dnd-placeholder]:bg-primary\u002F5","）。",[596,871,874],{"className":766,"code":872,"filename":873,"language":768,"meta":601,"style":601},"\u003CDnDProvider overlay-class=\"overflow-hidden rounded-md bg-default shadow-xl ring ring-accented\">\n  \u003CTaskTable \u002F>\n\u003C\u002FDnDProvider>\n","index.vue",[491,875,876,891,896],{"__ignoreMap":601},[605,877,878,881,884,886,889],{"class":607,"line":608},[605,879,880],{"class":775},"\u003CDnDProvider",[605,882,883],{"class":725}," overlay-class",[605,885,620],{"class":619},[605,887,888],{"class":637},"\"overflow-hidden rounded-md bg-default shadow-xl ring ring-accented\"",[605,890,835],{"class":775},[605,892,893],{"class":607,"line":644},[605,894,895],{"class":615},"  \u003CTaskTable \u002F>\n",[605,897,898],{"class":607,"line":692},[605,899,900],{"class":775},"\u003C\u002FDnDProvider>\n",[500,902,904],{"id":903},"virtualized-rows","仮想化された行",[487,906,907,910,911,914],{},[491,908,909],{},"virtualize"," はテーブルに TanStack Virtual を与えます：画面上の行とその周りの 8 行（",[491,912,913],{},"overscan","）が、2 つのスペーサー行の間に描画されます。",[596,916,918],{"className":766,"code":917,"filename":515,"language":768,"meta":601,"style":601},"\u003CUTable\n  :data=\"items\"\n  :watch-options=\"{ deep: false }\"\n  :virtualize=\"{ estimateSize: 45, overscan: 8, onChange: () => captureLayout() }\"\n  class=\"min-h-0 flex-1\"\n\u002F>\n",[491,919,920,925,941,968,1019,1029],{"__ignoreMap":601},[605,921,922],{"class":607,"line":608},[605,923,924],{"class":775},"\u003CUTable\n",[605,926,927,930,932,934,936,938],{"class":607,"line":644},[605,928,929],{"class":619},"  :",[605,931,530],{"class":725},[605,933,620],{"class":619},[605,935,794],{"class":637},[605,937,797],{"class":615},[605,939,940],{"class":637},"\"\n",[605,942,943,945,948,950,952,955,958,960,963,966],{"class":607,"line":692},[605,944,929],{"class":619},[605,946,947],{"class":725},"watch-options",[605,949,620],{"class":619},[605,951,794],{"class":637},[605,953,954],{"class":619},"{",[605,956,957],{"class":725}," deep",[605,959,698],{"class":619},[605,961,962],{"class":682}," false",[605,964,965],{"class":619}," }",[605,967,940],{"class":637},[605,969,970,972,974,976,978,980,983,985,988,990,993,995,998,1000,1003,1005,1007,1009,1012,1015,1017],{"class":607,"line":722},[605,971,929],{"class":619},[605,973,909],{"class":725},[605,975,620],{"class":619},[605,977,794],{"class":637},[605,979,954],{"class":619},[605,981,982],{"class":725}," estimateSize",[605,984,698],{"class":619},[605,986,987],{"class":682}," 45",[605,989,686],{"class":619},[605,991,992],{"class":725}," overscan",[605,994,698],{"class":619},[605,996,997],{"class":682}," 8",[605,999,686],{"class":619},[605,1001,1002],{"class":623}," onChange",[605,1004,698],{"class":619},[605,1006,701],{"class":619},[605,1008,652],{"class":611},[605,1010,1011],{"class":623}," captureLayout",[605,1013,1014],{"class":619},"()",[605,1016,965],{"class":619},[605,1018,940],{"class":637},[605,1020,1021,1024,1026],{"class":607,"line":735},[605,1022,1023],{"class":725},"  class",[605,1025,620],{"class":619},[605,1027,1028],{"class":637},"\"min-h-0 flex-1\"\n",[605,1030,1031],{"class":607,"line":760},[605,1032,1033],{"class":615},"\u002F>\n",[505,1035,1036,1050,1053,1059],{},[508,1037,1038,1041,1042,1045,1046,1049],{},[491,1039,1040],{},"estimateSize"," は最初の見積もりです：仮想化ライブラリは各行を描画するときに計測します。計測するとその下の行が動くので、",[491,1043,1044],{},"onChange"," がリストの ",[491,1047,1048],{},"captureLayout()"," を呼び出します。こうしてドラッグ中は、その移動が一瞬で飛ぶのではなく、ライブラリによってアニメーションされます。",[508,1051,1052],{},"テーブルがスクロール要素で、手に持った行はその中に留まります：上端や下端の近くではドラッグがテーブルをスクロールし、新しい行は見えてきたときに描画されます。",[508,1054,1055,1056,869],{},"ドラフトは移動のたびに新しい配列になるので、テーブルがその中身を監視する必要はありません（",[491,1057,1058],{},"deep: false",[508,1060,1061,1062,1065,1066,1070],{},"持っている行から遠くまでスクロールすると、その行は描画範囲から外れてアンマウントされます。ドラッグは続きます：オーバーレイはまだその行を表示しており、行はドラフトが決めた位置に着地します。自分で作る仮想リストなら、",[491,1063,1064],{},"rangeExtractor"," でその行をマウントしたままにできます（",[1067,1068,356],"a",{"href":1069},"\u002Fdocs\u002Fguides\u002Fvirtual-lists#tanstack-virtual","を参照）。テーブルは行をスペーサー行の間に並べるので、ほかの行から離れて描画された行はそれらを押しのけてしまいます。そのため、このテーブルでは行をアンマウントさせています。",[500,1072,1074],{"id":1073},"search-then-drag","検索してからドラッグ",[596,1076,1078],{"className":598,"code":1077,"filename":515,"language":600,"meta":601,"style":601},"const { items, captureLayout } = makeSortableList(() => table.value?.tableRef?.tBodies[0] ?? null, {\n  items: tasks,\n  filter: (task) => {\n    const text = query.value.trim().toLowerCase();\n    return !text || `${task.id} ${task.title} ${task.assignee}`.toLowerCase().includes(text);\n  },\n  axis: 'y',\n  modifiers: [restrictToFirstScrollableAncestor],\n  label: 'Tasks',\n});\n",[491,1079,1080,1141,1153,1171,1202,1271,1276,1289,1305,1317],{"__ignoreMap":601},[605,1081,1082,1084,1087,1090,1092,1095,1098,1101,1104,1106,1108,1111,1113,1115,1117,1119,1121,1124,1127,1130,1133,1135,1137,1139],{"class":607,"line":608},[605,1083,612],{"class":611},[605,1085,1086],{"class":619}," {",[605,1088,1089],{"class":615}," items",[605,1091,686],{"class":619},[605,1093,1094],{"class":615}," captureLayout ",[605,1096,1097],{"class":619},"}",[605,1099,1100],{"class":619}," =",[605,1102,1103],{"class":623}," makeSortableList",[605,1105,649],{"class":619},[605,1107,652],{"class":611},[605,1109,1110],{"class":615}," table",[605,1112,658],{"class":619},[605,1114,661],{"class":615},[605,1116,664],{"class":619},[605,1118,526],{"class":615},[605,1120,664],{"class":619},[605,1122,1123],{"class":615},"tBodies",[605,1125,1126],{"class":619},"[",[605,1128,1129],{"class":682},"0",[605,1131,1132],{"class":619},"]",[605,1134,679],{"class":619},[605,1136,683],{"class":682},[605,1138,686],{"class":619},[605,1140,689],{"class":619},[605,1142,1143,1146,1148,1151],{"class":607,"line":644},[605,1144,1145],{"class":725},"  items",[605,1147,698],{"class":619},[605,1149,1150],{"class":615}," tasks",[605,1152,719],{"class":619},[605,1154,1155,1158,1160,1163,1165,1167,1169],{"class":607,"line":692},[605,1156,1157],{"class":623},"  filter",[605,1159,698],{"class":619},[605,1161,1162],{"class":619}," (",[605,1164,711],{"class":725},[605,1166,676],{"class":619},[605,1168,652],{"class":611},[605,1170,689],{"class":619},[605,1172,1173,1176,1179,1181,1184,1186,1188,1190,1193,1196,1199],{"class":607,"line":722},[605,1174,1175],{"class":611},"    const",[605,1177,1178],{"class":615}," text ",[605,1180,620],{"class":619},[605,1182,1183],{"class":623}," query",[605,1185,658],{"class":619},[605,1187,661],{"class":623},[605,1189,658],{"class":619},[605,1191,1192],{"class":623},"trim",[605,1194,1195],{"class":619},"().",[605,1197,1198],{"class":623},"toLowerCase",[605,1200,1201],{"class":619},"();\n",[605,1203,1204,1207,1210,1213,1216,1219,1222,1224,1226,1228,1230,1233,1235,1237,1239,1241,1243,1245,1247,1250,1252,1255,1257,1259,1261,1264,1266,1269],{"class":607,"line":735},[605,1205,1206],{"class":611},"    return",[605,1208,1209],{"class":619}," !",[605,1211,1212],{"class":615},"text ",[605,1214,1215],{"class":619},"||",[605,1217,1218],{"class":637}," `",[605,1220,1221],{"class":619},"${",[605,1223,711],{"class":637},[605,1225,658],{"class":619},[605,1227,716],{"class":637},[605,1229,1097],{"class":619},[605,1231,1232],{"class":619}," ${",[605,1234,711],{"class":637},[605,1236,658],{"class":619},[605,1238,755],{"class":637},[605,1240,1097],{"class":619},[605,1242,1232],{"class":619},[605,1244,711],{"class":637},[605,1246,658],{"class":619},[605,1248,1249],{"class":637},"assignee",[605,1251,1097],{"class":619},[605,1253,1254],{"class":637},"`",[605,1256,658],{"class":619},[605,1258,1198],{"class":623},[605,1260,1195],{"class":619},[605,1262,1263],{"class":623},"includes",[605,1265,670],{"class":619},[605,1267,1268],{"class":615},"text",[605,1270,641],{"class":619},[605,1272,1273],{"class":607,"line":760},[605,1274,1275],{"class":619},"  },\n",[605,1277,1279,1282,1284,1287],{"class":607,"line":1278},7,[605,1280,1281],{"class":725},"  axis",[605,1283,698],{"class":619},[605,1285,1286],{"class":637}," 'y'",[605,1288,719],{"class":619},[605,1290,1292,1295,1297,1300,1302],{"class":607,"line":1291},8,[605,1293,1294],{"class":725},"  modifiers",[605,1296,698],{"class":619},[605,1298,1299],{"class":619}," [",[605,1301,542],{"class":615},[605,1303,1304],{"class":619},"],\n",[605,1306,1308,1310,1312,1315],{"class":607,"line":1307},9,[605,1309,738],{"class":725},[605,1311,698],{"class":619},[605,1313,1314],{"class":637}," 'Tasks'",[605,1316,719],{"class":619},[605,1318,1320],{"class":607,"line":1319},10,[605,1321,763],{"class":619},[487,1323,1324,1325,1328,1329,1332],{},"「Mia」で検索し、彼女のタスクの 1 つを別のタスクの上へ移動してから、検索をクリアしてみましょう：彼女のタスクは新しい順序になり、ほかのタスクはすべて元の位置のままです。ドロップの ",[491,1326,1327],{},"e.to.index"," は表示されている行で数えます。",[491,1330,1331],{},"e.result"," は配列全体を持っています。",[1334,1335,1336,1342],"tip",{},[487,1337,1338,1341],{},[511,1339,1340],{},"ほかの UI ライブラリ","。Nuxt UI は素の要素を描画し、あなたのクラスと属性をそのまま渡します。その土台である Reka UI のプリミティブも同じです：必要なのは ref、スロット、クラスだけです。ほかのライブラリでもテーブルは自分で行を描画し、同じ手順が使えます：",[505,1343,1344,1373,1386,1403,1409],{},[508,1345,1346,1349,1350,1353,1354,1357,1358,1361,1362,1364,1365,1368,1369,1372],{},[511,1347,1348],{},"行","。行全体を描画するスロット（Vuetify の ",[491,1351,1352],{},"#item","、Quasar の ",[491,1355,1356],{},"#body","）からは行の要素が得られます：それをアイテムにします。セルしか得られない場合（PrimeVue の ",[491,1359,1360],{},"Column"," の ",[491,1363,1356],{},"、Element Plus の列のデフォルトスロット、Naive UI の ",[491,1366,1367],{},"render","）は、そのうちの 1 つにグリップを置き、ここと同じようにその ",[491,1370,1371],{},"closest('tr')"," をアイテムにします。",[508,1374,1375,1378,1379,1381,1382,1385],{},[511,1376,1377],{},"リスト","。テーブルのルート要素の中の ",[491,1380,519],{}," です：テーブルに付けたテンプレート参照でコンポーネントが、その ",[491,1383,1384],{},"$el"," で要素が得られます。",[508,1387,1388,1391,1392,1395,1396,1395,1399,1402],{},[511,1389,1390],{},"キーとデータ","。行のキーを自分の id にし（",[491,1393,1394],{},"item-value","、",[491,1397,1398],{},"row-key",[491,1400,1401],{},"dataKey","）、リストのドラフトをテーブルのデータとして渡します。",[508,1404,1405,1408],{},[511,1406,1407],{},"テーブル独自の並べ替えはオフ","。テーブル自身の行の並べ替えと列のソートは使いません：順序はリストのものです。",[508,1410,1411,1414],{},[511,1412,1413],{},"仮想テーブル","は行をスペーサーの間か、絶対配置のボックスに置きます：どちらでも動き、ドラッグは行がアンマウントされても続きます。",[1416,1417,1418],"note",{},[487,1419,1420,1421,1424,1425,1428,1429,1432,1433,1435],{},"StackBlitz ボタンは、Nuxt UI のドキュメントが Vue 向けに説明しているとおりに Nuxt UI を設定した Vite プロジェクト（",[491,1422,1423],{},"@nuxt\u002Fui\u002Fvite"," プラグイン、Tailwind CSS、サンプルを囲む ",[491,1426,1427],{},"UApp","）でファイルを開きます。",[491,1430,1431],{},"@nuxt\u002Fui"," モジュールを入れた Nuxt アプリでは、フォルダーをコピーしてページで ",[491,1434,873],{}," を描画してください。",[500,1437,1439],{"id":1438},"keyboard-and-screen-readers","キーボードとスクリーンリーダー",[487,1441,1442,1443,1447,1448,1451],{},"Tab でタスクのグリップに移り、:kbd{value=\"Space\"} を押して行を持ち上げます。:kbd{value=\"ArrowUp\"} と ",[1444,1445],"kbd",{"value":1446},"ArrowDown"," で動かし、:kbd{value=\"Space\"} でドロップし、:kbd{value=\"Escape\"} で元に戻します。行には ",[491,1449,1450],{},"label"," があり、リストにもあります：スクリーンリーダーが聞くのはキーではなく「Fix the login form dropped at position 3 of 2000 in Tasks.」です。",[487,1453,1454,1455,1457,1458,1457,1462,1457,1466],{},"さらに読む：",[1067,1456,356],{"href":99}," · ",[1067,1459,1461],{"href":1460},"\u002Fdocs\u002Fguides\u002Fsortable-lists#show-some-of-the-items","アイテムの一部を表示する",[1067,1463,1465],{"href":1464},"\u002Fdocs\u002Fguides\u002Fstyling#tailwind-css","スタイリング：Tailwind と UI キット",[1067,1467,352],{"href":94},[1469,1470,1471],"style",{},"html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .snmWg, html code.shiki .snmWg{--shiki-light:#27272A;--shiki-default:#27272A;--shiki-dark:#E4E4E7}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .sbwC8, html code.shiki .sbwC8{--shiki-light:#0969DA;--shiki-default:#0969DA;--shiki-dark:#7CC4FF}html pre.shiki code .sR6Ar, html code.shiki .sR6Ar{--shiki-light:#0F766E;--shiki-default:#0F766E;--shiki-dark:#7EE0C0}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}html pre.shiki code .s3IRZ, html code.shiki .s3IRZ{--shiki-light:#BC4C00;--shiki-default:#BC4C00;--shiki-dark:#F4A261}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}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 .sf6mc, html code.shiki .sf6mc{--shiki-light:#CF2257;--shiki-default:#CF2257;--shiki-dark:#FF7B9C}",{"title":601,"searchDepth":692,"depth":692,"links":1473},[1474,1475,1476,1477,1478],{"id":502,"depth":644,"text":503},{"id":583,"depth":644,"text":584},{"id":903,"depth":644,"text":904},{"id":1073,"depth":644,"text":1074},{"id":1438,"depth":644,"text":1439},"2,000 件のタスクを持つ Nuxt UI のテーブル。仮想化され、検索でき、行をグリップでドラッグして並べ替えます。","md",null,{"source":1483},"9e76fed3d8",{"icon":250},{"title":470,"description":1479},"gby9YczWa4r_p2FHZ8CtAzVmNUrI9Q1ll1gvTmrvjI8",[1488,1481],{"title":466,"path":467,"stem":468,"description":1489,"icon":245},"ドラッグ＆ドロップで組み立てるランディングページ。ページの上で本物の姿に変わるパレットのセクション、列の間を移る要素、同じデータを使うレイヤーツリー、その場での編集、デバイス幅、元に戻す操作。",[1491,1494,1497,1500],{"name":873,"lang":768,"code":1492,"html":1493},"\u003Cscript setup lang=\"ts\">\nimport { DnDProvider } from '@vue-dnd-kit\u002Fcore';\nimport TaskTable from '.\u002FTaskTable.vue';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- The row in hand: a table row can't have a shadow, so its overlay content has it. -->\n  \u003CDnDProvider overlay-class=\"overflow-hidden rounded-md bg-default shadow-xl ring ring-accented\">\n    \u003CTaskTable \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\"> TaskTable \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FTaskTable.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:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  <!-- The row in hand: a table row can't have a shadow, so its overlay content has it. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> overlay-class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"overflow-hidden rounded-md bg-default shadow-xl ring ring-accented\"\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\">    <TaskTable\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":550,"lang":768,"code":1495,"html":1496},"\u003Cscript setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { makeSortableItem } from '@vue-dnd-kit\u002Fcore';\nimport type { Task } from '.\u002Ftasks';\n\nconst props = defineProps\u003C{ task: Task }>();\n\n\u002F\u002F UTable renders the rows, so no component of ours is the row: this grip is, in the row's\n\u002F\u002F first cell. The item is the `\u003Ctr>` around it, and the grip is its handle (it gets the\n\u002F\u002F focus and the attributes): the rest of the row stays free to select text.\nconst grip = useTemplateRef\u003CHTMLElement>('grip');\nmakeSortableItem(() => grip.value?.closest('tr') ?? null, {\n  id: () => props.task.id,\n  handle: grip,\n  label: () => props.task.title,\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton\n    ref=\"grip\"\n    type=\"button\"\n    class=\"flex size-7 cursor-grab items-center justify-center rounded-md text-dimmed transition-colors hover:bg-elevated hover:text-highlighted focus-visible:outline-2 focus-visible:outline-primary\"\n    :aria-label=\"`Move ${task.title}`\"\n  >\n    \u003CUIcon name=\"i-lucide-grip-vertical\" class=\"size-4\" \u002F>\n  \u003C\u002Fbutton>\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\"> 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\"> '.\u002Ftasks'\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\">\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 UTable renders the rows, so no component of ours is the row: this grip is, in the row's\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 first cell. The item is the `<tr>` around it, and the grip is its handle (it gets the\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 focus and the attributes): the rest of the row stays free to select text.\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\"> grip \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\">'grip'\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:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> grip\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\">closest\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'tr'\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\"> null\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:#0969DA;--shiki-dark:#7CC4FF\">  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:#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>\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\">  handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> grip\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\">  label\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>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">title\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\">  <button\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"grip\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"flex size-7 cursor-grab items-center justify-center rounded-md text-dimmed transition-colors hover:bg-elevated hover:text-highlighted focus-visible:outline-2 focus-visible:outline-primary\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"`Move ${task.title}`\"\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\">    <UIcon\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\">\"i-lucide-grip-vertical\"\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-4\"\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\">  <\u002Fbutton>\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":575,"lang":600,"code":1498,"html":1499},"export type Status = 'Backlog' | 'Todo' | 'In progress' | 'Done';\n\nexport interface Task {\n  id: string;\n  title: string;\n  status: Status;\n  assignee: string;\n  points: number;\n}\n\nconst VERBS = ['Fix', 'Add', 'Polish', 'Test', 'Document', 'Refactor', 'Speed up', 'Review'];\nconst THINGS = [\n  'the login form',\n  'touch drags on iPad',\n  'the export to CSV',\n  'dark mode colors',\n  'the billing page',\n  'keyboard shortcuts',\n  'the search index',\n  'empty states',\n  'the onboarding tour',\n  'image uploads',\n  'the settings panel',\n  'error messages',\n];\nconst STATUSES: Status[] = ['Backlog', 'Todo', 'In progress', 'Done'];\nconst PEOPLE = ['Mia Chen', 'Leo Park', 'Nora King', 'Sam Reyes', 'Ava Moss', 'Ian Ruiz'];\n\n\u002F** `count` tasks, the same on the server and in the browser: a seeded sequence, no `Math.random`. *\u002F\nexport function makeTasks(count: number): Task[] {\n  let seed = 7;\n  const next = (length: number) => {\n    seed = (seed * 16807) % 2147483647;\n    return seed % length;\n  };\n  return Array.from({ length: count }, (_, index) => ({\n    id: `T-${String(index + 1).padStart(4, '0')}`,\n    title: `${VERBS[next(VERBS.length)]} ${THINGS[next(THINGS.length)]}`,\n    status: STATUSES[next(STATUSES.length)]!,\n    assignee: PEOPLE[next(PEOPLE.length)]!,\n    points: [1, 2, 3, 5, 8][next(5)]!,\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\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Status\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:#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>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'In progress'\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\">\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:#27272A;--shiki-dark:#E4E4E7\">  status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Status\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\">  assignee\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\">  points\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\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> VERBS \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\">'Fix'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Add'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Polish'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Test'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Document'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Refactor'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Speed up'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Review'\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\"> THINGS \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:#9A6700;--shiki-dark:#E9C46A\">  'the login form'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'touch drags on iPad'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'the 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:#9A6700;--shiki-dark:#E9C46A\">  'dark mode colors'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'the billing page'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'keyboard shortcuts'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'the search index'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'empty states'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'the onboarding tour'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'image uploads'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'the settings panel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'error messages'\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\"> STATUSES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Status\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\">'Backlog'\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>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'In progress'\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:#1F8A5B;--shiki-dark:#42B883\">const\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:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'Mia Chen'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Leo Park'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Nora King'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Sam Reyes'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ava Moss'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ian Ruiz'\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** `count` tasks, the same on the server and in the browser: a seeded sequence, no `Math.random`. *\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\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeTasks\u003C\u002Fspan>\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>\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\"> Task\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\">  let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> seed \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:#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\"> next\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\">length\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:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    seed \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\">seed \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16807\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\"> 2147483647\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\"> seed \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>\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\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Array\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> length\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:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">_\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> index\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:#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\"> `T-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">String\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:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">padStart\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:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '0'\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:#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:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">VERBS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">VERBS\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:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">THINGS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">THINGS\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:#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:#7C4DCC;--shiki-dark:#C3A6FF\">    status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> STATUSES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">STATUSES\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    assignee\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:#0969DA;--shiki-dark:#7CC4FF\">next\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    points\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:#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\"> 3\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>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">][\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">next\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\">\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":515,"lang":768,"code":1501,"html":1502},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref, shallowRef, useTemplateRef } from 'vue';\nimport type { TableColumn } from '@nuxt\u002Fui';\nimport { makeSortableList, restrictToFirstScrollableAncestor } from '@vue-dnd-kit\u002Fcore';\nimport RowGrip from '.\u002FRowGrip.vue';\nimport { makeTasks, type Status, type Task } from '.\u002Ftasks';\n\nconst tasks = shallowRef(makeTasks(2_000));\nconst query = ref('');\n\n\u002F\u002F The sortable list is the table's `\u003Ctbody>`, where UTable renders the rows.\nconst table = useTemplateRef\u003C{ tableRef: HTMLTableElement | null }>('table');\nconst { items, captureLayout } = makeSortableList(() => table.value?.tableRef?.tBodies[0] ?? null, {\n  items: tasks,\n  \u002F\u002F The search shows some of the tasks; a drop writes the whole array, the hidden ones\n  \u002F\u002F where they were.\n  filter: (task) => {\n    const text = query.value.trim().toLowerCase();\n    return !text || `${task.id} ${task.title} ${task.assignee}`.toLowerCase().includes(text);\n  },\n  \u002F\u002F Up and down only, and never out of the table: its scroller is the rows' first\n  \u002F\u002F scrollable ancestor.\n  axis: 'y',\n  modifiers: [restrictToFirstScrollableAncestor],\n  label: 'Tasks',\n});\n\nconst columns: TableColumn\u003CTask>[] = [\n  { id: 'grip', header: '' },\n  { accessorKey: 'id', header: 'Key' },\n  { accessorKey: 'title', header: 'Task' },\n  { accessorKey: 'status', header: 'Status' },\n  { accessorKey: 'assignee', header: 'Assignee' },\n  { accessorKey: 'points', header: 'Points' },\n];\n\nconst COLORS: Record\u003CStatus, 'neutral' | 'info' | 'warning' | 'success'> = {\n  Backlog: 'neutral',\n  Todo: 'info',\n  'In progress': 'warning',\n  Done: 'success',\n};\n\nconst shown = computed(() => (query.value.trim() ? `${items.value.length} of ${tasks.value.length}` : `${tasks.value.length}`));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- As tall as the frame on the page; expanded, the frame is a flex column that `flex-1` fills. -->\n  \u003Cdiv class=\"mx-auto flex h-[29rem] min-h-0 w-full max-w-7xl flex-1 flex-col gap-3\">\n    \u003Cdiv class=\"flex items-center gap-3\">\n      \u003CUInput v-model=\"query\" icon=\"i-lucide-search\" placeholder=\"Search tasks, keys, people\" class=\"flex-1\" \u002F>\n      \u003Cspan class=\"shrink-0 text-xs text-muted tabular-nums\">{{ shown }} tasks\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\n    \u003C!--\n      `data` is the list's draft: the rows move while you drag, and only the matching ones show.\n      `get-row-id` keys the rows by task, as the list does. The virtualizer measures every\n      row; `onChange` lets the library animate what its measuring moves.\n    -->\n    \u003CUTable\n      ref=\"table\"\n      :data=\"items\"\n      :columns=\"columns\"\n      :get-row-id=\"(task: Task) => task.id\"\n      :watch-options=\"{ deep: false }\"\n      :virtualize=\"{ estimateSize: 45, overscan: 8, onChange: () => captureLayout() }\"\n      sticky\n      class=\"min-h-0 flex-1 rounded-lg bg-default ring ring-default\"\n      :ui=\"{\n        th: 'px-3 py-2.5',\n        td: 'px-3 py-2',\n        tr: 'data-[dnd-placeholder]:bg-primary\u002F5',\n      }\"\n    >\n      \u003Ctemplate #grip-cell=\"{ row }\">\n        \u003CRowGrip :task=\"row.original\" \u002F>\n      \u003C\u002Ftemplate>\n      \u003C!-- The task's title may wrap: the rest stays on one line, and the row fits the table. -->\n      \u003Ctemplate #id-cell=\"{ row }\">\n        \u003Cspan class=\"font-mono text-xs whitespace-nowrap text-muted\">{{ row.original.id }}\u003C\u002Fspan>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #title-cell=\"{ row }\">\n        \u003Cspan class=\"font-medium text-highlighted\">{{ row.original.title }}\u003C\u002Fspan>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #status-cell=\"{ row }\">\n        \u003CUBadge :label=\"row.original.status\" :color=\"COLORS[row.original.status]\" variant=\"subtle\" size=\"sm\" class=\"whitespace-nowrap\" \u002F>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #assignee-cell=\"{ row }\">\n        \u003Cdiv class=\"flex items-center gap-2 whitespace-nowrap\">\n          \u003CUAvatar :alt=\"row.original.assignee\" size=\"2xs\" \u002F>\n          \u003Cspan>{{ row.original.assignee }}\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #points-cell=\"{ row }\">\n        \u003Cspan class=\"tabular-nums\">{{ row.original.points }}\u003C\u002Fspan>\n      \u003C\u002Ftemplate>\n      \u003Ctemplate #empty>\n        \u003Cspan class=\"text-muted\">No task matches “{{ query }}”.\u003C\u002Fspan>\n      \u003C\u002Ftemplate>\n    \u003C\u002FUTable>\n  \u003C\u002Fdiv>\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\"> computed\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\"> shallowRef\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\"> TableColumn \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\"> '@nuxt\u002Fui'\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\"> restrictToFirstScrollableAncestor \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\"> RowGrip \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FRowGrip.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\"> makeTasks\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\"> Status\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\"> 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\"> '.\u002Ftasks'\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\"> tasks \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:#0969DA;--shiki-dark:#7CC4FF\">makeTasks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">2_000\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\"> query \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\">\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 sortable list is the table's `<tbody>`, where UTable renders the rows.\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\"> table \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:#27272A;--shiki-dark:#E4E4E7\"> tableRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> HTMLTableElement\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:#9A6700;--shiki-dark:#E9C46A\">'table'\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\"> captureLayout \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:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> table\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\">tableRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tBodies\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:#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>\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\"> tasks\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 search shows some of the tasks; a drop writes the whole array, the hidden ones\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 they were.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  filter\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\">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:#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\"> text \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> query\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\">trim\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">().\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">toLowerCase\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:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\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:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">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:#9A6700;--shiki-dark:#E9C46A\">task\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:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">task\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">assignee\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\">toLowerCase\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">().\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">includes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">text\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 Up and down only, and never out of the table: its scroller is the rows' first\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 scrollable ancestor.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'y'\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\">  modifiers\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\">restrictToFirstScrollableAncestor\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\">  label\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:#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:#0F766E;--shiki-dark:#7EE0C0\"> TableColumn\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:#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\"> 'grip'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> header\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>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> accessorKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'id'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Key'\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\"> accessorKey\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:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '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>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> accessorKey\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:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> header\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:#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\"> accessorKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'assignee'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Assignee'\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\"> accessorKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'points'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> header\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Points'\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\"> COLORS\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\">Status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'neutral'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'info'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'warning'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'success'\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:#7C4DCC;--shiki-dark:#C3A6FF\">  Backlog\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'neutral'\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\">  Todo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'info'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">  'In progress'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'warning'\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\">  Done\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'success'\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\"> shown \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:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">query\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\">trim\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\">items\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\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> of \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>\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\">length\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\"> `\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>\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\">length\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:#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\">  <!-- As tall as the frame on the page; expanded, the frame is a flex column that `flex-1` fills. -->\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\">\"mx-auto flex h-[29rem] min-h-0 w-full max-w-7xl flex-1 flex-col gap-3\"\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\">\"flex items-center gap-3\"\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\">      <UInput\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\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">query\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"i-lucide-search\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Search tasks, keys, people\"\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\">\"flex-1\"\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\">\"shrink-0 text-xs text-muted tabular-nums\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ shown }} tasks\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\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    <!--\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\">      `data` is the list's draft: the rows move while you drag, and only the matching ones show.\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\">      `get-row-id` keys the rows by task, as the list does. The virtualizer measures 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\">      row; `onChange` lets the library animate what its measuring moves.\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\">    -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <UTable\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"table\"\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\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\">items\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\">columns\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\">columns\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\">get-row-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:#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:#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:#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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">watch-options\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\"> deep\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>\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\">virtualize\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\"> estimateSize\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>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> overscan\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:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> onChange\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\"> captureLayout\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:#7C4DCC;--shiki-dark:#C3A6FF\">      sticky\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"min-h-0 flex-1 rounded-lg bg-default ring ring-default\"\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\">ui\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:#7C4DCC;--shiki-dark:#C3A6FF\">        th\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'px-3 py-2.5'\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\">        td\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'px-3 py-2'\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\">        tr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'data-[dnd-placeholder]:bg-primary\u002F5'\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:#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\">      <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">grip-cell\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\"> row \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\">        <RowGrip\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\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">original\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\">      <\u002Ftemplate>\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 task's title may wrap: the rest stays on one line, and the row fits the table. -->\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\">id-cell\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\"> row \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\">        <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\">\"font-mono text-xs whitespace-nowrap text-muted\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ row.original.id }}\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\">      <\u002Ftemplate>\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\">title-cell\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\"> row \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\">        <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\">\"font-medium text-highlighted\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ row.original.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\">      <\u002Ftemplate>\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\">status-cell\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\"> row \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\">        <UBadge\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">label\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\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">original\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:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\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\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">COLORS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">original\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:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> variant\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"subtle\"\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:#9A6700;--shiki-dark:#E9C46A\">\"sm\"\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\">\"whitespace-nowrap\"\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\">      <\u002Ftemplate>\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\">assignee-cell\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\"> row \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\">\"flex items-center gap-2 whitespace-nowrap\"\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\">          <UAvatar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">alt\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\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">original\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">assignee\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\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:#9A6700;--shiki-dark:#E9C46A\">\"2xs\"\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:#27272A;--shiki-dark:#E4E4E7\">{{ row.original.assignee }}\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\">      <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">points-cell\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\"> row \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\">        <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\">\"tabular-nums\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ row.original.points }}\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\">      <\u002Ftemplate>\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\">empty\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\">\"text-muted\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">No task matches “{{ query }}”.\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\">      <\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002FUTable>\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>\u003C\u002Fcode>\u003C\u002Fpre>",1793707556285]