[{"data":1,"prerenderedAt":2319},["ShallowReactive",2],{"navigation-source":3,"navigation-ko":271,"docs-\u002Fko\u002Fdocs\u002Fexamples\u002Fdesign-canvas":474,"docs-surround-\u002Fko\u002Fdocs\u002Fexamples\u002Fdesign-canvas":2225,"example-design-canvas":2230},[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},"Ko","\u002Fko","ko",[277],{"title":278,"source":279,"path":280,"stem":281,"children":282,"page":35},"문서","6556add362","\u002Fko\u002Fdocs","ko\u002Fdocs",[283,305,374,430],{"title":284,"source":285,"icon":11,"path":286,"stem":287,"children":288,"page":35},"시작하기","e345edbff3","\u002Fko\u002Fdocs\u002Fgetting-started","ko\u002Fdocs\u002F1.getting-started",[289,293,297,301],{"title":290,"path":291,"stem":292,"icon":19},"소개","\u002Fko\u002Fdocs\u002Fgetting-started\u002Fintroduction","ko\u002Fdocs\u002F1.getting-started\u002F1.introduction",{"title":294,"path":295,"stem":296,"icon":24},"설치","\u002Fko\u002Fdocs\u002Fgetting-started\u002Finstallation","ko\u002Fdocs\u002F1.getting-started\u002F2.installation",{"title":298,"path":299,"stem":300,"icon":29},"빠른 시작","\u002Fko\u002Fdocs\u002Fgetting-started\u002Fquick-start","ko\u002Fdocs\u002F1.getting-started\u002F3.quick-start",{"title":302,"path":303,"stem":304,"icon":34},"v2에서 마이그레이션","\u002Fko\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","ko\u002Fdocs\u002F1.getting-started\u002F4.migrating-from-v2",{"title":306,"source":307,"icon":38,"path":308,"stem":309,"children":310,"page":35},"가이드","0338bbaa33","\u002Fko\u002Fdocs\u002Fguides","ko\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},"프로바이더","\u002Fko\u002Fdocs\u002Fguides\u002Fprovider","ko\u002Fdocs\u002F2.guides\u002F01.provider",{"title":316,"path":317,"stem":318,"icon":51},"드래그 앤 드롭","\u002Fko\u002Fdocs\u002Fguides\u002Fdrag-and-drop","ko\u002Fdocs\u002F2.guides\u002F02.drag-and-drop",{"title":320,"path":321,"stem":322,"icon":56},"정렬 가능한 리스트","\u002Fko\u002Fdocs\u002Fguides\u002Fsortable-lists","ko\u002Fdocs\u002F2.guides\u002F03.sortable-lists",{"title":324,"path":325,"stem":326,"icon":61},"항목을 공유하는 리스트","\u002Fko\u002Fdocs\u002Fguides\u002Fshared-lists","ko\u002Fdocs\u002F2.guides\u002F04.shared-lists",{"title":328,"path":329,"stem":330,"icon":66},"트리","\u002Fko\u002Fdocs\u002Fguides\u002Ftrees","ko\u002Fdocs\u002F2.guides\u002F05.trees",{"title":332,"path":333,"stem":334,"icon":71},"멀티 드래그와 선택","\u002Fko\u002Fdocs\u002Fguides\u002Fmulti-drag","ko\u002Fdocs\u002F2.guides\u002F06.multi-drag",{"title":336,"path":337,"stem":338,"icon":76},"오버레이","\u002Fko\u002Fdocs\u002Fguides\u002Foverlay","ko\u002Fdocs\u002F2.guides\u002F07.overlay",{"title":340,"path":341,"stem":342,"icon":81},"축, 경계, 그리드","\u002Fko\u002Fdocs\u002Fguides\u002Fconstraints","ko\u002Fdocs\u002F2.guides\u002F08.constraints",{"title":344,"path":345,"stem":346,"icon":86},"드롭 결정하기","\u002Fko\u002Fdocs\u002Fguides\u002Fdrop-decisions","ko\u002Fdocs\u002F2.guides\u002F09.drop-decisions",{"title":348,"path":349,"stem":350,"icon":91},"애니메이션","\u002Fko\u002Fdocs\u002Fguides\u002Fanimations","ko\u002Fdocs\u002F2.guides\u002F10.animations",{"title":352,"path":353,"stem":354,"icon":96},"접근성","\u002Fko\u002Fdocs\u002Fguides\u002Faccessibility","ko\u002Fdocs\u002F2.guides\u002F11.accessibility",{"title":356,"path":357,"stem":358,"icon":101},"가상 리스트","\u002Fko\u002Fdocs\u002Fguides\u002Fvirtual-lists","ko\u002Fdocs\u002F2.guides\u002F12.virtual-lists",{"title":360,"path":361,"stem":362,"icon":106},"스타일링","\u002Fko\u002Fdocs\u002Fguides\u002Fstyling","ko\u002Fdocs\u002F2.guides\u002F13.styling",{"title":364,"path":365,"stem":366,"icon":111},"센서와 프로그래밍 방식 드래그","\u002Fko\u002Fdocs\u002Fguides\u002Fsensors","ko\u002Fdocs\u002F2.guides\u002F14.sensors",{"title":113,"path":368,"stem":369,"icon":116},"\u002Fko\u002Fdocs\u002Fguides\u002Fdevtools","ko\u002Fdocs\u002F2.guides\u002F15.devtools",{"title":371,"path":372,"stem":373,"icon":121},"파일과 다른 앱","\u002Fko\u002Fdocs\u002Fguides\u002Fnative","ko\u002Fdocs\u002F2.guides\u002F16.native",{"title":123,"source":375,"icon":124,"path":376,"stem":377,"children":378,"page":35},"5c96005c70","\u002Fko\u002Fdocs\u002Fapi","ko\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},"\u002Fko\u002Fdocs\u002Fapi\u002Fdnd-provider","ko\u002Fdocs\u002F3.api\u002F01.dnd-provider",{"title":134,"path":383,"stem":384,"icon":51},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-draggable","ko\u002Fdocs\u002F3.api\u002F02.make-draggable",{"title":138,"path":386,"stem":387,"icon":141},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-droppable","ko\u002Fdocs\u002F3.api\u002F03.make-droppable",{"title":143,"path":389,"stem":390,"icon":56},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-sortable-list","ko\u002Fdocs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":392,"stem":393,"icon":150},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-sortable-item","ko\u002Fdocs\u002F3.api\u002F05.make-sortable-item",{"title":152,"path":395,"stem":396,"icon":155},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","ko\u002Fdocs\u002F3.api\u002F06.make-sortable-tree",{"title":157,"path":398,"stem":399,"icon":160},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-selection-area","ko\u002Fdocs\u002F3.api\u002F07.make-selection-area",{"title":162,"path":401,"stem":402,"icon":165},"\u002Fko\u002Fdocs\u002Fapi\u002Fmake-drag-area","ko\u002Fdocs\u002F3.api\u002F08.make-drag-area",{"title":404,"path":405,"stem":406,"icon":170},"useDnD와 모니터","\u002Fko\u002Fdocs\u002Fapi\u002Fuse-dnd","ko\u002Fdocs\u002F3.api\u002F09.use-dnd",{"title":408,"path":409,"stem":410,"icon":29},"이벤트","\u002Fko\u002Fdocs\u002Fapi\u002Fevents","ko\u002Fdocs\u002F3.api\u002F10.events",{"title":412,"path":413,"stem":414,"icon":179},"모디파이어와 충돌 감지","\u002Fko\u002Fdocs\u002Fapi\u002Fmodifiers","ko\u002Fdocs\u002F3.api\u002F11.modifiers",{"title":416,"path":417,"stem":418,"icon":71},"DragPreview와 오버레이 props","\u002Fko\u002Fdocs\u002Fapi\u002Fdrag-preview","ko\u002Fdocs\u002F3.api\u002F12.drag-preview",{"title":348,"path":420,"stem":421,"icon":187},"\u002Fko\u002Fdocs\u002Fapi\u002Fanimations","ko\u002Fdocs\u002F3.api\u002F13.animations",{"title":423,"path":424,"stem":425,"icon":192},"센서","\u002Fko\u002Fdocs\u002Fapi\u002Fsensors","ko\u002Fdocs\u002F3.api\u002F14.sensors",{"title":427,"path":428,"stem":429,"icon":197},"공통 타입","\u002Fko\u002Fdocs\u002Fapi\u002Ftypes","ko\u002Fdocs\u002F3.api\u002F15.types",{"title":431,"path":432,"stem":433,"children":434,"icon":205,"source":473},"예제","\u002Fko\u002Fdocs\u002Fexamples","ko\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},"프로젝트 보드","\u002Fko\u002Fdocs\u002Fexamples\u002Fboard","ko\u002Fdocs\u002F4.examples\u002F01.board",{"title":442,"path":443,"stem":444,"icon":215},"주간 캘린더","\u002Fko\u002Fdocs\u002Fexamples\u002Fcalendar","ko\u002Fdocs\u002F4.examples\u002F02.calendar",{"title":446,"path":447,"stem":448,"icon":220},"파일 관리자","\u002Fko\u002Fdocs\u002Fexamples\u002Ffile-manager","ko\u002Fdocs\u002F4.examples\u002F03.file-manager",{"title":450,"path":451,"stem":452,"icon":225},"블록 에디터","\u002Fko\u002Fdocs\u002Fexamples\u002Fblock-editor","ko\u002Fdocs\u002F4.examples\u002F04.block-editor",{"title":454,"path":455,"stem":456,"icon":230},"체스","\u002Fko\u002Fdocs\u002Fexamples\u002Fchess","ko\u002Fdocs\u002F4.examples\u002F05.chess",{"title":458,"path":459,"stem":460,"icon":235},"폼 빌더","\u002Fko\u002Fdocs\u002Fexamples\u002Fform-builder","ko\u002Fdocs\u002F4.examples\u002F06.form-builder",{"title":462,"path":463,"stem":464,"icon":240},"디자인 캔버스","\u002Fko\u002Fdocs\u002Fexamples\u002Fdesign-canvas","ko\u002Fdocs\u002F4.examples\u002F07.design-canvas",{"title":466,"path":467,"stem":468,"icon":245},"페이지 빌더","\u002Fko\u002Fdocs\u002Fexamples\u002Fpage-builder","ko\u002Fdocs\u002F4.examples\u002F08.page-builder",{"title":470,"path":471,"stem":472,"icon":250},"데이터 테이블","\u002Fko\u002Fdocs\u002Fexamples\u002Fdata-table","ko\u002Fdocs\u002F4.examples\u002F09.data-table","bd60379aec",{"page":475,"fallback":35},{"id":476,"title":462,"body":477,"category":431,"description":2217,"extension":2218,"links":2219,"meta":2220,"navigation":2222,"path":463,"seo":2223,"stem":464,"__hash__":2224},"docs_ko\u002Fko\u002Fdocs\u002F4.examples\u002F07.design-canvas.md",{"type":478,"value":479,"toc":2208},"minimark",[480,486,491,571,575,587,806,825,829,847,972,979,1308,1319,1474,1478,1488,1822,1825,1829,1842,1937,1943,1947,1962,2148,2162,2166,2182,2204],[481,482],"example",{"height":483,"hint":484,"name":485,"title":462},"43rem","레이어를 다른 프레임으로 드래그하세요. 사각형을 그리거나 Shift-클릭하고, Alt를 누른 채 복사본을 드롭할 수 있습니다","design-canvas",[487,488,490],"h2",{"id":489},"what-to-look-at","살펴볼 점",[492,493,494,514,527,538,552],"ul",{},[495,496,497,498,502,503,509,510,513],"li",{},"**",[499,500,501],"code",{},"Shape.vue","**와 ",[504,505,506],"strong",{},[499,507,508],{},"Artboard.vue",": 모든 레이어는 일반 draggable이고, 프레임은 이름 부분\n(",[499,511,512],{},"handle",")으로 드래그하며 안의 레이어도 함께 움직입니다. Figma처럼 누르는 즉시 선택되므로, 드래그가\n가져가는 것은 프로바이더의 선택입니다. 선택된 여러 레이어 중 하나를 누르면 모두 움직입니다.",[495,515,516,521,522,526],{},[504,517,518],{},[499,519,520],{},"useLayerDrop.ts",": 캔버스와 모든 프레임은 똑같이 동작하는 드롭 대상입니다. 프레임 위에서 놓은\n레이어는 그 프레임 안으로 들어가고, 캔버스 위에서 놓으면 프레임 밖으로 나옵니다.\n",[523,524],"kbd",{"value":525},"Alt","를 누르고 있으면 대신 복사본이 안착하고, 레이어는 원래 자리에 남습니다.",[495,528,529,534,535,537],{},[504,530,531],{},[499,532,533],{},"LayersPanel.vue",": 패널은 디자인 자체에 대한 ",[499,536,152],{},"입니다. 행의 순서가 쌓임\n순서이고, 행을 프레임 안으로 드롭하면 레이어가 그 프레임으로 옮겨집니다.",[495,539,540,545,546,548,549,551],{},[504,541,542],{},[499,543,544],{},"Canvas.vue",": 스마트 가이드는 데모가 직접 만든 모디파이어입니다. ",[499,547,157],{},"가 선택\n사각형을 그리고, ",[499,550,162],{},"가 캔버스에서 시작하는 모든 드래그에 규칙을 줍니다.",[495,553,554,559,560,559,565,570],{},[504,555,556],{},[499,557,558],{},"editor.ts",", ",[504,561,562],{},[499,563,564],{},"geometry.ts",[504,566,567],{},[499,568,569],{},"design.ts",": 디자인, 그 기록, 보기, 그리고 스냅과 정렬\n계산으로, 드래그 앤 드롭은 전혀 없습니다.",[487,572,574],{"id":573},"drawn-at-the-zoom","확대 배율로 그리기",[576,577,578,579,582,583,586],"p",{},"캔버스는 CSS ",[499,580,581],{},"scale()"," 없이 확대·축소합니다. 모든 레이어는 크기에 확대 배율을 곱한 크기로, 화면\n픽셀 단위로 배치됩니다. 그래서 라이브러리가 측정하는 것이 곧 화면에 보이는 것이고, 드롭 대상, 선택\n사각형, 오버레이 안의 클론에 특별한 처리가 필요 없습니다. 캔버스 안의 세계는 팬으로만,\n",[499,584,585],{},"translate()","로 움직입니다.",[588,589,594],"pre",{"className":590,"code":591,"filename":501,"language":592,"meta":593,"style":593},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","const style = computed(() => {\n  const { zoom } = editor.view;\n  const { x, y, width, height } = props.shape;\n  return { left: `${x * zoom}px`, top: `${y * zoom}px`, width: `${width * zoom}px`, height: `${height * zoom}px` };\n});\n","ts","",[499,595,596,626,656,696,800],{"__ignoreMap":593},[597,598,601,605,609,613,617,620,623],"span",{"class":599,"line":600},"line",1,[597,602,604],{"class":603},"s78Kj","const",[597,606,608],{"class":607},"snmWg"," style ",[597,610,612],{"class":611},"s6cML","=",[597,614,616],{"class":615},"sbwC8"," computed",[597,618,619],{"class":611},"(()",[597,621,622],{"class":603}," =>",[597,624,625],{"class":611}," {\n",[597,627,629,632,635,638,641,644,647,650,653],{"class":599,"line":628},2,[597,630,631],{"class":603},"  const",[597,633,634],{"class":611}," {",[597,636,637],{"class":607}," zoom ",[597,639,640],{"class":611},"}",[597,642,643],{"class":611}," =",[597,645,646],{"class":607}," editor",[597,648,649],{"class":611},".",[597,651,652],{"class":607},"view",[597,654,655],{"class":611},";\n",[597,657,659,661,663,666,669,672,674,677,679,682,684,686,689,691,694],{"class":599,"line":658},3,[597,660,631],{"class":603},[597,662,634],{"class":611},[597,664,665],{"class":607}," x",[597,667,668],{"class":611},",",[597,670,671],{"class":607}," y",[597,673,668],{"class":611},[597,675,676],{"class":607}," width",[597,678,668],{"class":611},[597,680,681],{"class":607}," height ",[597,683,640],{"class":611},[597,685,643],{"class":611},[597,687,688],{"class":607}," props",[597,690,649],{"class":611},[597,692,693],{"class":607},"shape",[597,695,655],{"class":611},[597,697,699,702,704,708,711,715,718,721,724,727,729,732,734,737,739,741,743,746,748,750,752,754,756,758,760,762,764,767,769,771,773,775,777,780,782,784,786,789,791,793,795,797],{"class":599,"line":698},4,[597,700,701],{"class":603},"  return",[597,703,634],{"class":611},[597,705,707],{"class":706},"sVvmN"," left",[597,709,710],{"class":611},":",[597,712,714],{"class":713},"sN8r7"," `",[597,716,717],{"class":611},"${",[597,719,720],{"class":713},"x ",[597,722,723],{"class":611},"*",[597,725,726],{"class":713}," zoom",[597,728,640],{"class":611},[597,730,731],{"class":713},"px`",[597,733,668],{"class":611},[597,735,736],{"class":706}," top",[597,738,710],{"class":611},[597,740,714],{"class":713},[597,742,717],{"class":611},[597,744,745],{"class":713},"y ",[597,747,723],{"class":611},[597,749,726],{"class":713},[597,751,640],{"class":611},[597,753,731],{"class":713},[597,755,668],{"class":611},[597,757,676],{"class":706},[597,759,710],{"class":611},[597,761,714],{"class":713},[597,763,717],{"class":611},[597,765,766],{"class":713},"width ",[597,768,723],{"class":611},[597,770,726],{"class":713},[597,772,640],{"class":611},[597,774,731],{"class":713},[597,776,668],{"class":611},[597,778,779],{"class":706}," height",[597,781,710],{"class":611},[597,783,714],{"class":713},[597,785,717],{"class":611},[597,787,788],{"class":713},"height ",[597,790,723],{"class":611},[597,792,726],{"class":713},[597,794,640],{"class":611},[597,796,731],{"class":713},[597,798,799],{"class":611}," };\n",[597,801,803],{"class":599,"line":802},5,[597,804,805],{"class":611},"});\n",[576,807,808,809,812,813,816,817,820,821,824],{},"휠로 팬과 확대·축소(",[523,810],{"value":811},"Ctrl"," 또는 핀치)를 하고, ",[523,814],{"value":815},"Space","를 누른 채 드래그하기,\n손 도구, 모서리의 버튼으로도 할 수 있습니다. 크기 조절 핸들과 마찬가지로 평범한 포인터 이벤트와 휠\n이벤트입니다. Space가 손 도구이므로, 레이어를 집는 것은 ",[523,818],{"value":819},"Enter","뿐입니다(프로바이더의\n",[499,822,823],{},"keyboard.keys",").",[487,826,828],{"id":827},"moving-layers-between-frames","프레임 사이로 레이어 옮기기",[576,830,831,832,835,836,839,840,843,844,846],{},"레이어는 자체 오버레이 ",[499,833,834],{},"DragGroup.vue","가 있는 일반 draggable입니다. 오버레이는 드래그 중인 레이어를\n놓인 모양 그대로 배치합니다. 각 레이어의 ",[499,837,838],{},"DragPreview","(집을 때 만든 클론)를 레이어의 ",[499,841,842],{},"data","를 바탕으로\n그려진 자리에 놓습니다. 클론이 움직이는 동안 ",[523,845],{"value":525},"를 누르고 있지 않으면 레이어 자체는\n자리를 비켜 줍니다.",[588,848,850],{"className":590,"code":849,"filename":501,"language":592,"meta":593,"style":593},"const { isDragging, selected } = makeDraggable(el, {\n  id: () => props.shape.id,\n  type: 'layer',\n  data: () => editor.dragData(props.shape), \u002F\u002F { layer, left, top }\n  overlay: DragGroup,\n});\n",[499,851,852,883,909,921,955,967],{"__ignoreMap":593},[597,853,854,856,858,861,863,866,868,870,873,876,879,881],{"class":599,"line":600},[597,855,604],{"class":603},[597,857,634],{"class":611},[597,859,860],{"class":607}," isDragging",[597,862,668],{"class":611},[597,864,865],{"class":607}," selected ",[597,867,640],{"class":611},[597,869,643],{"class":611},[597,871,872],{"class":615}," makeDraggable",[597,874,875],{"class":611},"(",[597,877,878],{"class":607},"el",[597,880,668],{"class":611},[597,882,625],{"class":611},[597,884,885,888,890,893,895,897,899,901,903,906],{"class":599,"line":628},[597,886,887],{"class":615},"  id",[597,889,710],{"class":611},[597,891,892],{"class":611}," ()",[597,894,622],{"class":603},[597,896,688],{"class":607},[597,898,649],{"class":611},[597,900,693],{"class":607},[597,902,649],{"class":611},[597,904,905],{"class":607},"id",[597,907,908],{"class":611},",\n",[597,910,911,914,916,919],{"class":599,"line":658},[597,912,913],{"class":706},"  type",[597,915,710],{"class":611},[597,917,918],{"class":713}," 'layer'",[597,920,908],{"class":611},[597,922,923,926,928,930,932,934,936,939,941,944,946,948,951],{"class":599,"line":698},[597,924,925],{"class":615},"  data",[597,927,710],{"class":611},[597,929,892],{"class":611},[597,931,622],{"class":603},[597,933,646],{"class":615},[597,935,649],{"class":611},[597,937,938],{"class":615},"dragData",[597,940,875],{"class":611},[597,942,943],{"class":607},"props",[597,945,649],{"class":611},[597,947,693],{"class":607},[597,949,950],{"class":611},"),",[597,952,954],{"class":953},"sytrG"," \u002F\u002F { layer, left, top }\n",[597,956,957,960,962,965],{"class":599,"line":802},[597,958,959],{"class":706},"  overlay",[597,961,710],{"class":611},[597,963,964],{"class":607}," DragGroup",[597,966,908],{"class":611},[597,968,970],{"class":599,"line":969},6,[597,971,805],{"class":611},[576,973,974,975,978],{},"드롭할 때 ",[499,976,977],{},"position","은 집은 레이어의 모서리를 대상 안에서 놓은 위치를 화면 픽셀로 나타낸 값입니다.\n이를 확대 배율로 나누면 그 레이어가 세계 안에서 얼마나 움직였는지 알 수 있고, 드래그한 모든 레이어가\n그만큼 프레임 안으로, 또는 캔버스 위로 옮겨집니다.",[588,980,982],{"className":590,"code":981,"filename":520,"language":592,"meta":593,"style":593},"const corner = target ? editor.boxOf(target) : { x: -view.x \u002F view.zoom, y: -view.y \u002F view.zoom };\nconst toWorld = (x: number, y: number) => ({ x: corner.x + x \u002F view.zoom, y: corner.y + y \u002F view.zoom });\n\nconst from = editor.boxOf(grabbed); \u002F\u002F the layer of `active.id`\nconst to = toWorld(position.x, position.y);\neditor.move(active.ids, { x: to.x - from.x, y: to.y - from.y }, target, editor.altHeld.value);\n",[499,983,984,1069,1157,1163,1189,1221],{"__ignoreMap":593},[597,985,986,988,991,993,996,999,1001,1003,1006,1008,1011,1014,1017,1019,1021,1023,1026,1028,1030,1032,1035,1038,1040,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061,1063,1066],{"class":599,"line":600},[597,987,604],{"class":603},[597,989,990],{"class":607}," corner ",[597,992,612],{"class":611},[597,994,995],{"class":607}," target ",[597,997,998],{"class":611},"?",[597,1000,646],{"class":615},[597,1002,649],{"class":611},[597,1004,1005],{"class":615},"boxOf",[597,1007,875],{"class":611},[597,1009,1010],{"class":607},"target",[597,1012,1013],{"class":611},")",[597,1015,1016],{"class":611}," :",[597,1018,634],{"class":611},[597,1020,665],{"class":706},[597,1022,710],{"class":611},[597,1024,1025],{"class":611}," -",[597,1027,652],{"class":607},[597,1029,649],{"class":611},[597,1031,720],{"class":607},[597,1033,1034],{"class":611},"\u002F",[597,1036,1037],{"class":607}," view",[597,1039,649],{"class":611},[597,1041,1042],{"class":607},"zoom",[597,1044,668],{"class":611},[597,1046,671],{"class":706},[597,1048,710],{"class":611},[597,1050,1025],{"class":611},[597,1052,652],{"class":607},[597,1054,649],{"class":611},[597,1056,745],{"class":607},[597,1058,1034],{"class":611},[597,1060,1037],{"class":607},[597,1062,649],{"class":611},[597,1064,1065],{"class":607},"zoom ",[597,1067,1068],{"class":611},"};\n",[597,1070,1071,1073,1076,1078,1081,1084,1086,1090,1092,1094,1096,1098,1100,1102,1105,1107,1109,1112,1114,1116,1119,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1147,1149,1151,1153,1155],{"class":599,"line":628},[597,1072,604],{"class":603},[597,1074,1075],{"class":615}," toWorld",[597,1077,643],{"class":611},[597,1079,1080],{"class":611}," (",[597,1082,1083],{"class":706},"x",[597,1085,710],{"class":611},[597,1087,1089],{"class":1088},"sR6Ar"," number",[597,1091,668],{"class":611},[597,1093,671],{"class":706},[597,1095,710],{"class":611},[597,1097,1089],{"class":1088},[597,1099,1013],{"class":611},[597,1101,622],{"class":603},[597,1103,1104],{"class":611}," ({",[597,1106,665],{"class":706},[597,1108,710],{"class":611},[597,1110,1111],{"class":607}," corner",[597,1113,649],{"class":611},[597,1115,720],{"class":607},[597,1117,1118],{"class":611},"+",[597,1120,1121],{"class":607}," x ",[597,1123,1034],{"class":611},[597,1125,1037],{"class":607},[597,1127,649],{"class":611},[597,1129,1042],{"class":607},[597,1131,668],{"class":611},[597,1133,671],{"class":706},[597,1135,710],{"class":611},[597,1137,1111],{"class":607},[597,1139,649],{"class":611},[597,1141,745],{"class":607},[597,1143,1118],{"class":611},[597,1145,1146],{"class":607}," y ",[597,1148,1034],{"class":611},[597,1150,1037],{"class":607},[597,1152,649],{"class":611},[597,1154,1065],{"class":607},[597,1156,805],{"class":611},[597,1158,1159],{"class":599,"line":658},[597,1160,1162],{"emptyLinePlaceholder":1161},true,"\n",[597,1164,1165,1167,1170,1172,1174,1176,1178,1180,1183,1186],{"class":599,"line":698},[597,1166,604],{"class":603},[597,1168,1169],{"class":607}," from ",[597,1171,612],{"class":611},[597,1173,646],{"class":615},[597,1175,649],{"class":611},[597,1177,1005],{"class":615},[597,1179,875],{"class":611},[597,1181,1182],{"class":607},"grabbed",[597,1184,1185],{"class":611},");",[597,1187,1188],{"class":953}," \u002F\u002F the layer of `active.id`\n",[597,1190,1191,1193,1196,1198,1200,1202,1204,1206,1208,1210,1213,1215,1218],{"class":599,"line":802},[597,1192,604],{"class":603},[597,1194,1195],{"class":607}," to ",[597,1197,612],{"class":611},[597,1199,1075],{"class":615},[597,1201,875],{"class":611},[597,1203,977],{"class":607},[597,1205,649],{"class":611},[597,1207,1083],{"class":607},[597,1209,668],{"class":611},[597,1211,1212],{"class":607}," position",[597,1214,649],{"class":611},[597,1216,1217],{"class":607},"y",[597,1219,1220],{"class":611},");\n",[597,1222,1223,1226,1228,1231,1233,1236,1238,1241,1243,1245,1247,1249,1252,1254,1256,1259,1262,1264,1266,1268,1270,1272,1274,1276,1278,1280,1282,1284,1286,1289,1292,1294,1296,1298,1301,1303,1306],{"class":599,"line":969},[597,1224,1225],{"class":615},"editor",[597,1227,649],{"class":611},[597,1229,1230],{"class":615},"move",[597,1232,875],{"class":611},[597,1234,1235],{"class":607},"active",[597,1237,649],{"class":611},[597,1239,1240],{"class":607},"ids",[597,1242,668],{"class":611},[597,1244,634],{"class":611},[597,1246,665],{"class":706},[597,1248,710],{"class":611},[597,1250,1251],{"class":607}," to",[597,1253,649],{"class":611},[597,1255,720],{"class":607},[597,1257,1258],{"class":611},"-",[597,1260,1261],{"class":607}," from",[597,1263,649],{"class":611},[597,1265,1083],{"class":607},[597,1267,668],{"class":611},[597,1269,671],{"class":706},[597,1271,710],{"class":611},[597,1273,1251],{"class":607},[597,1275,649],{"class":611},[597,1277,745],{"class":607},[597,1279,1258],{"class":611},[597,1281,1261],{"class":607},[597,1283,649],{"class":611},[597,1285,745],{"class":607},[597,1287,1288],{"class":611},"},",[597,1290,1291],{"class":607}," target",[597,1293,668],{"class":611},[597,1295,646],{"class":607},[597,1297,649],{"class":611},[597,1299,1300],{"class":607},"altHeld",[597,1302,649],{"class":611},[597,1304,1305],{"class":607},"value",[597,1307,1220],{"class":611},[576,1309,1310,1311,1314,1315,1318],{},"프레임은 레이어를 받고 프레임은 받지 않습니다. 프레임을 옮기는 드래그는 다른 프레임(",[499,1312,1313],{},"disabled",", 실시간으로\n읽음)을 지나쳐 캔버스로 갑니다. 레이어는 클론을 놓은 바로 그 자리에 나타나므로 대상은\n",[499,1316,1317],{},"overDropAnimation: false","입니다. 툴바의 도구도 일반 draggable입니다. 프레임에 드롭하면 드롭 지점을\n중심으로 레이어를 프레임에 추가하고, 클릭하면 보기의 가운데에 추가합니다.",[588,1320,1322],{"className":590,"code":1321,"filename":508,"language":592,"meta":593,"style":593},"makeDroppable(body, {\n  id: () => props.frame.id,\n  accept: 'layer',\n  disabled: () => !!active.value?.items.some((item) => item.type.includes('frame')),\n  overDropAnimation: false,\n  onDrop: useLayerDrop(() => props.frame),\n});\n",[499,1323,1324,1337,1360,1371,1433,1446,1469],{"__ignoreMap":593},[597,1325,1326,1328,1330,1333,1335],{"class":599,"line":600},[597,1327,138],{"class":615},[597,1329,875],{"class":611},[597,1331,1332],{"class":607},"body",[597,1334,668],{"class":611},[597,1336,625],{"class":611},[597,1338,1339,1341,1343,1345,1347,1349,1351,1354,1356,1358],{"class":599,"line":628},[597,1340,887],{"class":615},[597,1342,710],{"class":611},[597,1344,892],{"class":611},[597,1346,622],{"class":603},[597,1348,688],{"class":607},[597,1350,649],{"class":611},[597,1352,1353],{"class":607},"frame",[597,1355,649],{"class":611},[597,1357,905],{"class":607},[597,1359,908],{"class":611},[597,1361,1362,1365,1367,1369],{"class":599,"line":658},[597,1363,1364],{"class":706},"  accept",[597,1366,710],{"class":611},[597,1368,918],{"class":713},[597,1370,908],{"class":611},[597,1372,1373,1376,1378,1380,1382,1385,1387,1389,1391,1394,1397,1399,1402,1405,1408,1410,1412,1415,1417,1420,1422,1425,1427,1430],{"class":599,"line":698},[597,1374,1375],{"class":615},"  disabled",[597,1377,710],{"class":611},[597,1379,892],{"class":611},[597,1381,622],{"class":603},[597,1383,1384],{"class":611}," !!",[597,1386,1235],{"class":615},[597,1388,649],{"class":611},[597,1390,1305],{"class":615},[597,1392,1393],{"class":611},"?.",[597,1395,1396],{"class":615},"items",[597,1398,649],{"class":611},[597,1400,1401],{"class":615},"some",[597,1403,1404],{"class":611},"((",[597,1406,1407],{"class":706},"item",[597,1409,1013],{"class":611},[597,1411,622],{"class":603},[597,1413,1414],{"class":615}," item",[597,1416,649],{"class":611},[597,1418,1419],{"class":615},"type",[597,1421,649],{"class":611},[597,1423,1424],{"class":615},"includes",[597,1426,875],{"class":611},[597,1428,1429],{"class":713},"'frame'",[597,1431,1432],{"class":611},")),\n",[597,1434,1435,1438,1440,1444],{"class":599,"line":802},[597,1436,1437],{"class":706},"  overDropAnimation",[597,1439,710],{"class":611},[597,1441,1443],{"class":1442},"s3IRZ"," false",[597,1445,908],{"class":611},[597,1447,1448,1451,1453,1456,1458,1460,1462,1464,1466],{"class":599,"line":969},[597,1449,1450],{"class":706},"  onDrop",[597,1452,710],{"class":611},[597,1454,1455],{"class":615}," useLayerDrop",[597,1457,619],{"class":611},[597,1459,622],{"class":603},[597,1461,688],{"class":607},[597,1463,649],{"class":611},[597,1465,1353],{"class":607},[597,1467,1468],{"class":611},"),\n",[597,1470,1472],{"class":599,"line":1471},7,[597,1473,805],{"class":611},[487,1475,1477],{"id":1476},"smart-guides","스마트 가이드",[576,1479,1480,1483,1484,1487],{},[499,1481,1482],{},"smartGuides","는 모디파이어입니다. 드래그의 오프셋을 받아 드래그 중인 레이어가 세계 안의 어디에 올지\n계산하고, 화면에서 6픽셀 안에 있는 다른 레이어의 가장 가까운 가장자리나 중심으로 끌어당깁니다.\n오버레이, 그 아래의 대상, 드롭이 모두 이를 따릅니다. 모니터가 드래그의 ",[499,1485,1486],{},"delta","(모디파이어를 거친\n오프셋)로 분홍색 선과 거리를 그립니다.",[588,1489,1491],{"className":590,"code":1490,"filename":544,"language":592,"meta":593,"style":593},"const smartGuides: Modifier = ({ transform, active }) => {\n  const moving = editor.boundsOf(active.ids);\n  if (!moving) return transform; \u002F\u002F a tool from the toolbar\n  const { zoom } = view;\n  const box = offsetBox(moving, transform.x \u002F zoom, transform.y \u002F zoom);\n  const targets = editor.snapTargets(active.ids);\n  return {\n    x: transform.x + snapBox(box, targets, 'x', SNAP \u002F zoom) * zoom,\n    y: transform.y + snapBox(box, targets, 'y', SNAP \u002F zoom) * zoom,\n  };\n};\n\n\u002F\u002F Every drag that starts on the canvas, frames and layers alike, gets the guides.\nmakeDragArea(viewport, { modifiers: [smartGuides], disabled: panning });\n",[499,1492,1493,1524,1550,1574,1590,1632,1658,1664,1716,1763,1769,1774,1779,1785],{"__ignoreMap":593},[597,1494,1495,1497,1500,1502,1505,1507,1509,1512,1514,1517,1520,1522],{"class":599,"line":600},[597,1496,604],{"class":603},[597,1498,1499],{"class":615}," smartGuides",[597,1501,710],{"class":611},[597,1503,1504],{"class":1088}," Modifier",[597,1506,643],{"class":611},[597,1508,1104],{"class":611},[597,1510,1511],{"class":706}," transform",[597,1513,668],{"class":611},[597,1515,1516],{"class":706}," active",[597,1518,1519],{"class":611}," })",[597,1521,622],{"class":603},[597,1523,625],{"class":611},[597,1525,1526,1528,1531,1533,1535,1537,1540,1542,1544,1546,1548],{"class":599,"line":628},[597,1527,631],{"class":603},[597,1529,1530],{"class":607}," moving ",[597,1532,612],{"class":611},[597,1534,646],{"class":615},[597,1536,649],{"class":611},[597,1538,1539],{"class":615},"boundsOf",[597,1541,875],{"class":611},[597,1543,1235],{"class":607},[597,1545,649],{"class":611},[597,1547,1240],{"class":607},[597,1549,1220],{"class":611},[597,1551,1552,1555,1558,1561,1563,1566,1568,1571],{"class":599,"line":658},[597,1553,1554],{"class":603},"  if",[597,1556,1557],{"class":611}," (!",[597,1559,1560],{"class":607},"moving",[597,1562,1013],{"class":611},[597,1564,1565],{"class":603}," return",[597,1567,1511],{"class":607},[597,1569,1570],{"class":611},";",[597,1572,1573],{"class":953}," \u002F\u002F a tool from the toolbar\n",[597,1575,1576,1578,1580,1582,1584,1586,1588],{"class":599,"line":698},[597,1577,631],{"class":603},[597,1579,634],{"class":611},[597,1581,637],{"class":607},[597,1583,640],{"class":611},[597,1585,643],{"class":611},[597,1587,1037],{"class":607},[597,1589,655],{"class":611},[597,1591,1592,1594,1597,1599,1602,1604,1606,1608,1610,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630],{"class":599,"line":802},[597,1593,631],{"class":603},[597,1595,1596],{"class":607}," box ",[597,1598,612],{"class":611},[597,1600,1601],{"class":615}," offsetBox",[597,1603,875],{"class":611},[597,1605,1560],{"class":607},[597,1607,668],{"class":611},[597,1609,1511],{"class":607},[597,1611,649],{"class":611},[597,1613,720],{"class":607},[597,1615,1034],{"class":611},[597,1617,726],{"class":607},[597,1619,668],{"class":611},[597,1621,1511],{"class":607},[597,1623,649],{"class":611},[597,1625,745],{"class":607},[597,1627,1034],{"class":611},[597,1629,726],{"class":607},[597,1631,1220],{"class":611},[597,1633,1634,1636,1639,1641,1643,1645,1648,1650,1652,1654,1656],{"class":599,"line":969},[597,1635,631],{"class":603},[597,1637,1638],{"class":607}," targets ",[597,1640,612],{"class":611},[597,1642,646],{"class":615},[597,1644,649],{"class":611},[597,1646,1647],{"class":615},"snapTargets",[597,1649,875],{"class":611},[597,1651,1235],{"class":607},[597,1653,649],{"class":611},[597,1655,1240],{"class":607},[597,1657,1220],{"class":611},[597,1659,1660,1662],{"class":599,"line":1471},[597,1661,701],{"class":603},[597,1663,625],{"class":611},[597,1665,1667,1670,1672,1674,1676,1678,1680,1683,1685,1688,1690,1693,1695,1698,1700,1703,1705,1707,1709,1712,1714],{"class":599,"line":1666},8,[597,1668,1669],{"class":706},"    x",[597,1671,710],{"class":611},[597,1673,1511],{"class":607},[597,1675,649],{"class":611},[597,1677,720],{"class":607},[597,1679,1118],{"class":611},[597,1681,1682],{"class":615}," snapBox",[597,1684,875],{"class":611},[597,1686,1687],{"class":607},"box",[597,1689,668],{"class":611},[597,1691,1692],{"class":607}," targets",[597,1694,668],{"class":611},[597,1696,1697],{"class":713}," 'x'",[597,1699,668],{"class":611},[597,1701,1702],{"class":607}," SNAP ",[597,1704,1034],{"class":611},[597,1706,726],{"class":607},[597,1708,1013],{"class":611},[597,1710,1711],{"class":611}," *",[597,1713,726],{"class":607},[597,1715,908],{"class":611},[597,1717,1719,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1747,1749,1751,1753,1755,1757,1759,1761],{"class":599,"line":1718},9,[597,1720,1721],{"class":706},"    y",[597,1723,710],{"class":611},[597,1725,1511],{"class":607},[597,1727,649],{"class":611},[597,1729,745],{"class":607},[597,1731,1118],{"class":611},[597,1733,1682],{"class":615},[597,1735,875],{"class":611},[597,1737,1687],{"class":607},[597,1739,668],{"class":611},[597,1741,1692],{"class":607},[597,1743,668],{"class":611},[597,1745,1746],{"class":713}," 'y'",[597,1748,668],{"class":611},[597,1750,1702],{"class":607},[597,1752,1034],{"class":611},[597,1754,726],{"class":607},[597,1756,1013],{"class":611},[597,1758,1711],{"class":611},[597,1760,726],{"class":607},[597,1762,908],{"class":611},[597,1764,1766],{"class":599,"line":1765},10,[597,1767,1768],{"class":611},"  };\n",[597,1770,1772],{"class":599,"line":1771},11,[597,1773,1068],{"class":611},[597,1775,1777],{"class":599,"line":1776},12,[597,1778,1162],{"emptyLinePlaceholder":1161},[597,1780,1782],{"class":599,"line":1781},13,[597,1783,1784],{"class":953},"\u002F\u002F Every drag that starts on the canvas, frames and layers alike, gets the guides.\n",[597,1786,1788,1790,1792,1795,1797,1799,1802,1804,1807,1809,1812,1815,1817,1820],{"class":599,"line":1787},14,[597,1789,162],{"class":615},[597,1791,875],{"class":611},[597,1793,1794],{"class":607},"viewport",[597,1796,668],{"class":611},[597,1798,634],{"class":611},[597,1800,1801],{"class":706}," modifiers",[597,1803,710],{"class":611},[597,1805,1806],{"class":611}," [",[597,1808,1482],{"class":607},[597,1810,1811],{"class":611},"],",[597,1813,1814],{"class":706}," disabled",[597,1816,710],{"class":611},[597,1818,1819],{"class":607}," panning ",[597,1821,805],{"class":611},[576,1823,1824],{},"크기 조절 핸들도 같은 선에 스냅하고 같은 가이드를 그립니다.",[487,1826,1828],{"id":1827},"selecting","선택하기",[576,1830,1831,1832,1834,1835,1838,1839,824],{},"빈 캔버스에 그린 선택 사각형은 프레임과 프레임에 속하지 않은 레이어를 선택하고, 프레임 안에 그리면 그\n프레임의 레이어를 선택합니다. 둘 다 ",[499,1833,157],{},"입니다. 가장 안쪽 영역이 누르기를 받고, 그\n안의 draggable을 맡습니다. ",[523,1836],{"value":1837},"Shift","는 선택에 더합니다(",[499,1840,1841],{},"strategy: 'toggle'",[588,1843,1845],{"className":590,"code":1844,"filename":508,"language":592,"meta":593,"style":593},"const { isSelecting, style: band } = makeSelectionArea(body, {\n  strategy: () => (editor.shiftHeld.value ? 'toggle' : 'select'),\n  disabled: editor.panning,\n});\n",[499,1846,1847,1881,1918,1933],{"__ignoreMap":593},[597,1848,1849,1851,1853,1856,1858,1861,1863,1866,1868,1870,1873,1875,1877,1879],{"class":599,"line":600},[597,1850,604],{"class":603},[597,1852,634],{"class":611},[597,1854,1855],{"class":607}," isSelecting",[597,1857,668],{"class":611},[597,1859,1860],{"class":607}," style",[597,1862,710],{"class":611},[597,1864,1865],{"class":607}," band ",[597,1867,640],{"class":611},[597,1869,643],{"class":611},[597,1871,1872],{"class":615}," makeSelectionArea",[597,1874,875],{"class":611},[597,1876,1332],{"class":607},[597,1878,668],{"class":611},[597,1880,625],{"class":611},[597,1882,1883,1886,1888,1890,1892,1894,1896,1898,1901,1903,1906,1908,1911,1913,1916],{"class":599,"line":628},[597,1884,1885],{"class":615},"  strategy",[597,1887,710],{"class":611},[597,1889,892],{"class":611},[597,1891,622],{"class":603},[597,1893,1080],{"class":611},[597,1895,1225],{"class":607},[597,1897,649],{"class":611},[597,1899,1900],{"class":607},"shiftHeld",[597,1902,649],{"class":611},[597,1904,1905],{"class":607},"value ",[597,1907,998],{"class":611},[597,1909,1910],{"class":713}," 'toggle'",[597,1912,1016],{"class":611},[597,1914,1915],{"class":713}," 'select'",[597,1917,1468],{"class":611},[597,1919,1920,1922,1924,1926,1928,1931],{"class":599,"line":658},[597,1921,1375],{"class":706},[597,1923,710],{"class":611},[597,1925,646],{"class":607},[597,1927,649],{"class":611},[597,1929,1930],{"class":607},"panning",[597,1932,908],{"class":611},[597,1934,1935],{"class":599,"line":698},[597,1936,805],{"class":611},[576,1938,1939,1940,1942],{},"에디터는 프레임과 그 안의 레이어를 함께 선택하지 않습니다. 드래그하면 그 레이어가 두 번 움직이기\n때문입니다. 선택 사각형은 시작할 때 포인터를 캡처하므로, 프레임의 빈 곳을 클릭해도 프레임에 전달되지\n않습니다. ",[499,1941,508],{},"는 그곳에서 누른 자리 그대로 놓았을 때 프레임을 선택합니다.",[487,1944,1946],{"id":1945},"the-layers-panel","레이어 패널",[576,1948,1949,1950,1953,1954,1957,1958,1961],{},"트리의 항목은 디자인 그 자체입니다. ",[499,1951,1952],{},"children","이 있는 프레임이며, 맨 위 행이 맨 앞입니다.\n",[499,1955,1956],{},"canNest","는 프레임이 레이어를 받게 하고, 프레임은 최상위에 머물게 합니다. 레이어의 id는 캔버스의\ndraggable 것이므로 행은 자체 key(",[499,1959,1960],{},"row:…",")를 가집니다. 선택은 캔버스의 것이므로 행은 그 레이어와 함께\n강조됩니다.",[588,1963,1965],{"className":590,"code":1964,"filename":533,"language":592,"meta":593,"style":593},"makeSortableTree(tree, {\n  items: editor.layers,\n  getKey: (layer) => `row:${layer.id}`,\n  canNest: (layer, parent) => parent.kind === 'frame' && layer.kind !== 'frame',\n  maxDepth: 1,\n  animateChanges: true,\n  onDrop: ({ items, from, to }) => {\n    \u002F\u002F Positions count from the frame's corner: a layer changing frames takes the\n    \u002F\u002F difference, so it stays where it is on the canvas.\n  },\n});\n",[499,1966,1967,1980,1996,2030,2080,2092,2104,2129,2134,2139,2144],{"__ignoreMap":593},[597,1968,1969,1971,1973,1976,1978],{"class":599,"line":600},[597,1970,152],{"class":615},[597,1972,875],{"class":611},[597,1974,1975],{"class":607},"tree",[597,1977,668],{"class":611},[597,1979,625],{"class":611},[597,1981,1982,1985,1987,1989,1991,1994],{"class":599,"line":628},[597,1983,1984],{"class":706},"  items",[597,1986,710],{"class":611},[597,1988,646],{"class":607},[597,1990,649],{"class":611},[597,1992,1993],{"class":607},"layers",[597,1995,908],{"class":611},[597,1997,1998,2001,2003,2005,2008,2010,2012,2015,2017,2019,2021,2023,2025,2028],{"class":599,"line":658},[597,1999,2000],{"class":615},"  getKey",[597,2002,710],{"class":611},[597,2004,1080],{"class":611},[597,2006,2007],{"class":706},"layer",[597,2009,1013],{"class":611},[597,2011,622],{"class":603},[597,2013,2014],{"class":713}," `row:",[597,2016,717],{"class":611},[597,2018,2007],{"class":713},[597,2020,649],{"class":611},[597,2022,905],{"class":713},[597,2024,640],{"class":611},[597,2026,2027],{"class":713},"`",[597,2029,908],{"class":611},[597,2031,2032,2035,2037,2039,2041,2043,2046,2048,2050,2052,2054,2057,2060,2063,2066,2069,2071,2073,2076,2078],{"class":599,"line":698},[597,2033,2034],{"class":615},"  canNest",[597,2036,710],{"class":611},[597,2038,1080],{"class":611},[597,2040,2007],{"class":706},[597,2042,668],{"class":611},[597,2044,2045],{"class":706}," parent",[597,2047,1013],{"class":611},[597,2049,622],{"class":603},[597,2051,2045],{"class":607},[597,2053,649],{"class":611},[597,2055,2056],{"class":607},"kind ",[597,2058,2059],{"class":611},"===",[597,2061,2062],{"class":713}," 'frame'",[597,2064,2065],{"class":611}," &&",[597,2067,2068],{"class":607}," layer",[597,2070,649],{"class":611},[597,2072,2056],{"class":607},[597,2074,2075],{"class":611},"!==",[597,2077,2062],{"class":713},[597,2079,908],{"class":611},[597,2081,2082,2085,2087,2090],{"class":599,"line":802},[597,2083,2084],{"class":706},"  maxDepth",[597,2086,710],{"class":611},[597,2088,2089],{"class":1442}," 1",[597,2091,908],{"class":611},[597,2093,2094,2097,2099,2102],{"class":599,"line":969},[597,2095,2096],{"class":706},"  animateChanges",[597,2098,710],{"class":611},[597,2100,2101],{"class":1442}," true",[597,2103,908],{"class":611},[597,2105,2106,2108,2110,2112,2115,2117,2119,2121,2123,2125,2127],{"class":599,"line":1471},[597,2107,1450],{"class":615},[597,2109,710],{"class":611},[597,2111,1104],{"class":611},[597,2113,2114],{"class":706}," items",[597,2116,668],{"class":611},[597,2118,1261],{"class":706},[597,2120,668],{"class":611},[597,2122,1251],{"class":706},[597,2124,1519],{"class":611},[597,2126,622],{"class":603},[597,2128,625],{"class":611},[597,2130,2131],{"class":599,"line":1666},[597,2132,2133],{"class":953},"    \u002F\u002F Positions count from the frame's corner: a layer changing frames takes the\n",[597,2135,2136],{"class":599,"line":1718},[597,2137,2138],{"class":953},"    \u002F\u002F difference, so it stays where it is on the canvas.\n",[597,2140,2141],{"class":599,"line":1765},[597,2142,2143],{"class":611},"  },\n",[597,2145,2146],{"class":599,"line":1771},[597,2147,805],{"class":611},[576,2149,2150,2153,2154,2157,2158,2161],{},[499,2151,2152],{},"onDrop","은 트리가 기록되기 전에 실행되므로, 에디터는 각 레이어가 어느 프레임에서 왔는지 아직 알고\n있으며, 실행 취소를 위해 디자인을 저장합니다. 레이어를 덮지 않는 프레임으로 옮긴 레이어는 잘려서 보이지\n않게 되므로, 대신 프레임 가운데로 갑니다. ",[499,2155,2156],{},"animateChanges"," 덕분에 캔버스에서의 변경과 실행 취소에도 행이\n미끄러집니다. 행에는 타입이 있으므로(",[499,2159,2160],{},"type: 'row'","), 레이어와 도구를 받는 캔버스와 프레임은 행을\n거부합니다.",[487,2163,2165],{"id":2164},"keyboard","키보드",[576,2167,2168,2169,2171,2172,2174,2175,2177,2178,2181],{},"Tab으로 레이어에 가서(그 레이어가 선택됩니다) ",[523,2170],{"value":819},"로 집고, 화살표 키로 10픽셀\n(",[523,2173],{"value":1837},"를 누르면 40) 옮기고, ",[523,2176],{"value":819},"로 그 아래 프레임에 드롭합니다. 드래그\n중이 아니면 화살표 키는 선택을 1픽셀씩 옮깁니다. 도구도 같은 방식으로 집으며, 그 화살표 키는 캔버스와\n프레임 사이를 건너뜁니다(",[499,2179,2180],{},"keyboardMode: 'droppables'","). 다른 단축키는 아무것도 선택하지 않았을 때 Design\n패널에 나옵니다.",[576,2183,2184,2185,2189,2190,2189,2194,2189,2198,2189,2202],{},"더 읽어 보기: ",[2186,2187,316],"a",{"href":2188},"\u002Fdocs\u002Fguides\u002Fdrag-and-drop#leave-it-where-it-was-dropped"," ·\n",[2186,2191,2193],{"href":2192},"\u002Fdocs\u002Fguides\u002Fconstraints#your-own-modifier","직접 만든 모디파이어",[2186,2195,2197],{"href":2196},"\u002Fdocs\u002Fguides\u002Fconstraints#rules-for-a-part-of-the-page","페이지 일부를 위한 규칙",[2186,2199,2201],{"href":2200},"\u002Fdocs\u002Fguides\u002Fmulti-drag#rubber-band-selection","사각형 선택",[2186,2203,328],{"href":64},[2205,2206,2207],"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 .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sytrG, html code.shiki .sytrG{--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-default:#85858D;--shiki-default-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic}html pre.shiki code .sR6Ar, html code.shiki .sR6Ar{--shiki-light:#0F766E;--shiki-default:#0F766E;--shiki-dark:#7EE0C0}html pre.shiki code .s3IRZ, html code.shiki .s3IRZ{--shiki-light:#BC4C00;--shiki-default:#BC4C00;--shiki-dark:#F4A261}",{"title":593,"searchDepth":658,"depth":658,"links":2209},[2210,2211,2212,2213,2214,2215,2216],{"id":489,"depth":628,"text":490},{"id":573,"depth":628,"text":574},{"id":827,"depth":628,"text":828},{"id":1476,"depth":628,"text":1477},{"id":1827,"depth":628,"text":1828},{"id":1945,"depth":628,"text":1946},{"id":2164,"depth":628,"text":2165},"Figma 같은 에디터. 확대·축소되는 캔버스 위의 프레임과 레이어, 스마트 가이드, 선택 사각형, Alt로 복제, 그리고 디자인의 트리 그 자체인 레이어 패널.","md",null,{"source":2221},"da45ab8f2a",{"icon":240},{"title":462,"description":2217},"pnIN7ul1wfpokdE9klHfI9zPqg8FtMEWv4cl979v9eE",[2226,2228],{"title":458,"path":459,"stem":460,"description":2227,"icon":235},"Nuxt UI로 만든 폼 빌더. 팔레트에서 드래그한 필드를 행 안에 나란히 놓고, 패널에서 편집하고, 검증이 있는 라이브 미리보기에서 입력한 뒤, Vue 코드로 내보냅니다.",{"title":466,"path":467,"stem":468,"description":2229,"icon":245},"드래그 앤 드롭으로 조립하는 랜딩 페이지. 페이지 위에서 실제 모습으로 바뀌는 팔레트의 섹션, 컬럼 사이를 오가는 요소, 같은 데이터를 쓰는 레이어 트리, 그 자리에서 하는 편집, 기기 너비, 실행 취소.",[2231,2236,2239,2242,2246,2249,2253,2256,2259,2262,2266,2270,2274,2278,2282,2286,2290,2293,2297,2301,2304,2308,2312,2316],{"name":2232,"lang":2233,"code":2234,"html":2235},"index.vue","vue","\u003Cscript setup lang=\"ts\">\nimport { DnDProvider, type Announcements } from '@vue-dnd-kit\u002Fcore';\nimport DesignCanvas from '.\u002FDesignCanvas.vue';\nimport { KINDS } from '.\u002Fdesign';\nimport type { DragData } from '.\u002Feditor';\nimport type { ToolData } from '.\u002FuseLayerDrop';\n\n\u002F\u002F Screen readers hear names, not ids: a layer's, or the layer a tool adds. Rows of the\n\u002F\u002F layers panel keep the built-in texts (`undefined`), which say where they are in the tree.\nconst nameOf = (data: unknown) => {\n  const { layer, tool } = (data ?? {}) as Partial\u003CDragData & ToolData>;\n  return layer?.name ?? (tool && `New ${KINDS[tool].name.toLowerCase()}`);\n};\nconst placeOf = (over: { id: unknown; data: unknown }) =>\n  over.id === 'canvas' ? 'the canvas' : `frame ${(over.data as { name: string }).name}`;\n\nconst announcements: Partial\u003CAnnouncements> = {\n  onDragStart: ({ active }, { count }) => {\n    const name = nameOf(active.data);\n    if (!name) return undefined;\n    const others = count > 1 ? ` and ${count - 1} more` : '';\n    return `Picked up ${name}${others}. Arrow keys move it, Enter drops it, Escape cancels.`;\n  },\n  onDragOver: ({ active, over }) => (nameOf(active.data) ? (over ? `Over ${placeOf(over)}` : 'Off the canvas') : undefined),\n  onDragEnd: ({ active, over, dropped }) => {\n    const name = nameOf(active.data);\n    if (!name) return undefined;\n    return dropped && over ? `${name} dropped on ${placeOf(over)}.` : `${name} went back.`;\n  },\n  onDragCancel: ({ active }) => (nameOf(active.data) ? `${nameOf(active.data)} went back.` : undefined),\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- Space pans, as in any design tool, so Enter alone picks a layer up. Every dragged\n       layer gets its clone at pickup, and the page doesn't scroll under a drag. -->\n  \u003CDnDProvider\n    :keyboard=\"{ keys: { start: ['Enter'], drop: ['Enter'] }, step: 10 }\"\n    overlay-previews=\"all\"\n    :auto-scroll=\"false\"\n    :announcements=\"announcements\"\n    screen-reader-instructions=\"Press Enter to pick up a layer, the arrow keys to move it, Enter to drop it and Escape to cancel. Without a drag, the arrow keys nudge the selected layers.\"\n  >\n    \u003CDesignCanvas \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\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Announcements \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\"> DesignCanvas \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FDesignCanvas.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\"> KINDS \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\"> '.\u002Fdesign'\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\"> DragData \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\"> '.\u002Feditor'\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\"> ToolData \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\"> '.\u002FuseLayerDrop'\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 Screen readers hear names, not ids: a layer's, or the layer a tool adds. Rows of 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 layers panel keep the built-in texts (`undefined`), which say where they are in the tree.\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\"> nameOf\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\">data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> unknown\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:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tool \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:#27272A;--shiki-dark:#E4E4E7\">data \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\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Partial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">DragData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> ToolData\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\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">name \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `New \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">KINDS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">].\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">toLowerCase\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> placeOf\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\">over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> unknown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> unknown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> })\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'canvas'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'the canvas'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `frame \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\">over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">data \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\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\"> announcements\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Partial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Announcements\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:#0969DA;--shiki-dark:#7CC4FF\">  onDragStart\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> active\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\"> count\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\"> name \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> nameOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\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\"> others \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:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ` and \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">count \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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:#9A6700;--shiki-dark:#E9C46A\"> more`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `Picked up \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">others\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">. Arrow keys move it, Enter drops it, Escape cancels.`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragOver\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\"> active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> })\u003C\u002Fspan>\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\">nameOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">data\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:#27272A;--shiki-dark:#E4E4E7\">over \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `Over \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">placeOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> 'Off the canvas'\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\"> undefined\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\">  onDragEnd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> dropped\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\"> name \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> nameOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\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\"> dropped \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> over \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\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> dropped on \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">placeOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> went back.`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragCancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> active\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\">nameOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">data\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:#0969DA;--shiki-dark:#7CC4FF\">nameOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">data\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\"> went back.`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  <!-- Space pans, as in any design tool, so Enter alone picks a layer up. Every dragged\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\">       layer gets its clone at pickup, and the page doesn't scroll under a drag. -->\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <DnDProvider\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">keyboard\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\"> keys\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\"> start\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\">'Enter'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> drop\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\">'Enter'\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\"> step\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    overlay-previews\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"all\"\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\">auto-scroll\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:#BC4C00;--shiki-dark:#F4A261\">false\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\">announcements\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\">announcements\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\">    screen-reader-instructions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Press Enter to pick up a layer, the arrow keys to move it, Enter to drop it and Escape to cancel. Without a drag, the arrow keys nudge the selected layers.\"\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\">    <DesignCanvas\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":508,"lang":2233,"code":2237,"html":2238},"\u003Cscript setup lang=\"ts\">\nimport { computed, inject, useTemplateRef } from 'vue';\nimport { makeDraggable, makeDroppable, makeSelectionArea, useDnD } from '@vue-dnd-kit\u002Fcore';\nimport DragGroup from '.\u002FDragGroup.vue';\nimport Shape from '.\u002FShape.vue';\nimport type { Layer } from '.\u002Fdesign';\nimport { EDITOR } from '.\u002Feditor';\nimport { useLayerDrop } from '.\u002FuseLayerDrop';\n\nconst props = defineProps\u003C{ frame: Layer }>();\nconst editor = inject(EDITOR)!;\nconst { active, status } = useDnD();\n\nconst el = useTemplateRef\u003CHTMLElement>('el');\nconst name = useTemplateRef\u003CHTMLElement>('name');\nconst body = useTemplateRef\u003CHTMLElement>('body');\n\n\u002F\u002F A frame drags by its name, as in Figma: a press on its empty space draws a band instead.\n\u002F\u002F Its layers come along, inside its clone.\nconst { isDragging, selected } = makeDraggable(el, {\n  id: () => props.frame.id,\n  type: 'frame',\n  handle: name,\n  data: () => editor.dragData(props.frame),\n  overlay: DragGroup,\n});\nconst moving = computed(() => isDragging.value && !editor.altHeld.value);\n\n\u002F\u002F The frame takes the layers dropped on it (and the tools that add one). A drag that carries\n\u002F\u002F a frame passes over it (`disabled`, read live): frames don't nest, it goes onto the canvas\n\u002F\u002F below. No landing animation: the layers appear right where their clones were let go.\nconst { isOver } = makeDroppable(body, {\n  id: () => props.frame.id,\n  data: () => props.frame,\n  accept: 'layer',\n  disabled: () => !!active.value?.items.some((item) => item.type.includes('frame')),\n  overDropAnimation: false,\n  onDrop: useLayerDrop(() => props.frame),\n});\n\u002F\u002F Lit while layers from elsewhere are over it: the drop will move them in.\nconst arriving = computed(\n  () => isOver.value && !!active.value?.ids.every((id) => editor.parentOf(id)?.id !== props.frame.id),\n);\n\n\u002F\u002F A band drawn in the frame selects its layers; one drawn on the canvas, whole frames.\nconst { isSelecting, style: band } = makeSelectionArea(body, {\n  strategy: () => (editor.shiftHeld.value ? 'toggle' : 'select'),\n  disabled: editor.panning,\n});\n\nconst shown = computed(() => (props.frame.children ?? []).filter((layer) => !layer.hidden).reverse());\n\nconst style = computed(() => {\n  const { zoom } = editor.view;\n  const { x, y, width, height } = props.frame;\n  return { left: `${x * zoom}px`, top: `${y * zoom}px`, width: `${width * zoom}px`, height: `${height * zoom}px` };\n});\n\n\u002F\u002F The name selects the frame as a layer is selected (see `Shape.vue`).\nlet wasSelected = false;\nconst press = (event: PointerEvent) => {\n  if (event.button !== 0 || editor.panning.value) return;\n  wasSelected = selected.value;\n  if (!wasSelected) editor.select(props.frame.id, event.shiftKey);\n};\nconst click = (event: MouseEvent) => {\n  if (editor.panning.value) return;\n  if (!event.shiftKey) editor.select(props.frame.id);\n  else if (wasSelected) selected.value = false;\n};\n\u002F\u002F A press on the frame's empty space starts a band, which captures the pointer: the click\n\u002F\u002F that follows never reaches the frame. A press released where it started selects it.\nconst pressSpace = (event: PointerEvent) => {\n  if (event.button !== 0 || editor.panning.value) return;\n  const start = { x: event.clientX, y: event.clientY };\n  const release = (up: PointerEvent) => {\n    if (Math.hypot(up.clientX - start.x, up.clientY - start.y) \u003C 3) editor.select(props.frame.id, up.shiftKey);\n  };\n  window.addEventListener('pointerup', release, { once: true });\n};\nconst focus = () => {\n  if (!selected.value) editor.select(props.frame.id);\n};\nconst hover = (on: boolean) => {\n  if (on && status.value === 'idle') editor.hovered.value = props.frame.id;\n  else if (!on && editor.hovered.value === props.frame.id) editor.hovered.value = null;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"el\" class=\"artboard\" :class=\"{ moving, arriving }\" :style=\"style\">\n    \u003Cdiv\n      ref=\"name\"\n      class=\"artboard-name\"\n      :class=\"{ selected }\"\n      :aria-label=\"`Frame ${frame.name}${selected ? ', selected' : ''}`\"\n      data-layer\n      @pointerdown=\"press\"\n      @click=\"click\"\n      @focus=\"focus\"\n      @pointerenter=\"hover(true)\"\n      @pointerleave=\"hover(false)\"\n    >\n      {{ frame.name }}\n    \u003C\u002Fdiv>\n    \u003Cdiv\n      ref=\"body\"\n      class=\"artboard-body\"\n      :style=\"{ background: frame.fill, borderRadius: `${frame.radius * editor.view.zoom}px` }\"\n      @pointerdown.self=\"pressSpace\"\n    >\n      \u003CShape v-for=\"layer in shown\" :key=\"layer.id\" :shape=\"layer\" \u002F>\n      \u003Cdiv v-if=\"isSelecting\" class=\"band\" :style=\"band\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.artboard {\n  position: absolute;\n}\n\n\u002F* The name sits above the frame at the same size at any zoom, as in design tools. *\u002F\n.artboard-name {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  max-width: 100%;\n  overflow: hidden;\n  padding: 0 0 5px;\n  color: var(--dc-muted);\n  font-size: 11px;\n  line-height: 1.3;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: default;\n  user-select: none;\n  transition: color 0.12s;\n}\n\n.artboard-name:hover,\n.artboard-name.selected,\n.arriving .artboard-name {\n  color: #0d99ff;\n}\n\n.artboard-name:focus-visible {\n  border-radius: 3px;\n  outline: 2px solid #0d99ff;\n  outline-offset: 1px;\n}\n\n\u002F* Its layers are clipped to it. `clip`, not `hidden`: focus moving to a layer outside its\n   bounds must not scroll the frame. *\u002F\n.artboard-body {\n  position: absolute;\n  inset: 0;\n  overflow: clip;\n  box-shadow: 0 1px 3px rgb(0 0 0 \u002F 0.1);\n  transition: box-shadow 0.12s;\n}\n\n.arriving .artboard-body {\n  box-shadow:\n    0 0 0 2px #0d99ff,\n    0 1px 3px rgb(0 0 0 \u002F 0.1);\n}\n\n.moving {\n  visibility: hidden;\n}\n\n.band {\n  border: 1px solid #0d99ff;\n  background: rgb(13 153 255 \u002F 0.1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .artboard-name,\n  .artboard-body {\n    transition: none;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject\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\"> makeDraggable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeDroppable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSelectionArea\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DragGroup \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FDragGroup.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Shape \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FShape.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\"> Layer \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\"> '.\u002Fdesign'\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\"> EDITOR \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\"> '.\u002Feditor'\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\"> useLayerDrop \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\"> '.\u002FuseLayerDrop'\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\"> frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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\"> active\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:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> name \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">'name'\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\"> body \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\">'body'\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 A frame drags by its name, as in Figma: a press on its empty space draws a band instead.\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 Its layers come along, inside its clone.\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\"> isDragging\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeDraggable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\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\">frame\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\">  type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\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\"> name\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\">  data\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">dragData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\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\">  overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DragGroup\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\"> moving \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isDragging\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">altHeld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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 frame takes the layers dropped on it (and the tools that add one). A drag that carries\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F a frame passes over it (`disabled`, read live): frames don't nest, it goes onto the canvas\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 below. No landing animation: the layers appear right where their clones were let go.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isOver \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeDroppable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">body\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\">frame\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:#0969DA;--shiki-dark:#7CC4FF\">  data\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\">frame\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\">  accept\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'layer'\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\">  disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">active\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\">items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">some\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">item\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\"> item\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">type\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:#9A6700;--shiki-dark:#E9C46A\">'frame'\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\">  overDropAnimation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  onDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useLayerDrop\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\">frame\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 Lit while layers from elsewhere are over it: the drop will move them in.\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\"> arriving \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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> isOver\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">active\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\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">every\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">id\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\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:#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 A band drawn in the frame selects its layers; one drawn on the canvas, whole frames.\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\"> isSelecting\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> band \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\"> makeSelectionArea\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">body\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\">  strategy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftHeld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'toggle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'select'\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\">  disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">panning\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:#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\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">children \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\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">reverse\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\"> style \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>\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\"> zoom \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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">view\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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height \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\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\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:#7C4DCC;--shiki-dark:#C3A6FF\"> left\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\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> top\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\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\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\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\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\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The name selects the frame as a layer is selected (see `Shape.vue`).\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\"> wasSelected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> press\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">button \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">panning\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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  wasSelected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">wasSelected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey\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:#0969DA;--shiki-dark:#7CC4FF\"> click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> MouseEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">panning\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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\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:#1F8A5B;--shiki-dark:#42B883\">  else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">wasSelected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A press on the frame's empty space starts a band, which captures the pointer: the click\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 that follows never reaches the frame. A press released where it started selects it.\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\"> pressSpace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">button \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">panning\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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start \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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientY \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\"> release\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\">up\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">hypot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">up\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> up\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\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\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> up\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  window\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointerup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> release\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\"> once\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\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:#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\"> hover\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\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">on \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'idle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\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\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\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:#1F8A5B;--shiki-dark:#42B883\">  else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">on \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\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\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"el\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"artboard\"\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\">\"{ moving, arriving }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"style\"\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>\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\">\"name\"\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\">\"artboard-name\"\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\">\"{ selected }\"\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\">\"`Frame ${frame.name}${selected ? ', selected' : ''}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      data-layer\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @pointerdown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"press\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"click\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"focus\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @pointerenter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hover(true)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @pointerleave\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hover(false)\"\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:#27272A;--shiki-dark:#E4E4E7\">      {{ frame.name }}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <div\u003C\u002Fspan>\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\">\"body\"\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\">\"artboard-body\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ background: frame.fill, borderRadius: `${frame.radius * editor.view.zoom}px` }\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @pointerdown.self\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"pressSpace\"\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\">      <Shape\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shape\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\">layer\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\">      <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"isSelecting\"\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\">\"band\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"band\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artboard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The name sits above the frame at the same size at any zoom, as in design tools. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artboard-name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  max-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  line-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ellipsis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artboard-name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artboard-name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">arriving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artboard-name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artboard-name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Its layers are clipped to it. `clip`, not `hidden`: focus moving to a layer outside its\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\">   bounds must not scroll the frame. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artboard-body\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> clip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box-shadow \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">arriving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artboard-body\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">moving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">band\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 153\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">prefers-reduced-motion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reduce\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\">artboard-name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artboard-body\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":544,"lang":2233,"code":2240,"html":2241},"\u003Cscript setup lang=\"ts\">\nimport { computed, inject, ref, useTemplateRef } from 'vue';\nimport { useResizeObserver } from '@vueuse\u002Fcore';\nimport { makeDragArea, makeDroppable, makeSelectionArea, useDnD, useDnDMonitor, type Modifier } from '@vue-dnd-kit\u002Fcore';\nimport Artboard from '.\u002FArtboard.vue';\nimport GuideLines from '.\u002FGuideLines.vue';\nimport SelectionBox from '.\u002FSelectionBox.vue';\nimport Shape from '.\u002FShape.vue';\nimport ToolButton from '.\u002FToolButton.vue';\nimport { EDITOR, MOD, SNAP } from '.\u002Feditor';\nimport { guidesFor, NO_GUIDES, offsetBox, snapBox, type Point } from '.\u002Fgeometry';\nimport { useLayerDrop } from '.\u002FuseLayerDrop';\n\nconst editor = inject(EDITOR)!;\nconst { view, panning } = editor;\nconst { selection, status } = useDnD();\nconst viewport = useTemplateRef\u003CHTMLElement>('viewport');\n\n\u002F\u002F ─── Drags ─────────────────────────────────────────────────────────────────────\n\n\u002F\u002F Smart guides: a modifier of our own. It gets the drag's offset in screen pixels, works out\n\u002F\u002F where the dragged layers would be in the world, and pulls them onto the closest line of\n\u002F\u002F another layer within reach. The overlay, the drop target and the drop all follow it.\nconst smartGuides: Modifier = ({ transform, active }) => {\n  const moving = editor.boundsOf(active.ids);\n  if (!moving) return transform;\n  const { zoom } = view;\n  const box = offsetBox(moving, transform.x \u002F zoom, transform.y \u002F zoom);\n  const targets = editor.snapTargets(active.ids);\n  return {\n    x: transform.x + snapBox(box, targets, 'x', SNAP \u002F zoom) * zoom,\n    y: transform.y + snapBox(box, targets, 'y', SNAP \u002F zoom) * zoom,\n  };\n};\n\n\u002F\u002F The rules for every drag that starts on the canvas, frames and layers alike: the guides.\n\u002F\u002F While the hand tool pans, nothing drags.\nmakeDragArea(viewport, { modifiers: [smartGuides], disabled: panning });\n\n\u002F\u002F The guides drawn: the lines the dragged layers sit on, after the modifiers (`delta`).\nuseDnDMonitor({\n  onDragMove({ active, delta }) {\n    const moving = editor.boundsOf(active.ids);\n    if (!moving) return;\n    const box = offsetBox(moving, delta.x \u002F view.zoom, delta.y \u002F view.zoom);\n    editor.guides.value = guidesFor(box, editor.snapTargets(active.ids));\n  },\n  onDragEnd: () => (editor.guides.value = NO_GUIDES),\n  onDragCancel: () => (editor.guides.value = NO_GUIDES),\n});\n\n\u002F\u002F The canvas takes the layers and tools dropped outside the frames.\nmakeDroppable(viewport, {\n  id: 'canvas',\n  data: { name: 'Canvas' },\n  accept: ['layer', 'frame'],\n  overDropAnimation: false,\n  onDrop: useLayerDrop(() => null),\n});\n\n\u002F\u002F A band drawn on the empty canvas selects whole frames and loose layers (the frames' own\n\u002F\u002F bands select inside them). Shift adds to the selection.\nconst { isSelecting, style: band } = makeSelectionArea(viewport, {\n  strategy: () => (editor.shiftHeld.value ? 'toggle' : 'select'),\n  disabled: panning,\n});\n\n\u002F\u002F ─── View ──────────────────────────────────────────────────────────────────────\n\nuseResizeObserver(viewport, ([entry]) => editor.setViewport(entry!.contentRect.width, entry!.contentRect.height));\n\nconst pointIn = (event: MouseEvent): Point => {\n  const rect = viewport.value!.getBoundingClientRect();\n  return { x: event.clientX - rect.left, y: event.clientY - rect.top };\n};\n\n\u002F\u002F The wheel pans; with Ctrl or Cmd (a trackpad pinch too) it zooms around the pointer.\n\u002F\u002F Not while a drag runs: the layers it moves were measured at the zoom it started with.\nconst wheel = (event: WheelEvent) => {\n  if (status.value === 'dragging') return;\n  const lines = event.deltaMode === 1 ? 16 : 1;\n  if (event.ctrlKey || event.metaKey) {\n    const step = Math.max(-50, Math.min(50, event.deltaY * lines));\n    editor.zoomBy(Math.exp(-step * 0.008), pointIn(event));\n  } else if (event.shiftKey && !event.deltaX) {\n    editor.panBy(-event.deltaY * lines, 0);\n  } else {\n    editor.panBy(-event.deltaX * lines, -event.deltaY * lines);\n  }\n};\n\n\u002F\u002F Panning: with the hand tool, Space held, or the middle button.\nconst grabbing = ref(false);\nconst pan = (event: PointerEvent) => {\n  event.preventDefault();\n  const element = viewport.value!;\n  element.setPointerCapture(event.pointerId);\n  grabbing.value = true;\n  let last = { x: event.clientX, y: event.clientY };\n  const move = (next: PointerEvent) => {\n    editor.panBy(next.clientX - last.x, next.clientY - last.y);\n    last = { x: next.clientX, y: next.clientY };\n  };\n  const end = () => {\n    grabbing.value = false;\n    element.removeEventListener('pointermove', move);\n    element.removeEventListener('pointerup', end);\n    element.removeEventListener('pointercancel', end);\n  };\n  element.addEventListener('pointermove', move);\n  element.addEventListener('pointerup', end);\n  element.addEventListener('pointercancel', end);\n};\n\n\u002F\u002F Before anything else sees the press (capture): a pan, or a press on empty space, the\n\u002F\u002F canvas or a frame's, which starts afresh unless Shift adds to the selection.\nconst press = (event: PointerEvent) => {\n  if (panning.value || event.button === 1) return pan(event);\n  if (event.button !== 0 || (event.target as Element).closest('[data-layer]')) return;\n  if (!event.shiftKey) selection.clear();\n};\n\n\u002F\u002F Focus moving to a layer out of view scrolls the canvas to it: that becomes a pan, so the\n\u002F\u002F world stays where the view says it is.\nconst scrolled = () => {\n  const element = viewport.value!;\n  editor.panBy(-element.scrollLeft, -element.scrollTop);\n  element.scrollLeft = 0;\n  element.scrollTop = 0;\n};\n\n\u002F\u002F The world: frames and loose layers, the front one last in the DOM so it paints on top.\nconst shown = computed(() => editor.layers.value.filter((layer) => !layer.hidden).reverse());\nconst percent = computed(() => `${Math.round(view.zoom * 100)}%`);\n\u002F\u002F Dots every 24 units of the world, every 48 when zoomed far out.\nconst dots = computed(() => {\n  const step = (view.zoom \u003C 0.5 ? 48 : 24) * view.zoom;\n  return { backgroundSize: `${step}px ${step}px`, backgroundPosition: `${view.x}px ${view.y}px` };\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"canvas\">\n    \u003Cdiv\n      ref=\"viewport\"\n      class=\"viewport\"\n      :class=\"{ panning, grabbing }\"\n      :style=\"dots\"\n      tabindex=\"0\"\n      aria-label=\"Canvas\"\n      @pointerdown.capture=\"press\"\n      @wheel.prevent=\"wheel\"\n      @scroll=\"scrolled\"\n    >\n      \u003Cdiv class=\"world\" :style=\"{ transform: `translate(${view.x}px, ${view.y}px)` }\">\n        \u003Ctemplate v-for=\"layer in shown\" :key=\"layer.id\">\n          \u003CArtboard v-if=\"layer.kind === 'frame'\" :frame=\"layer\" \u002F>\n          \u003CShape v-else :shape=\"layer\" \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002Fdiv>\n      \u003Cdiv v-if=\"isSelecting\" class=\"band\" :style=\"band\" \u002F>\n    \u003C\u002Fdiv>\n\n    \u003CSelectionBox \u002F>\n    \u003CGuideLines \u002F>\n\n    \u003Cdiv class=\"zoom\" role=\"group\" aria-label=\"Zoom\">\n      \u003CToolButton icon=\"minus\" label=\"Zoom out\" :shortcut=\"`${MOD} −`\" tip=\"above\" @click=\"editor.zoomBy(1 \u002F 1.25)\" \u002F>\n      \u003Cbutton type=\"button\" class=\"percent\" aria-label=\"Zoom to 100%\" @click=\"editor.zoomBy(1 \u002F view.zoom)\">\n        {{ percent }}\n      \u003C\u002Fbutton>\n      \u003CToolButton icon=\"plus\" label=\"Zoom in\" :shortcut=\"`${MOD} +`\" tip=\"above\" @click=\"editor.zoomBy(1.25)\" \u002F>\n      \u003CToolButton icon=\"fit\" label=\"Zoom to fit\" shortcut=\"Shift 1\" tip=\"above\" @click=\"editor.fit()\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.canvas {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow: clip;\n}\n\n\u002F* Dots on the canvas, moving and scaling with it, as a design tool draws them. *\u002F\n.viewport {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  background-color: var(--dc-canvas);\n  background-image: radial-gradient(circle, var(--dc-dots) 1px, transparent 1.2px);\n  outline: none;\n  touch-action: none;\n}\n\n.viewport:focus-visible {\n  box-shadow: inset 0 0 0 2px #0d99ff;\n}\n\n.panning {\n  cursor: grab;\n}\n\n.grabbing {\n  cursor: grabbing;\n}\n\n\u002F* Over the hand tool, layers don't take the pointer: a press anywhere pans. *\u002F\n.panning .world {\n  pointer-events: none;\n}\n\n.world {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.band {\n  border: 1px solid #0d99ff;\n  background: rgb(13 153 255 \u002F 0.1);\n}\n\n.zoom {\n  position: absolute;\n  right: 10px;\n  bottom: 10px;\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 3px;\n  border: 1px solid var(--dc-line);\n  border-radius: 10px;\n  background: var(--dc-panel);\n  box-shadow: 0 6px 20px -8px rgb(0 0 0 \u002F 0.35);\n}\n\n.percent {\n  min-width: 46px;\n  height: 30px;\n  padding: 0 4px;\n  border: 0;\n  border-radius: 7px;\n  background: none;\n  color: inherit;\n  font: 500 11px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n}\n\n.percent:hover {\n  background: var(--dc-hover);\n}\n\n.percent:focus-visible {\n  outline: 2px solid #0d99ff;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useResizeObserver \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\"> '@vueuse\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeDragArea\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeDroppable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSelectionArea\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnDMonitor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Modifier \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\"> Artboard \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FArtboard.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> GuideLines \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FGuideLines.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SelectionBox \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FSelectionBox.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Shape \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FShape.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ToolButton \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FToolButton.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\"> EDITOR\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> MOD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SNAP \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\"> '.\u002Feditor'\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\"> guidesFor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> NO_GUIDES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> offsetBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> snapBox\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\"> Point \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\"> '.\u002Fgeometry'\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\"> useLayerDrop \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\"> '.\u002FuseLayerDrop'\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\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> panning \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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> 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:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport \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\">'viewport'\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 ─── Drags ─────────────────────────────────────────────────────────────────────\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 Smart guides: a modifier of our own. It gets the drag's offset in screen pixels, works out\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 the dragged layers would be in the world, and pulls them onto the closest line of\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 another layer within reach. The overlay, the drop target and the drop all follow it.\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\"> smartGuides\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Modifier\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\"> transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> active\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\"> moving \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boundsOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">moving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> transform\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\"> zoom \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\"> view\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\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> offsetBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">moving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\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\"> targets \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">snapTargets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> snapBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'x'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SNAP \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\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\"> zoom\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\">    y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> snapBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targets\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>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SNAP \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\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\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The rules for every drag that starts on the canvas, frames and layers alike: the guides.\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 While the hand tool pans, nothing drags.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeDragArea\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">viewport\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\"> 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\">smartGuides\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> panning \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 guides drawn: the lines the dragged layers sit on, after the modifiers (`delta`).\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">useDnDMonitor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragMove\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> delta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> })\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> moving \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boundsOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">moving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> offsetBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">moving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> delta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> delta\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\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\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">guides\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> guidesFor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">snapTargets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragEnd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">guides\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\"> NO_GUIDES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDragCancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">guides\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\"> NO_GUIDES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The canvas takes the layers and tools dropped outside the frames.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeDroppable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'canvas'\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\">  data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Canvas'\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\">  accept\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\">'layer'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\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\">  overDropAnimation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  onDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useLayerDrop\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:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A band drawn on the empty canvas selects whole frames and loose layers (the frames' own\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 bands select inside them). Shift adds to the selection.\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\"> isSelecting\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> band \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\"> makeSelectionArea\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">viewport\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\">  strategy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftHeld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'toggle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'select'\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\">  disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> panning\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F ─── View ──────────────────────────────────────────────────────────────────────\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">useResizeObserver\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">viewport\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\">entry\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">setViewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">entry\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">contentRect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> entry\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">contentRect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> pointIn\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> MouseEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Point\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\"> rect \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">getBoundingClientRect\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> rect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> rect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The wheel pans; with Ctrl or Cmd (a trackpad pinch too) it zooms around the pointer.\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 Not while a drag runs: the layers it moves were measured at the zoom it started with.\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\"> wheel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> WheelEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dragging'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> lines \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">deltaMode \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\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ctrlKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">metaKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> step \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">deltaY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> lines\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\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">zoomBy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">exp\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">step \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.008\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> pointIn\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">deltaX\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\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">panBy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">deltaY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> lines\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\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\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">panBy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">deltaX \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> lines\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">deltaY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> lines\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Panning: with the hand tool, Space held, or the middle button.\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\"> grabbing \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> pan\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">preventDefault\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> element \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">setPointerCapture\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">pointerId\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\">  grabbing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> last \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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientY \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\"> move\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\">next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">panBy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> last\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> last\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\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\">    last \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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientY \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:#0969DA;--shiki-dark:#7CC4FF\"> end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    grabbing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointermove'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> move\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\">    element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointerup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\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\">    element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointercancel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointermove'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> move\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\">  element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointerup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\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\">  element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointercancel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Before anything else sees the press (capture): a pan, or a press on empty space, 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 canvas or a frame's, which starts afresh unless Shift adds to the selection.\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\"> press\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">panning\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">button \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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> pan\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">button \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:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Element\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\">'[data-layer]'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">clear\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Focus moving to a layer out of view scrolls the canvas to it: that becomes a pan, so 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 world stays where the view says it is.\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\"> scrolled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> element \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">panBy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">scrollLeft\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\">element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">scrollTop\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\">  element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">scrollLeft \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  element\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">scrollTop \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F The world: frames and loose layers, the front one last in the DOM so it paints on top.\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\"> 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:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">layers\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\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">reverse\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\"> percent \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:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">zoom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Dots every 24 units of the world, every 48 when zoomed far out.\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\"> dots \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>\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\"> step \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\">view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 48\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\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:#7C4DCC;--shiki-dark:#C3A6FF\"> backgroundSize\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\">step\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">step\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> backgroundPosition\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\">view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">view\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>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"canvas\"\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>\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\">\"viewport\"\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\">\"viewport\"\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\">\"{ panning, grabbing }\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"dots\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      tabindex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"0\"\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\">\"Canvas\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @pointerdown.capture\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"press\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @wheel.prevent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"wheel\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @scroll\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"scrolled\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"world\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ transform: `translate(${view.x}px, ${view.y}px)` }\"\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\">        <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <Artboard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">frame\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\">layer\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\">          <Shape\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shape\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\">layer\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:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"isSelecting\"\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\">\"band\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"band\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <SelectionBox\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\">    <GuideLines\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"zoom\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"group\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Zoom\"\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\">      <ToolButton\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\">\"minus\"\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\">\"Zoom out\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shortcut\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\">MOD\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\"> tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"above\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">zoomBy\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\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.25\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"percent\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Zoom to 100%\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"editor.zoomBy(1 \u002F view.zoom)\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">        {{ percent }}\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\">      <ToolButton\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\">\"plus\"\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\">\"Zoom in\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shortcut\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\">MOD\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\"> tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"above\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">zoomBy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.25\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <ToolButton\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\">\"fit\"\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\">\"Zoom to fit\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Shift 1\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"above\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">fit\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> clip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Dots on the canvas, moving and scaling with it, as a design tool draws them. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background-image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> radial-gradient\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">circle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-dots\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  touch-action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">panning\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grab\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">grabbing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grabbing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Over the hand tool, layers don't take the pointer: a press anywhere pans. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">panning\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">world\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">world\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">band\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 153\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 20\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.35\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">percent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 46\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 500\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-variant-numeric\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> tabular-nums\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">percent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">percent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2243,"lang":2233,"code":2244,"html":2245},"ColorField.vue","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\n\n\u002F\u002F A colour: the swatch opens the system picker, the hex can be typed.\nconst props = defineProps\u003C{ name: string; value: string }>();\nconst emit = defineEmits\u003C{ change: [value: string] }>();\n\nconst draft = ref\u003Cstring | null>(null);\n\nconst commit = () => {\n  if (draft.value === null) return;\n  const hex = \u002F^#?([0-9a-f]{6})$\u002Fi.exec(draft.value.trim())?.[1];\n  draft.value = null;\n  if (hex && `#${hex.toLowerCase()}` !== props.value) emit('change', `#${hex.toLowerCase()}`);\n};\n\nconst cancel = (event: KeyboardEvent) => {\n  draft.value = null;\n  (event.target as HTMLInputElement).blur();\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"color\">\n    \u003Cinput\n      type=\"color\"\n      class=\"swatch\"\n      :value=\"value\"\n      :aria-label=\"`${name}, picker`\"\n      @input=\"emit('change', ($event.target as HTMLInputElement).value)\"\n    \u002F>\n    \u003Cinput\n      class=\"hex\"\n      :value=\"draft ?? value.slice(1).toUpperCase()\"\n      :aria-label=\"`${name}, hex`\"\n      maxlength=\"7\"\n      spellcheck=\"false\"\n      @focus=\"($event.target as HTMLInputElement).select()\"\n      @input=\"draft = ($event.target as HTMLInputElement).value\"\n      @keydown.enter=\"commit\"\n      @keydown.esc.stop.prevent=\"cancel\"\n      @blur=\"commit\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.color {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 28px;\n  padding: 0 6px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  background: var(--dc-field);\n  transition: border-color 0.12s;\n}\n\n.color:hover {\n  border-color: var(--dc-line);\n}\n\n.color:focus-within {\n  border-color: #0d99ff;\n}\n\n.swatch {\n  flex: none;\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background: none;\n  box-shadow: inset 0 0 0 1px rgb(0 0 0 \u002F 0.12);\n  cursor: pointer;\n  appearance: none;\n}\n\n.swatch::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n.swatch::-webkit-color-swatch {\n  border: 0;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px rgb(0 0 0 \u002F 0.12);\n}\n\n.swatch::-moz-color-swatch {\n  border: 0;\n  border-radius: 4px;\n}\n\n.swatch:focus-visible {\n  outline: 2px solid #0d99ff;\n  outline-offset: 1px;\n}\n\n.hex {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  border: 0;\n  outline: none;\n  background: none;\n  color: inherit;\n  font: 12px\u002F1 ui-monospace, Menlo, Consolas, monospace;\n  text-transform: uppercase;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .color {\n    transition: none;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A colour: the swatch opens the system picker, the hex can be typed.\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\"> 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\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> emit \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineEmits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> change\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\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> draft \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> commit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">draft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> hex \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">^\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\">0-9a-f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]{6})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">$\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">i\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">exec\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">draft\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:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  draft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hex \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\">hex\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:#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\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> emit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'change'\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\">hex\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:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> cancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> KeyboardEvent\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\">  draft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> HTMLInputElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">blur\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"color\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <input\u003C\u002Fspan>\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\">\"color\"\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\">\"swatch\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"value\"\u003C\u002Fspan>\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\">\"`${name}, picker`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"emit('change', ($event.target as HTMLInputElement).value)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">    <input\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\">\"hex\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"draft ?? value.slice(1).toUpperCase()\"\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\">\"`${name}, hex`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      maxlength\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"7\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      spellcheck\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"false\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"($event.target as HTMLInputElement).select()\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"draft = ($event.target as HTMLInputElement).value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @keydown.enter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"commit\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @keydown.esc.stop.prevent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"cancel\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @blur\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"commit\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-field\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> border-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-within\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  appearance\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">-webkit-color-swatch-wrapper\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">-webkit-color-swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">-moz-color-swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> uppercase\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">prefers-reduced-motion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reduce\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\">color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":569,"lang":592,"code":2247,"html":2248},"\u002F** The design: frames and the layers in them, as a tree, the way the layers panel shows it. *\u002F\n\nexport type LayerKind = 'frame' | 'rect' | 'ellipse' | 'text' | 'image';\nexport type Artwork = 'mountains' | 'portrait' | 'dunes';\n\nexport interface Layer {\n  id: string;\n  kind: LayerKind;\n  name: string;\n  \u002F** From the top-left corner of the frame it is in, or of the canvas. *\u002F\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  \u002F** The background, or the colour of a text. Images have none. *\u002F\n  fill: string;\n  \u002F** Corner radius of frames, rectangles and images. *\u002F\n  radius: number;\n  hidden?: boolean;\n  content?: string;\n  fontSize?: number;\n  fontWeight?: number;\n  align?: 'left' | 'center' | 'right';\n  image?: Artwork;\n  \u002F** A frame's layers. The first is in front, as in the layers panel. *\u002F\n  children?: Layer[];\n}\n\n\u002F** What a new layer of each kind looks like. *\u002F\nexport const KINDS: Record\u003CLayerKind, { name: string; width: number; height: number; fill: string }> = {\n  frame: { name: 'Frame', width: 200, height: 280, fill: '#ffffff' },\n  rect: { name: 'Rectangle', width: 120, height: 80, fill: '#d9d9d9' },\n  ellipse: { name: 'Ellipse', width: 88, height: 88, fill: '#d9d9d9' },\n  text: { name: 'Text', width: 120, height: 24, fill: '#1e1e1e' },\n  image: { name: 'Image', width: 160, height: 112, fill: '' },\n};\n\ntype Basics = Pick\u003CLayer, 'id' | 'kind' | 'name' | 'x' | 'y' | 'width' | 'height'>;\n\nconst layer = (props: Basics & Partial\u003CLayer>): Layer => ({ fill: KINDS[props.kind].fill, radius: 0, ...props });\nconst text = (props: Omit\u003CBasics, 'kind'> & Partial\u003CLayer>) =>\n  layer({ kind: 'text', fontSize: 12, fontWeight: 400, align: 'left', ...props });\n\n\u002F** Ids of new layers and copies: never one twice. *\u002F\nlet created = 0;\n\n\u002F** A new layer of `kind` with its top-left corner at `x`, `y`. *\u002F\nexport const createLayer = (kind: LayerKind, name: string, x: number, y: number): Layer => {\n  const { width, height } = KINDS[kind];\n  created++;\n  return layer({\n    id: `${kind}-${created}`,\n    kind,\n    name,\n    x,\n    y,\n    width,\n    height,\n    ...(kind === 'frame' && { children: [] }),\n    ...(kind === 'text' && { content: 'Type something', fontSize: 16, fontWeight: 400, align: 'left' as const }),\n    ...(kind === 'image' && { image: 'mountains' as const, radius: 8 }),\n  });\n};\n\n\u002F** A copy with new ids, its frame's layers too. *\u002F\nexport const copyLayer = (source: Layer): Layer => {\n  created++;\n  return { ...source, id: `${source.id}-copy-${created}`, children: source.children?.map(copyLayer) };\n};\n\n\u002F** Two screens of an app and two loose layers, front first. *\u002F\nexport const createDesign = (): Layer[] => [\n  layer({ id: 'badge', kind: 'ellipse', name: 'Badge', x: 492, y: 150, width: 56, height: 56, fill: '#f43f5e' }),\n  layer({ id: 'photo', kind: 'image', name: 'Photo', x: 480, y: 24, width: 136, height: 100, radius: 10, image: 'dunes' }),\n  layer({\n    id: 'profile',\n    kind: 'frame',\n    name: 'Profile',\n    x: 240,\n    y: 0,\n    width: 200,\n    height: 340,\n    fill: '#f1f5f9',\n    radius: 16,\n    children: [\n      text({ id: 'follow-label', name: 'Follow label', x: 16, y: 276, width: 168, height: 40, content: 'Follow', fill: '#ffffff', fontSize: 13, fontWeight: 600, align: 'center' }),\n      layer({ id: 'follow', kind: 'rect', name: 'Follow button', x: 16, y: 276, width: 168, height: 40, fill: '#0d99ff', radius: 20 }),\n      text({ id: 'stats', name: 'Stats', x: 16, y: 196, width: 168, height: 60, content: '24 trips · 118 places', fill: '#334155', fontWeight: 600, align: 'center' }),\n      layer({ id: 'card', kind: 'rect', name: 'Stats card', x: 16, y: 196, width: 168, height: 60, fill: '#ffffff', radius: 12 }),\n      text({ id: 'role', name: 'Role', x: 12, y: 160, width: 176, height: 18, content: 'Travel photographer', fill: '#64748b', fontSize: 11, align: 'center' }),\n      text({ id: 'name', name: 'Name', x: 12, y: 134, width: 176, height: 24, content: 'Maya Lindqvist', fill: '#0f172a', fontSize: 16, fontWeight: 700, align: 'center' }),\n      layer({ id: 'avatar', kind: 'image', name: 'Avatar', x: 64, y: 52, width: 72, height: 72, radius: 36, image: 'portrait' }),\n      layer({ id: 'cover', kind: 'rect', name: 'Cover', x: 0, y: 0, width: 200, height: 92, fill: '#6366f1' }),\n    ],\n  }),\n  layer({\n    id: 'welcome',\n    kind: 'frame',\n    name: 'Welcome',\n    x: 0,\n    y: 0,\n    width: 200,\n    height: 380,\n    radius: 16,\n    children: [\n      text({ id: 'start-label', name: 'Button label', x: 16, y: 316, width: 168, height: 44, content: 'Get started', fill: '#ffffff', fontSize: 13, fontWeight: 600, align: 'center' }),\n      layer({ id: 'start', kind: 'rect', name: 'Button', x: 16, y: 316, width: 168, height: 44, fill: '#0f172a', radius: 12 }),\n      layer({ id: 'dot-3', kind: 'ellipse', name: 'Dot 3', x: 112, y: 280, width: 8, height: 8, fill: '#cbd5e1' }),\n      layer({ id: 'dot-2', kind: 'ellipse', name: 'Dot 2', x: 96, y: 280, width: 8, height: 8, fill: '#cbd5e1' }),\n      layer({ id: 'dot-1', kind: 'ellipse', name: 'Dot 1', x: 80, y: 280, width: 8, height: 8, fill: '#0d99ff' }),\n      text({ id: 'body', name: 'Body', x: 16, y: 220, width: 168, height: 36, content: 'Save places, plan the days and share the route.', fill: '#64748b', fontSize: 11 }),\n      text({ id: 'title', name: 'Title', x: 16, y: 188, width: 168, height: 28, content: 'Find your next trip', fill: '#0f172a', fontSize: 18, fontWeight: 700 }),\n      layer({ id: 'hero', kind: 'image', name: 'Hero', x: 12, y: 12, width: 176, height: 160, radius: 12, image: 'mountains' }),\n    ],\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:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** The design: frames and the layers in them, as a tree, the way the layers panel shows it. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> LayerKind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'rect'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'text'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'image'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Artwork\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'mountains'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'portrait'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dunes'\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\"> Layer\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\">  kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> LayerKind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** From the top-left corner of the frame it is in, or of the canvas. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  height\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:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** The background, or the colour of a text. Images have none. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Corner radius of frames, rectangles and images. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  content\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\">  fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'left'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'right'\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\">  image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Artwork\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** A frame's layers. The first is in front, as in the layers panel. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  children\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** What a new layer of each kind looks like. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> KINDS\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\">LayerKind\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\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Frame'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 280\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#ffffff'\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\">  rect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Rectangle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 120\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 80\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#d9d9d9'\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\">  ellipse\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 88\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 88\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#d9d9d9'\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\">  text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Text'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 120\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#1e1e1e'\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\">  image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Image'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 160\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 112\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Basics\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Pick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Layer\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:#9A6700;--shiki-dark:#E9C46A\"> 'kind'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'name'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'x'\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>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'width'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'height'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> layer\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\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Basics\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Partial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> KINDS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">].\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> radius\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:#27272A;--shiki-dark:#E4E4E7\">props \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\"> text\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\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Omit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Basics\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'kind'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Partial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'text'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 400\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'left'\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\">props \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** Ids of new layers and copies: never one twice. *\u002F\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\"> created \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** A new layer of `kind` with its top-left corner at `x`, `y`. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> createLayer\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\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> LayerKind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\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\"> Layer\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:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height \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\"> KINDS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\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\">  created\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:#0969DA;--shiki-dark:#7CC4FF\"> layer\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\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">created\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:#27272A;--shiki-dark:#E4E4E7\">    kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    x\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\">    y\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\">    width\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\">    height\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:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\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\"> children\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:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'text'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Type something'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 400\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'left'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ...(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'image'\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\"> image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'mountains'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** A copy with new ids, its frame's layers too. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> copyLayer\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\">source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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\">  created\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:#5B5B63;--shiki-dark:#9F9FA9\"> ...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">source\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:#9A6700;--shiki-dark:#E9C46A\">-copy-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">created\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\"> children\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">children\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">copyLayer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** Two screens of an app and two loose layers, front first. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> createDesign\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ():\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'badge'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Badge'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 492\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 150\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 56\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 56\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#f43f5e'\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\">  layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'photo'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'image'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Photo'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 480\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 136\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dunes'\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\">  layer\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\"> 'profile'\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\">    kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\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\">    name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Profile'\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\">    x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 240\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\">    y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 340\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#f1f5f9'\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\">    radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    children\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\">      text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'follow-label'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Follow label'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 276\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Follow'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#ffffff'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'follow'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'rect'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Follow button'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 276\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#0d99ff'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 20\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">      text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'stats'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Stats'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 196\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '24 trips · 118 places'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#334155'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'card'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'rect'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Stats card'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 196\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#ffffff'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">      text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'role'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Role'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 160\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 176\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Travel photographer'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#64748b'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\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\">      text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'name'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Name'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 134\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 176\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Maya Lindqvist'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#0f172a'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'avatar'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'image'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Avatar'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 64\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 52\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 72\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 72\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 36\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'portrait'\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'cover'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'rect'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Cover'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\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:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 92\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#6366f1'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  layer\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\"> 'welcome'\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\">    kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\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\">    name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Welcome'\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\">    x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 200\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 380\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\">    radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    children\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\">      text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'start-label'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Button label'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 316\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 44\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Get started'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#ffffff'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'start'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'rect'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Button'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 316\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 44\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#0f172a'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dot-3'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Dot 3'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 112\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 280\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#cbd5e1'\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dot-2'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Dot 2'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 96\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 280\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#cbd5e1'\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dot-1'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Dot 1'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 80\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 280\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#0d99ff'\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\">      text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'body'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Body'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 220\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 36\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Save places, plan the days and share the route.'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#64748b'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">      text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'title'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Title'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 188\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 168\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Find your next trip'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#0f172a'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'hero'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'image'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Hero'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 176\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 160\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'mountains'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2250,"lang":2233,"code":2251,"html":2252},"DesignCanvas.vue","\u003Cscript setup lang=\"ts\">\nimport { provide, ref } from 'vue';\nimport { useEventListener } from '@vueuse\u002Fcore';\nimport { useDnD } from '@vue-dnd-kit\u002Fcore';\nimport Canvas from '.\u002FCanvas.vue';\nimport Inspector from '.\u002FInspector.vue';\nimport LayersPanel from '.\u002FLayersPanel.vue';\nimport Toolbar from '.\u002FToolbar.vue';\nimport type { LayerKind } from '.\u002Fdesign';\nimport { EDITOR, createEditor } from '.\u002Feditor';\n\n\u002F\u002F The editor works with the provider's selection: what clicks and bands select is what a\n\u002F\u002F drag moves.\nconst { selection, status } = useDnD();\nconst editor = createEditor(selection);\nprovide(EDITOR, editor);\n\n\u002F** Where both panels don't fit next to the canvas, they share a column with tabs; on a phone, a drawer. *\u002F\nconst tab = ref\u003C'layers' | 'design'>('layers');\nconst drawer = ref(false);\n\nconst INSERTS: Record\u003Cstring, LayerKind> = { f: 'frame', r: 'rect', o: 'ellipse', t: 'text', i: 'image' };\nconst ARROWS: Record\u003Cstring, [number, number]> = {\n  ArrowLeft: [-1, 0],\n  ArrowRight: [1, 0],\n  ArrowUp: [0, -1],\n  ArrowDown: [0, 1],\n};\n\nconst typing = (target: EventTarget | null) =>\n  target instanceof HTMLElement && (target.isContentEditable || \u002F^(INPUT|TEXTAREA|SELECT)$\u002F.test(target.tagName));\n\n\u002F\u002F Shortcuts, while the focus is in the editor. A keyboard drag takes its keys (Enter, the\n\u002F\u002F arrows, Escape) before they get here.\nconst keydown = (event: KeyboardEvent) => {\n  if (typing(event.target) || status.value === 'dragging') return;\n  const mod = event.ctrlKey || event.metaKey;\n  const key = event.key.toLowerCase();\n  const run = (action: () => void) => {\n    event.preventDefault();\n    action();\n  };\n\n  \u002F\u002F Space is the hand for as long as it is held; on a button it stays a click.\n  if (key === ' ') {\n    if (!(event.target as Element).closest('button')) run(() => (editor.spaceHeld.value = true));\n  } else if (mod) {\n    if (key === 'z') run(event.shiftKey ? editor.redo : editor.undo);\n    else if (key === 'y') run(editor.redo);\n    else if (key === 'd') run(editor.duplicate);\n    else if (key === 'a') run(editor.selectAll);\n    else if (key === '=' || key === '+') run(() => editor.zoomBy(1.25));\n    else if (key === '-') run(() => editor.zoomBy(1 \u002F 1.25));\n    else if (key === '0') run(() => editor.zoomBy(1 \u002F editor.view.zoom));\n  } else if (event.altKey) {\n    return;\n  } else if (ARROWS[event.key] && editor.selected.value.length) {\n    const [x, y] = ARROWS[event.key]!;\n    const step = event.shiftKey ? 10 : 1;\n    run(() => editor.nudge(x * step, y * step));\n  } else if (event.shiftKey && event.code === 'Digit1') {\n    run(editor.fit);\n  } else if (key === 'delete' || key === 'backspace') {\n    run(editor.remove);\n  } else if (key === 'escape' && (drawer.value || selection.ids.size)) {\n    \u002F\u002F Handled here, so the page around (a dialog, a full-screen view) doesn't close as well.\n    run(() => (drawer.value ? (drawer.value = false) : selection.clear()));\n  } else if (key === 'v' || key === 'h') {\n    run(() => (editor.tool.value = key === 'v' ? 'move' : 'hand'));\n  } else if (INSERTS[key]) {\n    run(() => editor.add(INSERTS[key]!, editor.center()));\n  }\n};\n\nuseEventListener(window, 'keyup', (event: KeyboardEvent) => {\n  if (event.key === ' ') editor.spaceHeld.value = false;\n});\nuseEventListener(window, 'blur', () => (editor.spaceHeld.value = false));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"editor\" @keydown=\"keydown\">\n    \u003CToolbar :panels-open=\"drawer\" @toggle-panels=\"drawer = !drawer\" \u002F>\n    \u003Cdiv class=\"workspace\">\n      \u003CCanvas class=\"canvas-area\" \u002F>\n      \u003Cdiv class=\"sidebar\" :class=\"{ open: drawer }\">\n        \u003Cdiv class=\"tabs\" role=\"group\" aria-label=\"Panels\">\n          \u003Cbutton type=\"button\" :aria-pressed=\"tab === 'layers'\" @click=\"tab = 'layers'\">Layers\u003C\u002Fbutton>\n          \u003Cbutton type=\"button\" :aria-pressed=\"tab === 'design'\" @click=\"tab = 'design'\">Design\u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n        \u003CLayersPanel class=\"panel layers-panel\" :class=\"{ current: tab === 'layers' }\" \u002F>\n        \u003CInspector class=\"panel design-panel\" :class=\"{ current: tab === 'design' }\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n\u002F*\n * A design tool's chrome is neutral grey with one blue, light or dark with the page: every\n * colour is mixed from the text colour and `Canvas`. The design itself keeps its own colours.\n *\u002F\n.editor {\n  --dc-accent: #0d99ff;\n  --dc-panel: color-mix(in srgb, currentColor 3%, Canvas);\n  --dc-canvas: color-mix(in srgb, currentColor 8%, Canvas);\n  --dc-dots: color-mix(in srgb, currentColor 18%, transparent);\n  --dc-line: color-mix(in srgb, currentColor 11%, transparent);\n  --dc-hover: color-mix(in srgb, currentColor 8%, transparent);\n  --dc-field: color-mix(in srgb, currentColor 5%, transparent);\n  --dc-muted: color-mix(in srgb, currentColor 58%, transparent);\n\n  container: editor \u002F inline-size;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  \u002F* Its height on the page; in a full-screen frame it takes all the room there is. *\u002F\n  height: 31rem;\n  flex: 1;\n  min-height: 0;\n  overflow: clip;\n  border: 1px solid var(--dc-line);\n  border-radius: 12px;\n  background: var(--dc-panel);\n  box-shadow: 0 24px 60px -32px rgb(0 0 0 \u002F 0.45);\n  font-size: 12px;\n  line-height: 1.4;\n}\n\n.workspace {\n  position: relative;\n  display: grid;\n  flex: 1;\n  grid-template-rows: minmax(0, 1fr);\n  grid-template-columns: minmax(0, 1fr);\n  min-height: 0;\n}\n\n.canvas-area {\n  grid-area: 1 \u002F 1;\n}\n\n\u002F* A phone: the panels are a drawer over the canvas, opened from the toolbar. *\u002F\n.sidebar {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  width: min(272px, 88%);\n  border-left: 1px solid var(--dc-line);\n  background: var(--dc-panel);\n  box-shadow: -18px 0 40px -24px rgb(0 0 0 \u002F 0.5);\n  visibility: hidden;\n  transform: translateX(100%);\n  transition:\n    transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),\n    visibility 0.22s;\n}\n\n.sidebar.open {\n  visibility: visible;\n  transform: none;\n}\n\n.tabs {\n  display: flex;\n  flex: none;\n  gap: 2px;\n  margin: 8px 8px 0;\n  padding: 2px;\n  border-radius: 8px;\n  background: var(--dc-field);\n}\n\n.tabs button {\n  flex: 1;\n  height: 26px;\n  border: 0;\n  border-radius: 6px;\n  background: none;\n  color: var(--dc-muted);\n  font: inherit;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n  transition:\n    background-color 0.15s,\n    color 0.15s;\n}\n\n.tabs button:hover {\n  color: inherit;\n}\n\n.tabs button[aria-pressed='true'] {\n  background: Canvas;\n  box-shadow: 0 1px 2px rgb(0 0 0 \u002F 0.12);\n  color: inherit;\n}\n\n.tabs button:focus-visible {\n  outline: 2px solid var(--dc-accent);\n}\n\n.sidebar > .panel {\n  flex: 1;\n}\n\n.sidebar > .panel:not(.current) {\n  display: none;\n}\n\n\u002F* A docs page: the canvas, and the two panels in one column with tabs. *\u002F\n@container editor (min-width: 600px) {\n  .workspace {\n    grid-template-columns: minmax(0, 1fr) 236px;\n  }\n\n  .sidebar {\n    position: static;\n    grid-area: 1 \u002F 2;\n    width: auto;\n    box-shadow: none;\n    visibility: visible;\n    transform: none;\n    transition: none;\n  }\n}\n\n\u002F* Room for everything: layers on the left, properties on the right, as in Figma. *\u002F\n@container editor (min-width: 960px) {\n  .workspace {\n    grid-template-columns: 248px minmax(0, 1fr) 264px;\n  }\n\n  .canvas-area {\n    grid-area: 1 \u002F 2;\n  }\n\n  .sidebar {\n    display: contents;\n  }\n\n  .tabs {\n    display: none;\n  }\n\n  .sidebar > .panel:not(.current) {\n    display: flex;\n  }\n\n  .layers-panel {\n    grid-area: 1 \u002F 1;\n    border-right: 1px solid var(--dc-line);\n  }\n\n  .design-panel {\n    grid-area: 1 \u002F 3;\n    border-left: 1px solid var(--dc-line);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sidebar,\n  .tabs button {\n    transition: none;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> provide\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useEventListener \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\"> '@vueuse\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FCanvas.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Inspector \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FInspector.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> LayersPanel \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FLayersPanel.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Toolbar \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FToolbar.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\"> LayerKind \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\"> '.\u002Fdesign'\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\"> EDITOR\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> createEditor \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\"> '.\u002Feditor'\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 editor works with the provider's selection: what clicks and bands select is what a\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 drag moves.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> 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:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> createEditor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">provide\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\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** Where both panels don't fit next to the canvas, they share a column with tabs; on a phone, a drawer. *\u002F\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\"> tab \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\">'layers'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'design'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'layers'\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\"> drawer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> INSERTS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Record\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> LayerKind\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:#7C4DCC;--shiki-dark:#C3A6FF\"> f\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'rect'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> o\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> t\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'text'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> i\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'image'\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\"> ARROWS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Record\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> number\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\">  ArrowLeft\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\"> 0\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\">  ArrowRight\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\"> 0\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\">  ArrowUp\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  ArrowDown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> typing\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\">target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> EventTarget\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:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">instanceof\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:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">isContentEditable \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> \u002F\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:#9A6700;--shiki-dark:#E9C46A\">INPUT\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">|\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">TEXTAREA\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">|\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">SELECT\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">$\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">test\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tagName\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 Shortcuts, while the focus is in the editor. A keyboard drag takes its keys (Enter, 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 arrows, Escape) before they get here.\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\"> keydown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> KeyboardEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">typing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target\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\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dragging'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> mod \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ctrlKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">metaKey\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\"> key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">key\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\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> run\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\">action\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:#0F766E;--shiki-dark:#7EE0C0\"> void\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">preventDefault\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F Space is the hand for as long as it is held; on a button it stays a click.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ' '\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Element\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\">'button'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">spaceHeld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">mod\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\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'z'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">redo \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">undo\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\">    else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \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>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">redo\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\">    else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'd'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">duplicate\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\">    else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'a'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">selectAll\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\">    else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '='\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '+'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> run\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">zoomBy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.25\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\">    else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '-'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> run\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">zoomBy\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\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.25\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\">    else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \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:#0969DA;--shiki-dark:#7CC4FF\"> run\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">zoomBy\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\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">altKey\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\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ARROWS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y\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\"> ARROWS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\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\"> step \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    run\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">nudge\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> step\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> step\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">code \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Digit1'\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\">    run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'delete'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'backspace'\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\">    run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">remove\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'escape'\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\">drawer\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\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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 Handled here, so the page around (a dialog, a full-screen view) doesn't close as well.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">drawer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">drawer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">clear\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'v'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'h'\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\">    run\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tool\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\"> key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'v'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'move'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'hand'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">INSERTS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">])\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    run\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">add\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">INSERTS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">useEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">window\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'keyup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> KeyboardEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ' '\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">spaceHeld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">useEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">window\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'blur'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">spaceHeld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"editor\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @keydown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"keydown\"\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\">    <Toolbar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">panels-open\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\">drawer\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\">toggle-panels\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\">drawer \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\">drawer\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\">    <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\">\"workspace\"\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\">      <Canvas\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\">\"canvas-area\"\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\">      <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\">\"sidebar\"\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\">\"{ open: drawer }\"\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\">\"tabs\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"group\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Panels\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tab === 'layers'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tab = 'layers'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tab === 'design'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tab = 'design'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Design\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <LayersPanel\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\">\"panel layers-panel\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\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\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> current\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tab \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'layers'\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <Inspector\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\">\"panel design-panel\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\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\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> current\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tab \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'design'\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F*\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> * A design tool's chrome is neutral grey with one blue, light or dark with the page: 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\"> * colour is mixed from the text colour and `Canvas`. The design itself keeps its own colours.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">editor\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\">  --dc-accent\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\">0d99ff\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\">  --dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  --dc-canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  --dc-dots\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  --dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  --dc-hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  --dc-field\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  --dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 58\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor \u002F inline-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F* Its height on the page; in a full-screen frame it takes all the room there is. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 31\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">rem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> clip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 60\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -32\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  line-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">workspace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-rows\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">canvas-area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-area\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:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* A phone: the panels are a drawer over the canvas, opened from the toolbar. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sidebar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  z-index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">272\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 88\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translateX\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    transform \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> cubic-bezier\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    visibility \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sidebar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">open\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tabs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-field\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tabs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 26\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    background-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tabs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tabs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'true'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tabs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-accent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sidebar\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\">panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sidebar\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\">panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">not\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">current\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* A docs page: the canvas, and the two panels in one column with tabs. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor (min-width: 600px) \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\">workspace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 236\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sidebar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> static\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    grid-area\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:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#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* Room for everything: layers on the left, properties on the right, as in Figma. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor (min-width: 960px) \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\">workspace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 248\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> minmax\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 264\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">canvas-area\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    grid-area\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:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sidebar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> contents\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tabs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sidebar\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\">panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">not\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">current\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">layers-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    grid-area\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:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    border-right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">design-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    grid-area\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:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    border-left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">prefers-reduced-motion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reduce\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\">sidebar\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\">tabs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":834,"lang":2233,"code":2254,"html":2255},"\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { DragPreview, type DragItem } from '@vue-dnd-kit\u002Fcore';\nimport type { DragData } from '.\u002Feditor';\n\n\u002F\u002F The overlay of the canvas: the dragged layers as they lie, the grabbed one filling the\n\u002F\u002F overlay box and the others around it where they are. Each DragPreview is the clone of its\n\u002F\u002F layer taken at pickup, so the overlay looks just like the canvas, at its zoom.\nconst props = defineProps\u003C{ items: DragItem[] }>();\n\nconst placed = computed(() => {\n  const grabbed = props.items[0]!.data as DragData;\n  return props.items.map(({ id, data }) => {\n    const { left, top } = data as DragData;\n    return { id, left: `${left - grabbed.left}px`, top: `${top - grabbed.top}px` };\n  });\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"group\">\n    \u003CDragPreview v-for=\"{ id, left, top } in placed\" :id=\"id\" :key=\"id\" class=\"copy\" :style=\"{ left, top }\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.group {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n\u002F* Selected layers keep their blue outline while they move. *\u002F\n.copy {\n  position: absolute;\n  outline: 1px solid #0d99ff;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> DragPreview\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\"> DragItem \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\"> DragData \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\"> '.\u002Feditor'\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 overlay of the canvas: the dragged layers as they lie, the grabbed one filling 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 overlay box and the others around it where they are. Each DragPreview is the clone of its\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 layer taken at pickup, so the overlay looks just like the canvas, at its zoom.\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\"> 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\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> DragItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> placed \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>\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\"> grabbed \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">data \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> DragData\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:#0969DA;--shiki-dark:#7CC4FF\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> id\u003C\u002Fspan>\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:#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:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top \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\"> data \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> DragData\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\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> left\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\">left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> grabbed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> top\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\">top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> grabbed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"group\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <DragPreview\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> placed\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\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\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\">\"copy\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top \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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">group\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Selected layers keep their blue outline while they move. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">copy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":558,"lang":592,"code":2257,"html":2258},"import { computed, reactive, ref, shallowRef, type InjectionKey } from 'vue';\nimport { useKeyModifier } from '@vueuse\u002Fcore';\nimport type { DnDSelection, Key } from '@vue-dnd-kit\u002Fcore';\nimport { copyLayer, createDesign, createLayer, KINDS, type Layer, type LayerKind } from '.\u002Fdesign';\nimport { aligned, distributed, NO_GUIDES, union, type Alignment, type Axis, type Box, type Guides, type Point } from '.\u002Fgeometry';\n\nconst ZOOM = { min: 0.1, max: 8, fit: 1.5 };\n\u002F** Room around the design when it is fitted into the canvas, in screen pixels (less on a phone). *\u002F\nconst FIT_PADDING = 48;\nconst HISTORY = 100;\n\nexport type Tool = 'move' | 'hand';\n\n\u002F** How close an edge or a centre comes to another layer's line before it snaps, in screen pixels. *\u002F\nexport const SNAP = 6;\n\n\u002F** The modifier key the shortcuts are shown with. *\u002F\nexport const MOD = typeof navigator !== 'undefined' && \u002FMac|iPhone|iPad\u002F.test(navigator.userAgent) ? '⌘' : 'Ctrl';\n\n\u002F** The `data` of a layer's draggable: the overlay lays the dragged layers out by `left` and `top`. *\u002F\nexport interface DragData {\n  layer: Layer;\n  left: number;\n  top: number;\n}\n\n\u002F**\n * The editor's state, shared by the toolbar, the canvas and the panels: the design and its\n * history, the view (pan and zoom), the tool, what is hovered and the smart guides. The\n * selection is the provider's: dragging a selected layer drags every selected one, and the\n * rubber band fills it.\n *\u002F\nexport function createEditor(selection: DnDSelection) {\n  const layers = ref\u003CLayer[]>(createDesign());\n\n  \u002F\u002F ─── Lookups ─────────────────────────────────────────────────────────────────\n\n  \u002F** Every layer by id with the frame it is in, in the order of the layers panel. *\u002F\n  const index = computed(() => {\n    const entries = new Map\u003Cstring, { layer: Layer; parent: Layer | null }>();\n    for (const layer of layers.value) {\n      entries.set(layer.id, { layer, parent: null });\n      for (const child of layer.children ?? []) entries.set(child.id, { layer: child, parent: layer });\n    }\n    return entries;\n  });\n\n  const find = (id: Key) => index.value.get(String(id))?.layer;\n  const parentOf = (id: Key) => index.value.get(String(id))?.parent ?? null;\n  \u002F** The layers of `frame`, or of the canvas: front first. *\u002F\n  const childrenOf = (frame: Layer | null) => (frame ? (frame.children ??= []) : layers.value);\n\n  \u002F** Where a layer is on the canvas, in world units: its frame's corner plus its own position. *\u002F\n  const boxOf = (layer: Layer): Box => {\n    const parent = parentOf(layer.id);\n    return { x: layer.x + (parent?.x ?? 0), y: layer.y + (parent?.y ?? 0), width: layer.width, height: layer.height };\n  };\n\n  \u002F** The layers of `ids` whose frame isn't one of them: a frame brings its layers along. *\u002F\n  const topLevel = (ids: Iterable\u003CKey>) => {\n    const wanted = new Set([...ids].map(String));\n    return [...index.value.values()]\n      .filter(({ layer, parent }) => wanted.has(layer.id) && !(parent && wanted.has(parent.id)))\n      .map(({ layer }) => layer);\n  };\n\n  const visible = computed(() => [...index.value.values()].filter(({ layer, parent }) => !layer.hidden && !parent?.hidden));\n\n  \u002F** The box around the layers of `ids`; `null` when none is a layer (a tool from the toolbar). *\u002F\n  const boundsOf = (ids: Key[]) => union(topLevel(ids).map(boxOf));\n\n  \u002F** What the dragged layers line up with: every other visible layer, frames included. *\u002F\n  const snapTargets = (ids: Key[]) => {\n    const moving = new Set(ids.map(String));\n    return visible.value\n      .filter(({ layer, parent }) => !moving.has(layer.id) && !(parent && moving.has(parent.id)))\n      .map(({ layer }) => boxOf(layer));\n  };\n\n  \u002F\u002F ─── Selection ───────────────────────────────────────────────────────────────\n\n  const selected = computed(() => topLevel(selection.ids));\n\n  \u002F**\n   * A click picks one layer; with Shift it is added or taken out. A frame and a layer in it\n   * are never selected together: dragged, the layer would move twice.\n   *\u002F\n  const select = (id: string, additive = false) => {\n    if (!additive) return selection.set([id]);\n    if (selection.has(id)) return selection.delete(id);\n    const related = [parentOf(id), ...(find(id)?.children ?? [])].flatMap((layer) => (layer ? [layer.id] : []));\n    selection.delete(...related);\n    selection.add(id);\n  };\n\n  const selectAll = () => selection.set(layers.value.filter((layer) => !layer.hidden).map((layer) => layer.id));\n\n  \u002F\u002F ─── History ─────────────────────────────────────────────────────────────────\n\n  \u002F** The design before each change, as JSON, and the changes undone. *\u002F\n  const past = shallowRef\u003Cstring[]>([]);\n  const future = shallowRef\u003Cstring[]>([]);\n  let lastKey: string | null = null;\n\n  \u002F**\n   * Saves the design before a change: one undo step. Changes with the same `key` in a row\n   * (one field typed into, one handle dragged) make a single step.\n   *\u002F\n  const record = (key: string | null = null) => {\n    if (key !== null && key === lastKey) return;\n    lastKey = key;\n    past.value = [...past.value.slice(1 - HISTORY), JSON.stringify(layers.value)];\n    future.value = [];\n  };\n\n  const restore = (snapshot: string) => {\n    layers.value = JSON.parse(snapshot);\n    lastKey = null;\n    \u002F\u002F Layers that the restored design doesn't have can't stay selected.\n    selection.set([...selection.ids].filter((id) => index.value.has(String(id))));\n  };\n\n  const undo = () => {\n    const snapshot = past.value.at(-1);\n    if (snapshot === undefined) return;\n    future.value = [...future.value, JSON.stringify(layers.value)];\n    past.value = past.value.slice(0, -1);\n    restore(snapshot);\n  };\n\n  const redo = () => {\n    const snapshot = future.value.at(-1);\n    if (snapshot === undefined) return;\n    past.value = [...past.value, JSON.stringify(layers.value)];\n    future.value = future.value.slice(0, -1);\n    restore(snapshot);\n  };\n\n  \u002F\u002F ─── Changes ─────────────────────────────────────────────────────────────────\n\n  const detach = (layer: Layer) => {\n    const siblings = childrenOf(parentOf(layer.id));\n    siblings.splice(siblings.indexOf(layer), 1);\n  };\n\n  \u002F**\n   * Moves layers by `shift` (world units) into `frame`, or onto the canvas (`null`). A layer\n   * that changes frames goes on top of the layers there; frames stay on the canvas. `copy`\n   * leaves the layers where they are and puts copies there instead, selected.\n   *\u002F\n  const move = (ids: Key[], shift: Point, frame: Layer | null, copy = false) => {\n    record();\n    const arrivals = new Map\u003CLayer | null, Layer[]>();\n    for (const layer of topLevel(ids)) {\n      const box = boxOf(layer);\n      const into = layer.kind === 'frame' ? null : frame;\n      const moved = copy ? copyLayer(layer) : layer;\n      moved.x = Math.round(box.x + shift.x - (into?.x ?? 0));\n      moved.y = Math.round(box.y + shift.y - (into?.y ?? 0));\n      if (!copy && parentOf(layer.id) === into) continue;\n      if (!copy) detach(layer);\n      arrivals.set(into, [...(arrivals.get(into) ?? []), moved]);\n    }\n    for (const [into, arrived] of arrivals) childrenOf(into).unshift(...arrived);\n    if (copy) selection.set([...arrivals.values()].flat().map((layer) => layer.id));\n  };\n\n  \u002F** Adds a layer of `kind` centred on `center` (world units), in `frame` or on the canvas. *\u002F\n  const add = (kind: LayerKind, center: Point, frame: Layer | null = null) => {\n    record();\n    const into = kind === 'frame' ? null : frame;\n    const { name, width, height } = KINDS[kind];\n    const count = [...index.value.values()].filter(({ layer }) => layer.kind === kind).length + 1;\n    const x = Math.round(center.x - width \u002F 2 - (into?.x ?? 0));\n    const y = Math.round(center.y - height \u002F 2 - (into?.y ?? 0));\n    const layer = createLayer(kind, `${name} ${count}`, x, y);\n    childrenOf(into).unshift(layer);\n    selection.set([layer.id]);\n  };\n\n  const remove = () => {\n    const doomed = selected.value;\n    if (!doomed.length) return;\n    record();\n    doomed.forEach(detach);\n    selection.clear();\n  };\n\n  \u002F** Copies of the selected layers, a little down and to the right, just in front of them. *\u002F\n  const duplicate = () => {\n    const sources = selected.value;\n    if (!sources.length) return;\n    record();\n    const copies = sources.map((source) => {\n      const copy = { ...copyLayer(source), x: source.x + 16, y: source.y + 16 };\n      const siblings = childrenOf(parentOf(source.id));\n      siblings.splice(siblings.indexOf(source), 0, copy);\n      return copy;\n    });\n    selection.set(copies.map((copy) => copy.id));\n  };\n\n  \u002F** Moves the selection with the arrow keys; pressing them in a row is one undo step. *\u002F\n  const nudge = (x: number, y: number) => {\n    if (!selected.value.length) return;\n    record(`nudge:${[...selection.ids].join()}`);\n    for (const layer of selected.value) {\n      layer.x += x;\n      layer.y += y;\n    }\n  };\n\n  \u002F** Edits of a layer: edits of one field in a row are one undo step, as are those with the same `key`. *\u002F\n  const update = (layer: Layer, patch: Partial\u003CLayer>, key = `${Object.keys(patch).join()}:${layer.id}`) => {\n    record(key);\n    Object.assign(layer, patch);\n  };\n\n  const rename = (layer: Layer, name: string) => {\n    record();\n    layer.name = name;\n  };\n\n  const setHidden = (layer: Layer, hidden: boolean) => {\n    record();\n    layer.hidden = hidden;\n    \u002F\u002F A hidden layer isn't on the canvas: nothing to select or drag.\n    if (hidden) selection.delete(layer.id, ...(layer.children ?? []).map((child) => child.id));\n  };\n\n  \u002F** Several layers line up with each other; one layer lines up with its frame. *\u002F\n  const align = (alignment: Alignment) => {\n    const targets = selected.value;\n    const frame = targets.length === 1 ? parentOf(targets[0]!.id) : null;\n    const bounds = frame ? boxOf(frame) : targets.length > 1 ? union(targets.map(boxOf)) : null;\n    if (!bounds) return;\n    record();\n    for (const layer of targets) {\n      const box = boxOf(layer);\n      const to = aligned(box, bounds, alignment);\n      layer.x += Math.round(to.x - box.x);\n      layer.y += Math.round(to.y - box.y);\n    }\n  };\n\n  \u002F** Equal space between three or more layers, the outer ones staying where they are. *\u002F\n  const distribute = (axis: Axis) => {\n    const targets = selected.value;\n    if (targets.length \u003C 3) return;\n    record();\n    const boxes = targets.map(boxOf);\n    distributed(boxes, axis).forEach((start, index) => (targets[index]![axis] += Math.round(start - boxes[index]![axis])));\n  };\n\n  \u002F\u002F ─── View ────────────────────────────────────────────────────────────────────\n\n  \u002F** Pan and zoom: a point of the world is drawn at `x + point × zoom` in the canvas. *\u002F\n  const view = reactive({ x: 0, y: 0, zoom: 1 });\n  const viewport = { width: 0, height: 0 };\n  \u002F** Until the view is panned or zoomed, the design is fitted again when the canvas resizes. *\u002F\n  let fitted = true;\n\n  const fit = () => {\n    const bounds = union(visible.value.filter(({ parent }) => !parent).map(({ layer }) => boxOf(layer)));\n    if (!bounds || !viewport.width) return;\n    const padding = Math.min(FIT_PADDING, viewport.width * 0.08);\n    const room = { width: viewport.width - 2 * padding, height: viewport.height - 2 * padding };\n    const zoom = Math.max(ZOOM.min, Math.min(room.width \u002F bounds.width, room.height \u002F bounds.height, ZOOM.fit));\n    view.zoom = zoom;\n    view.x = Math.round((viewport.width - bounds.width * zoom) \u002F 2 - bounds.x * zoom);\n    view.y = Math.round((viewport.height - bounds.height * zoom) \u002F 2 - bounds.y * zoom);\n    fitted = true;\n  };\n\n  const setViewport = (width: number, height: number) => {\n    Object.assign(viewport, { width, height });\n    if (fitted) fit();\n  };\n\n  const panBy = (x: number, y: number) => {\n    view.x += x;\n    view.y += y;\n    fitted = false;\n  };\n\n  \u002F** Zooms by `factor` around a point of the canvas (its centre by default), which stays put. *\u002F\n  const zoomBy = (factor: number, around: Point = { x: viewport.width \u002F 2, y: viewport.height \u002F 2 }) => {\n    const zoom = Math.min(ZOOM.max, Math.max(ZOOM.min, view.zoom * factor));\n    view.x = around.x - ((around.x - view.x) * zoom) \u002F view.zoom;\n    view.y = around.y - ((around.y - view.y) * zoom) \u002F view.zoom;\n    view.zoom = zoom;\n    fitted = false;\n  };\n\n  \u002F** What a dragged layer carries: itself, and where it is drawn in the world, in screen pixels. *\u002F\n  const dragData = (layer: Layer): DragData => {\n    const box = boxOf(layer);\n    return { layer, left: box.x * view.zoom, top: box.y * view.zoom };\n  };\n\n  \u002F** The centre of the canvas, in world units: where a clicked tool adds its layer. *\u002F\n  const center = (): Point => ({\n    x: (viewport.width \u002F 2 - view.x) \u002F view.zoom,\n    y: (viewport.height \u002F 2 - view.y) \u002F view.zoom,\n  });\n\n  \u002F\u002F ─── Tools and transient state ───────────────────────────────────────────────\n\n  const tool = ref\u003CTool>('move');\n  \u002F** Space held: the hand tool for as long as it is. *\u002F\n  const spaceHeld = ref(false);\n  const panning = computed(() => tool.value === 'hand' || spaceHeld.value);\n  \u002F** Alt held while a drag drops: copies land, the layers stay. *\u002F\n  const altHeld = useKeyModifier('Alt', { initial: false });\n  \u002F** Shift held when a band starts: it adds to the selection. *\u002F\n  const shiftHeld = useKeyModifier('Shift', { initial: false });\n  const hovered = ref\u003Cstring | null>(null);\n  const guides = shallowRef\u003CGuides>(NO_GUIDES);\n\n  return {\n    layers,\n    find,\n    parentOf,\n    boxOf,\n    dragData,\n    boundsOf,\n    snapTargets,\n    selected,\n    select,\n    selectAll,\n    record,\n    undo,\n    redo,\n    canUndo: computed(() => past.value.length > 0),\n    canRedo: computed(() => future.value.length > 0),\n    move,\n    add,\n    remove,\n    duplicate,\n    nudge,\n    update,\n    rename,\n    setHidden,\n    align,\n    distribute,\n    view,\n    fit,\n    setViewport,\n    panBy,\n    zoomBy,\n    center,\n    tool,\n    spaceHeld,\n    panning,\n    altHeld,\n    shiftHeld,\n    hovered,\n    guides,\n  };\n}\n\nexport type Editor = ReturnType\u003Ctypeof createEditor>;\n\nexport const EDITOR: InjectionKey\u003CEditor> = Symbol('editor');","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shallowRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> InjectionKey \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\"> useKeyModifier \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\"> '@vueuse\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\"> DnDSelection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> copyLayer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> createDesign\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> createLayer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> KINDS\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\"> Layer\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\"> LayerKind \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\"> '.\u002Fdesign'\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\"> aligned\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> distributed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> NO_GUIDES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> union\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\"> Alignment\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\"> Axis\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\"> Box\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\"> Guides\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\"> Point \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\"> '.\u002Fgeometry'\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\"> ZOOM \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\"> min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> max\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:#7C4DCC;--shiki-dark:#C3A6FF\"> fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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** Room around the design when it is fitted into the canvas, in screen pixels (less on a phone). *\u002F\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\"> FIT_PADDING \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 48\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> HISTORY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'move'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'hand'\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** How close an edge or a centre comes to another layer's line before it snaps, in screen pixels. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SNAP \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** The modifier key the shortcuts are shown with. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> MOD \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> typeof\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> navigator \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'undefined'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> \u002FMac\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">|\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">iPhone\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">|\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">iPad\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">test\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">navigator\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">userAgent\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\"> 'Ctrl'\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** The `data` of a layer's draggable: the overlay lays the dragged layers out by `left` and `top`. *\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\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> DragData\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\">  layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F**\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 editor's state, shared by the toolbar, the canvas and the panels: the design and its\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\"> * history, the view (pan and zoom), the tool, what is hovered and the smart guides. 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\"> * selection is the provider's: dragging a selected layer drags every selected one, and 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\"> * rubber band fills it.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> createEditor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> DnDSelection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layers \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">createDesign\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 ─── Lookups ─────────────────────────────────────────────────────────────────\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** Every layer by id with the frame it is in, in the order of the layers panel. *\u002F\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\"> index \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>\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\"> entries \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">      entries\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> child \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">children \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\"> entries\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer \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:#27272A;--shiki-dark:#E4E4E7\"> entries\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> find\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Key\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\"> index\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\">get\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:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\"> parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Key\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\"> index\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\">get\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:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parent \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** The layers of `frame`, or of the canvas: front first. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> childrenOf\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\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame \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\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">children \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:#27272A;--shiki-dark:#E4E4E7\"> layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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** Where a layer is on the canvas, in world units: its frame's corner plus its own position. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> boxOf\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\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\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\"> parent \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \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\">parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** The layers of `ids` whose frame isn't one of them: a frame brings its layers along. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> topLevel\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\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Iterable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> wanted \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">].\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">String\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">index\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\">values\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:#0969DA;--shiki-dark:#7CC4FF\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> parent\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\"> wanted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parent \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> wanted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parent\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:#5B5B63;--shiki-dark:#9F9FA9\">      .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> layer\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\"> layer\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\"> visible \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\">index\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\">values\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()].\u003C\u002Fspan>\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:#7C4DCC;--shiki-dark:#C3A6FF\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> })\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hidden \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\">parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hidden\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** The box around the layers of `ids`; `null` when none is a layer (a tool from the toolbar). *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> boundsOf\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\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[])\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> union\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">topLevel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">boxOf\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** What the dragged layers line up with: every other visible layer, frames included. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> snapTargets\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\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[])\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> moving \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">String\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      .\u003C\u002Fspan>\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:#7C4DCC;--shiki-dark:#C3A6FF\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> parent\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\">moving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parent \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> moving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parent\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:#5B5B63;--shiki-dark:#9F9FA9\">      .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> layer\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\"> boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F ─── Selection ───────────────────────────────────────────────────────────────\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\"> selected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> topLevel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">   * A click picks one layer; with Shift it is added or taken out. A frame and a layer in it\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\">   * are never selected together: dragged, the layer would move twice.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">   *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> additive\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:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">additive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\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:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">delete\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\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\"> related \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\">parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ...(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">find\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">children \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\">flatMap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer \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\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> []));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">delete\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">related\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\">    selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">add\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:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selectAll\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\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">layers\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\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">layer\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\"> layer\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\">\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 ─── History ─────────────────────────────────────────────────────────────────\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** The design before each change, as JSON, and the changes undone. *\u002F\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\"> past \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:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]>([]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> future \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:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]>([]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> lastKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F**\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">   * Saves the design before a change: one undo step. Changes with the same `key` in a row\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\">   * (one field typed into, one handle dragged) make a single step.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">   *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> record\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\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key \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:#27272A;--shiki-dark:#E4E4E7\"> key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> lastKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    lastKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    past\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">past\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\">slice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> HISTORY\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> JSON\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">stringify\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    future\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> restore\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\">snapshot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> JSON\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">parse\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">snapshot\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\">    lastKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    \u002F\u002F Layers that the restored design doesn't have can't stay selected.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">].\u003C\u002Fspan>\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:#7C4DCC;--shiki-dark:#C3A6FF\">id\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\"> index\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\">has\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:#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:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> undo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> snapshot \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> past\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\">at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">snapshot \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    future\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">future\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> JSON\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">stringify\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    past\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> past\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\">slice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    restore\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">snapshot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> redo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> snapshot \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> future\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\">at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">snapshot \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    past\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">past\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> JSON\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">stringify\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    future\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> future\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\">slice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    restore\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">snapshot\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F ─── Changes ─────────────────────────────────────────────────────────────────\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> detach\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\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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\"> siblings \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> childrenOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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:#0969DA;--shiki-dark:#7CC4FF\">    siblings\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">splice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">siblings\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">indexOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F**\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\">   * Moves layers by `shift` (world units) into `frame`, or onto the canvas (`null`). A layer\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\">   * that changes frames goes on top of the layers there; frames stay on the canvas. `copy`\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\">   * leaves the layers where they are and puts copies there instead, selected.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">   *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> move\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\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shift\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Point\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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:#7C4DCC;--shiki-dark:#C3A6FF\"> copy\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:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\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\"> arrivals \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Layer\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:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> topLevel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\"> into \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\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:#27272A;--shiki-dark:#E4E4E7\"> frame\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\"> moved \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> copy \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> copyLayer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\"> layer\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\">      moved\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shift\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \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\">into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      moved\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shift\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">copy \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> continue\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">copy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> detach\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\">      arrivals\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">into\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\">arrivals\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">into\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:#27272A;--shiki-dark:#E4E4E7\"> moved\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\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> arrived\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> arrivals\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> childrenOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">unshift\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">arrived\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">copy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">arrivals\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">values\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()].\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">flat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">().\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">layer\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\"> layer\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:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Adds a layer of `kind` centred on `center` (world units), in `frame` or on the canvas. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> add\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\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> LayerKind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Point\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\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\"> into \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\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:#27272A;--shiki-dark:#E4E4E7\"> frame\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\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height \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\"> KINDS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\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\"> 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:#0969DA;--shiki-dark:#7CC4FF\">index\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\">values\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()].\u003C\u002Fspan>\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:#7C4DCC;--shiki-dark:#C3A6FF\"> layer\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\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\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:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\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:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> createLayer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\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\">name\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\">count\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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y\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\">    childrenOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">unshift\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\">    selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> remove\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> doomed \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">doomed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\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\">    doomed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">forEach\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">detach\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\">    selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">clear\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Copies of the selected layers, a little down and to the right, just in front of them. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> duplicate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> sources \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">sources\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\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\"> copies \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> sources\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">source\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\"> copy \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:#0969DA;--shiki-dark:#7CC4FF\">copyLayer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> siblings \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> childrenOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">source\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:#0969DA;--shiki-dark:#7CC4FF\">      siblings\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">splice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">siblings\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">indexOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">source\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> copy\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\"> copy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">copies\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">copy\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\"> copy\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:#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** Moves the selection with the arrow keys; pressing them in a row is one undo step. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> nudge\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\">x\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\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:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">selected\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\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`nudge:\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\">selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">ids\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">].\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">join\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> x\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Edits of a layer: edits of one field in a row are one undo step, as are those with the same `key`. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> update\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\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> patch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Partial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Object\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">patch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">join\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\">layer\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:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    Object\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">assign\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> patch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rename\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\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\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\">    layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">name \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> setHidden\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\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\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\">    layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hidden \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    \u002F\u002F A hidden layer isn't on the canvas: nothing to select or drag.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">delete\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ...(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">children \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\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">child\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\"> child\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:#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** Several layers line up with each other; one layer lines up with its frame. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> align\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\">alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Alignment\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\"> targets \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> frame \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">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:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> frame \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\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\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> union\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">boxOf\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\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\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\"> to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> aligned\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> alignment\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Equal space between three or more layers, the outer ones staying where they are. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> distribute\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\">axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Axis\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\"> targets \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    record\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\"> boxes \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">boxOf\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\">    distributed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">forEach\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">start\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>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]![\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">start \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]![\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">])));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F ─── View ────────────────────────────────────────────────────────────────────\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** Pan and zoom: a point of the world is drawn at `x + point × zoom` in the canvas. *\u002F\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\"> view \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> reactive\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\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:#7C4DCC;--shiki-dark:#C3A6FF\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport \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\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Until the view is panned or zoomed, the design is fitted again when the canvas resizes. *\u002F\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\"> fitted \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> union\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">visible\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\">filter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> })\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> layer\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\"> boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">bounds \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\">viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> padding \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">FIT_PADDING\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.08\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\"> room \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\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \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:#27272A;--shiki-dark:#E4E4E7\"> padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \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:#27272A;--shiki-dark:#E4E4E7\"> padding \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\"> zoom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ZOOM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">room\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> room\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ZOOM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fit\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\">    view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\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\">    view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\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:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\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\">    view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\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:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\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\">    fitted \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> setViewport\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\">width\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:#7C4DCC;--shiki-dark:#C3A6FF\"> height\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:#0969DA;--shiki-dark:#7CC4FF\">    Object\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">assign\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">viewport\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\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fitted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> panBy\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\">x\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\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\">    view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> x\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\">    view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y\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\">    fitted \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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** Zooms by `factor` around a point of the canvas (its centre by default), which stays put. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> zoomBy\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\">factor\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:#7C4DCC;--shiki-dark:#C3A6FF\"> around\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Point\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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\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:#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\"> zoom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ZOOM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ZOOM\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> factor\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\">    view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> around\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \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\">around\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\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\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\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\">    view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> around\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">around\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\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\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\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\">    view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom\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\">    fitted \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** What a dragged layer carries: itself, and where it is drawn in the world, in screen pixels. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> dragData\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\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> DragData\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\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** The centre of the canvas, in world units: where a clicked tool adds its layer. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ():\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Point\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\">    x\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\">viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\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:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\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\">    y\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\">viewport\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\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:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F\u002F ─── Tools and transient state ───────────────────────────────────────────────\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\"> tool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'move'\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** Space held: the hand tool for as long as it is. *\u002F\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\"> spaceHeld \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> panning \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'hand'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> spaceHeld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Alt held while a drag drops: copies land, the layers stay. *\u002F\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\"> altHeld \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useKeyModifier\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'Alt'\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\"> initial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F** Shift held when a band starts: it adds to the selection. *\u002F\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\"> shiftHeld \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useKeyModifier\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'Shift'\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\"> initial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> hovered \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> guides \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:#0F766E;--shiki-dark:#7EE0C0\">Guides\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">NO_GUIDES\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\">  return\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\">    layers\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\">    find\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\">    parentOf\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\">    boxOf\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\">    dragData\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\">    boundsOf\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\">    snapTargets\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\">    selected\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\">    select\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\">    selectAll\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\">    record\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\">    undo\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\">    redo\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\">    canUndo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> past\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\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    canRedo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> future\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\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    move\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\">    add\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\">    remove\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\">    duplicate\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\">    nudge\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\">    update\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\">    rename\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\">    setHidden\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\">    align\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\">    distribute\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\">    view\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\">    fit\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\">    setViewport\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\">    panBy\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\">    zoomBy\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\">    center\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\">    tool\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\">    spaceHeld\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\">    panning\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\">    altHeld\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\">    shiftHeld\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\">    hovered\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\">    guides\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> ReturnType\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><typeof\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> createEditor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> EDITOR\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> InjectionKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Editor\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\"> Symbol\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'editor'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":564,"lang":592,"code":2260,"html":2261},"\u002F** Boxes and lines on the canvas, in world units (100% zoom): snapping, guides, alignment. *\u002F\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport interface Box extends Point {\n  width: number;\n  height: number;\n}\n\nexport type Axis = 'x' | 'y';\n\n\u002F** A pink line at `at` on `axis` (a vertical line for 'x'), drawn from `from` to `to` along the other axis. *\u002F\nexport interface Guide {\n  axis: Axis;\n  at: number;\n  from: number;\n  to: number;\n}\n\nexport interface Guides {\n  lines: Guide[];\n  \u002F** The space between the moved box and the closest box it lines up with, labelled with its length. *\u002F\n  gaps: Guide[];\n}\n\nexport const NO_GUIDES: Guides = { lines: [], gaps: [] };\n\nconst SIZE = { x: 'width', y: 'height' } as const;\nconst ACROSS = { x: 'y', y: 'x' } as const;\n\n\u002F** The lines a box snaps by along an axis: its start, its centre and its end. *\u002F\nconst linesOf = (box: Box, axis: Axis) => {\n  const start = box[axis];\n  const size = box[SIZE[axis]];\n  return [start, start + size \u002F 2, start + size];\n};\n\nexport const offsetBox = (box: Box, x: number, y: number): Box => ({ ...box, x: box.x + x, y: box.y + y });\n\n\u002F** The smallest box around all of them; `null` for none. *\u002F\nexport const union = (boxes: Box[]): Box | null => {\n  if (!boxes.length) return null;\n  const left = Math.min(...boxes.map((box) => box.x));\n  const top = Math.min(...boxes.map((box) => box.y));\n  const right = Math.max(...boxes.map((box) => box.x + box.width));\n  const bottom = Math.max(...boxes.map((box) => box.y + box.height));\n  return { x: left, y: top, width: right - left, height: bottom - top };\n};\n\n\u002F**\n * How far `values` (positions on `axis`) must move so that one of them sits on a line of\n * `targets`, if one is within `reach`: the closest wins. 0 when none is.\n *\u002F\nexport const snapValues = (values: number[], targets: Box[], axis: Axis, reach: number): number => {\n  let best = reach + 1;\n  for (const value of values) {\n    for (const target of targets) {\n      for (const line of linesOf(target, axis)) {\n        const gap = line - value;\n        if (Math.abs(gap) \u003C Math.abs(best)) best = gap;\n      }\n    }\n  }\n  return Math.abs(best) \u003C= reach ? best : 0;\n};\n\n\u002F** How far `box` must move along `axis` so its edge or centre sits on a line of `targets`. *\u002F\nexport const snapBox = (box: Box, targets: Box[], axis: Axis, reach: number) =>\n  snapValues(linesOf(box, axis), targets, axis, reach);\n\nexport const overlaps = (a: Box, b: Box) =>\n  a.x \u003C b.x + b.width && b.x \u003C a.x + a.width && a.y \u003C b.y + b.height && b.y \u003C a.y + a.height;\n\nconst contains = (outer: Box, inner: Box) =>\n  outer.x \u003C= inner.x &&\n  outer.y \u003C= inner.y &&\n  outer.x + outer.width >= inner.x + inner.width &&\n  outer.y + outer.height >= inner.y + inner.height;\n\n\u002F** Whether a box lies across the line at `at` on `axis`, between `from` and `to` along it. *\u002F\nconst crosses = (box: Box, axis: Axis, at: number, from: number, to: number) => {\n  const across = ACROSS[axis];\n  return box[axis] \u003C at && at \u003C box[axis] + box[SIZE[axis]] && box[across] \u003C to && from \u003C box[across] + box[SIZE[across]];\n};\n\n\u002F**\n * The lines `box` sits on exactly, each drawn across every box that shares it, and per\n * line the space to the closest of those boxes, unless another box stands in between.\n *\u002F\nexport const guidesFor = (box: Box, targets: Box[]): Guides => {\n  const lines = new Map\u003Cstring, Guide>();\n  const gaps = new Map\u003Cstring, Guide>();\n  for (const axis of ['x', 'y'] as const) {\n    const across = ACROSS[axis];\n    const size = SIZE[across];\n    const own = linesOf(box, axis);\n    for (const target of targets) {\n      const start = Math.min(box[across], target[across]);\n      const end = Math.max(box[across] + box[size], target[across] + target[size]);\n      \u002F\u002F The space between the two along the line; none when they overlap there.\n      const before = box[across] - (target[across] + target[size]);\n      const after = target[across] - (box[across] + box[size]);\n      for (const at of linesOf(target, axis)) {\n        if (!own.some((value) => Math.abs(value - at) \u003C 0.01)) continue;\n        const key = `${axis}${Math.round(at * 100)}`;\n        const line = lines.get(key);\n        lines.set(key, line ? { ...line, from: Math.min(line.from, start), to: Math.max(line.to, end) } : { axis, at, from: start, to: end });\n        const gap = before > 0 ? { from: box[across] - before, to: box[across] } : after > 0 ? { from: box[across] + box[size], to: target[across] } : null;\n        \u002F\u002F A box between the two hides the gap; the frame around them doesn't.\n        if (!gap || targets.some((other) => !contains(other, box) && crosses(other, axis, at, gap.from, gap.to))) continue;\n        const closest = gaps.get(key);\n        if (!closest || gap.to - gap.from \u003C closest.to - closest.from) gaps.set(key, { axis, at, ...gap });\n      }\n    }\n  }\n  return { lines: [...lines.values()], gaps: [...gaps.values()] };\n};\n\nexport type Alignment = 'left' | 'center' | 'right' | 'top' | 'middle' | 'bottom';\n\n\u002F** Where `box` goes to line up with `bounds`. *\u002F\nexport const aligned = (box: Box, bounds: Box, alignment: Alignment): Point => {\n  switch (alignment) {\n    case 'left':\n      return { x: bounds.x, y: box.y };\n    case 'center':\n      return { x: bounds.x + (bounds.width - box.width) \u002F 2, y: box.y };\n    case 'right':\n      return { x: bounds.x + bounds.width - box.width, y: box.y };\n    case 'top':\n      return { x: box.x, y: bounds.y };\n    case 'middle':\n      return { x: box.x, y: bounds.y + (bounds.height - box.height) \u002F 2 };\n    case 'bottom':\n      return { x: box.x, y: bounds.y + bounds.height - box.height };\n  }\n};\n\n\u002F**\n * New starts along `axis` that spread the boxes with equal space between them, in the order\n * they are given. The first and the last box stay where they are.\n *\u002F\nexport const distributed = (boxes: Box[], axis: Axis): number[] => {\n  const size = SIZE[axis];\n  const order = boxes.map((box, index) => ({ box, index })).sort((a, b) => a.box[axis] - b.box[axis]);\n  const first = order[0]!.box;\n  const last = order.reduce((end, { box }) => Math.max(end, box[axis] + box[size]), -Infinity);\n  const filled = boxes.reduce((sum, box) => sum + box[size], 0);\n  const space = (last - first[axis] - filled) \u002F (boxes.length - 1);\n  const starts: number[] = [];\n  let next = first[axis];\n  for (const { box, index } of order) {\n    starts[index] = next;\n    next += box[size] + space;\n  }\n  return starts;\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:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** Boxes and lines on the canvas, in world units (100% zoom): snapping, guides, alignment. *\u002F\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\"> Point\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\">  x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> extends\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Point \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\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'x'\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\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** A pink line at `at` on `axis` (a vertical line for 'x'), drawn from `from` to `to` along the other axis. *\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\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Guide\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\">  axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Axis\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\">  at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Guides\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\">  lines\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Guide\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** The space between the moved box and the closest box it lines up with, labelled with its length. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  gaps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Guide\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> NO_GUIDES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Guides\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\"> lines\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\"> gaps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> []\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SIZE \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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'width'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'height'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\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\"> ACROSS \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\"> x\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>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'x'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** The lines a box snaps by along an axis: its start, its centre and its end. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linesOf\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\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\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:#0F766E;--shiki-dark:#7EE0C0\"> Axis\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\"> start \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> size \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">SIZE\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\">start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> size \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\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:#27272A;--shiki-dark:#E4E4E7\"> start \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> offsetBox\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\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\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\"> Box\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:#5B5B63;--shiki-dark:#9F9FA9\"> ...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y \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** The smallest box around all of them; `null` for none. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> union\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\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\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:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">box\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\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\"> top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">box\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\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\"> right \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">box\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\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\"> bottom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(...\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">box\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> right \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bottom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F**\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\"> * How far `values` (positions on `axis`) must move so that one of them sits on a line of\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\"> * `targets`, if one is within `reach`: the closest wins. 0 when none is.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> snapValues\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\">values\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:#7C4DCC;--shiki-dark:#C3A6FF\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[],\u003C\u002Fspan>\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:#0F766E;--shiki-dark:#7EE0C0\"> Axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> reach\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\"> number\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\">  let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> best \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reach \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> values\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\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targets\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\">      for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> line \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linesOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">        const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> gap \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> line \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">        if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">abs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">gap\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\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">abs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">best\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> best \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">abs\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">best\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\"> reach \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> best \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** How far `box` must move along `axis` so its edge or centre sits on a line of `targets`. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> snapBox\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\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[],\u003C\u002Fspan>\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:#0F766E;--shiki-dark:#7EE0C0\"> Axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> reach\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  snapValues\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">linesOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reach\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> overlaps\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\">a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> contains\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\">outer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> inner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  outer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \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\">  outer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">  outer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> outer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \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\">  outer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> outer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\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** Whether a box lies across the line at `at` on `axis`, between `from` and `to` along it. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> crosses\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\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\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:#0F766E;--shiki-dark:#7EE0C0\"> Axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> at\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:#7C4DCC;--shiki-dark:#C3A6FF\"> from\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:#7C4DCC;--shiki-dark:#C3A6FF\"> to\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:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> across \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ACROSS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> at \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> at \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">SIZE\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">SIZE\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F**\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 lines `box` sits on exactly, each drawn across every box that shares it, and per\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\"> * line the space to the closest of those boxes, unless another box stands in between.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> guidesFor\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\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Guides\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\"> lines \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Guide\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\"> gaps \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Guide\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\">  for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'x'\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>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> across \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ACROSS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> size \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SIZE\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> own \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linesOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\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\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> end \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\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 space between the two along the line; none when they overlap there.\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\"> before \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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:#27272A;--shiki-dark:#E4E4E7\">target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\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\"> after \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> at \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> linesOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\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\">        if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">own\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">some\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">abs\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\"> at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.01\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> continue\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\"> key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">at \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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:#1F8A5B;--shiki-dark:#42B883\">        const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> line \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> lines\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">        lines\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> line \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:#27272A;--shiki-dark:#E4E4E7\">line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\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:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end \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\"> gap \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> before \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:#7C4DCC;--shiki-dark:#C3A6FF\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> before\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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:#27272A;--shiki-dark:#E4E4E7\"> after \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:#7C4DCC;--shiki-dark:#C3A6FF\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">across\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:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">        \u002F\u002F A box between the two hides the gap; the frame around them doesn't.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">        if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">gap \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">some\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">other\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\">contains\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">other\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\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\"> crosses\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">other\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> continue\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\"> closest \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> gaps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">get\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">        if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">closest \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">from \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> closest\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> closest\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> gaps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> at\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\">gap \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lines\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\">lines\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">values\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> gaps\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\">gaps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">values\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#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\"> Alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'left'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'right'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'top'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'middle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'bottom'\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** Where `box` goes to line up with `bounds`. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> aligned\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\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">):\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Point\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\">  switch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">alignment\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\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'left'\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \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\">bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'right'\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'top'\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'middle'\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    case\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'bottom'\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F**\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\"> * New starts along `axis` that spread the boxes with equal space between them, in the order\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\"> * they are given. The first and the last box stay where they are.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> distributed\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\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[],\u003C\u002Fspan>\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:#0F766E;--shiki-dark:#7EE0C0\"> Axis\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:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> size \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SIZE\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> order \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">box\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>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> index \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">sort\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> b\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\"> a\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> b\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> first \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]!.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\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\"> last \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">reduce\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">end\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\"> box\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\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">Infinity\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\"> filled \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">reduce\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sum\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> box\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\"> sum \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">],\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> space \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\">last \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> first\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\"> filled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> starts\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\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\"> next \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> first\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">axis\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\">  for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> index \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> order\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    starts\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> next\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\">    next \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> space\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:#27272A;--shiki-dark:#E4E4E7\"> starts\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2263,"lang":2233,"code":2264,"html":2265},"GuideLines.vue","\u003Cscript setup lang=\"ts\">\nimport { inject } from 'vue';\nimport { EDITOR } from '.\u002Feditor';\nimport type { Guide } from '.\u002Fgeometry';\n\n\u002F\u002F The smart guides of a drag or a resize: pink lines through the edges and centres the\n\u002F\u002F layers share, and the distance to the closest layer on each line.\nconst editor = inject(EDITOR)!;\nconst { view, guides } = editor;\n\n\u002F** A guide in screen pixels: a vertical line for the 'x' axis, a horizontal one for 'y'. *\u002F\nconst place = ({ axis, at, from, to }: Guide) => {\n  const along = { start: `${(axis === 'x' ? view.y : view.x) + from * view.zoom}px`, length: `${(to - from) * view.zoom}px` };\n  const across = `${(axis === 'x' ? view.x : view.y) + at * view.zoom}px`;\n  return axis === 'x'\n    ? { left: across, top: along.start, height: along.length }\n    : { top: across, left: along.start, width: along.length };\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"guides\" aria-hidden=\"true\">\n    \u003Cspan v-for=\"line in guides.lines\" :key=\"`${line.axis}${line.at}`\" class=\"line\" :class=\"line.axis\" :style=\"place(line)\" \u002F>\n    \u003Cspan v-for=\"gap in guides.gaps\" :key=\"`gap${gap.axis}${gap.at}`\" class=\"gap\" :class=\"gap.axis\" :style=\"place(gap)\">\n      \u003Cspan class=\"distance\">{{ Math.round(gap.to - gap.from) }}\u003C\u002Fspan>\n    \u003C\u002Fspan>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.guides {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  pointer-events: none;\n  --guide: #f43f8e;\n}\n\n.line,\n.gap {\n  position: absolute;\n}\n\n.line.x {\n  border-left: 1px solid var(--guide);\n}\n\n.line.y {\n  border-top: 1px solid var(--guide);\n}\n\n\u002F* A gap is measured like a dimension: a line with a tick at each end and its length. *\u002F\n.gap.x {\n  width: 0;\n  border-left: 1px solid var(--guide);\n}\n\n.gap.y {\n  height: 0;\n  border-top: 1px solid var(--guide);\n}\n\n.gap::before,\n.gap::after {\n  content: '';\n  position: absolute;\n  background: var(--guide);\n}\n\n.gap.x::before,\n.gap.x::after {\n  left: -4px;\n  width: 7px;\n  height: 1px;\n}\n\n.gap.x::before {\n  top: 0;\n}\n\n.gap.x::after {\n  bottom: 0;\n}\n\n.gap.y::before,\n.gap.y::after {\n  top: -4px;\n  width: 1px;\n  height: 7px;\n}\n\n.gap.y::before {\n  left: 0;\n}\n\n.gap.y::after {\n  right: 0;\n}\n\n.distance {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  padding: 1px 4px;\n  border-radius: 3px;\n  background: var(--guide);\n  color: #fff;\n  font: 600 10px\u002F1.3 ui-monospace, Menlo, Consolas, monospace;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  transform: translate(-50%, -50%);\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject \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\"> EDITOR \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\"> '.\u002Feditor'\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\"> Guide \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\"> '.\u002Fgeometry'\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 smart guides of a drag or a resize: pink lines through the edges and centres 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 layers share, and the distance to the closest layer on each line.\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\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> guides \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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** A guide in screen pixels: a vertical line for the 'x' axis, a horizontal one for 'y'. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> place\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\"> axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> at\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Guide\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\"> along \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\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">axis \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'x'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\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>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">x\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\"> from \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> from\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\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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\"> across \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">axis \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'x'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\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>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> at \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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\"> axis \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'x'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> across\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> along\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> along\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>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> across\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> along\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> along\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:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"guides\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"line in guides.lines\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"`${line.axis}${line.at}`\"\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\">\"line\"\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\">\"line.axis\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"place(line)\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"gap in guides.gaps\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"`gap${gap.axis}${gap.at}`\"\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\">\"gap\"\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\">\"gap.axis\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"place(gap)\"\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\">\"distance\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ Math.round(gap.to - gap.from) }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">guides\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  --guide\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\">f43f8e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">line\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\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--guide\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--guide\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* A gap is measured like a dimension: a line with a tick at each end and its length. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--guide\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--guide\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">before\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> ''\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--guide\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">before\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">before\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">before\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">before\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">::\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">after\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">distance\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--guide\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-variant-numeric\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> tabular-nums\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">-50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2267,"lang":2233,"code":2268,"html":2269},"Icon.vue","\u003Cscript setup lang=\"ts\">\nimport { ICONS, type IconName } from '.\u002Ficons';\n\ndefineProps\u003C{ name: IconName }>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csvg class=\"icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\u003Cpath :d=\"ICONS[name]\" \u002F>\u003C\u002Fsvg>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.icon {\n  flex: none;\n  width: 16px;\n  height: 16px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.6;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ICONS\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\"> IconName \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\"> '.\u002Ficons'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> IconName\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <svg\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\">\"icon\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"0 0 24 24\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">><path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ICONS[name]\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F><\u002Fsvg>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke-linecap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  stroke-linejoin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2271,"lang":592,"code":2272,"html":2273},"icons.ts","\u002F** Line icons on a 24 × 24 grid, drawn with a 1.6 stroke by `Icon.vue`. *\u002F\nexport const ICONS = {\n  move: 'M5 4l5.6 15.2a.4.4 0 0 0 .75 0l2.25-6.2 6.2-2.25a.4.4 0 0 0 0-.75z',\n  hand: 'M18 11V6.5a1.5 1.5 0 0 0-3 0V11M15 10V4.5a1.5 1.5 0 0 0-3 0V10M12 10V5.5a1.5 1.5 0 0 0-3 0V14l-2.1-2.1a1.6 1.6 0 0 0-2.3 2.2L9 19a5 5 0 0 0 4 2h1a5 5 0 0 0 5-5v-5a1.5 1.5 0 0 0-3 0',\n  frame: 'M8 3v18M16 3v18M3 8h18M3 16h18',\n  rect: 'M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z',\n  ellipse: 'M12 4a8 8 0 1 0 0 16a8 8 0 1 0 0-16z',\n  text: 'M5 7V5h14v2M12 5v14M9 19h6',\n  image: 'M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM20 15l-4-4-9 9M9 7a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3z',\n  undo: 'M9 14L4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11',\n  redo: 'M15 14l5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13',\n  plus: 'M5 12h14M12 5v14',\n  minus: 'M5 12h14',\n  fit: 'M4 9V6a2 2 0 0 1 2-2h3M15 4h3a2 2 0 0 1 2 2v3M20 15v3a2 2 0 0 1-2 2h-3M9 20H6a2 2 0 0 1-2-2v-3',\n  panels: 'M5 4h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM15 4v16',\n  close: 'M6 6l12 12M18 6L6 18',\n  eye: 'M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5z',\n  hidden: 'M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12zM4 4l16 16',\n  chevron: 'M9 6l6 6-6 6',\n  trash: 'M4 7h16M9 7V4.5h6V7M18 7l-.8 12.2a1 1 0 0 1-1 .8H7.8a1 1 0 0 1-1-.8L6 7',\n  copy: 'M9 9h10v10H9zM5 15V5h10',\n  'align-left': 'M4 3v18M8 7h12v3.5H8zM8 13.5h7V17H8z',\n  'align-center': 'M12 3v18M6 7h12v3.5H6zM8.5 13.5h7V17h-7z',\n  'align-right': 'M20 3v18M4 7h12v3.5H4zM9 13.5h7V17H9z',\n  'align-top': 'M3 4h18M7 8h3.5v12H7zM13.5 8H17v7h-3.5z',\n  'align-middle': 'M3 12h18M7 6h3.5v12H7zM13.5 8.5H17v7h-3.5z',\n  'align-bottom': 'M3 20h18M7 4h3.5v12H7zM13.5 9H17v7h-3.5z',\n  'text-left': 'M4 6h16M4 12h10M4 18h13',\n  'text-center': 'M4 6h16M7 12h10M5.5 18h13',\n  'text-right': 'M4 6h16M10 12h10M7 18h13',\n  'distribute-x':'M4 3v18M20 3v18M10 7h4v10h-4z',\n  'distribute-y': 'M3 4h18M3 20h18M7 10h10v4H7z',\n} as const;\n\nexport type IconName = keyof typeof ICONS;","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** Line icons on a 24 × 24 grid, drawn with a 1.6 stroke by `Icon.vue`. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ICONS \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\">  move\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M5 4l5.6 15.2a.4.4 0 0 0 .75 0l2.25-6.2 6.2-2.25a.4.4 0 0 0 0-.75z'\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\">  hand\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M18 11V6.5a1.5 1.5 0 0 0-3 0V11M15 10V4.5a1.5 1.5 0 0 0-3 0V10M12 10V5.5a1.5 1.5 0 0 0-3 0V14l-2.1-2.1a1.6 1.6 0 0 0-2.3 2.2L9 19a5 5 0 0 0 4 2h1a5 5 0 0 0 5-5v-5a1.5 1.5 0 0 0-3 0'\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\">  frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M8 3v18M16 3v18M3 8h18M3 16h18'\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\">  rect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'\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\">  ellipse\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M12 4a8 8 0 1 0 0 16a8 8 0 1 0 0-16z'\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\">  text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M5 7V5h14v2M12 5v14M9 19h6'\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\">  image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM20 15l-4-4-9 9M9 7a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3z'\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\">  undo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M9 14L4 9l5-5M4 9h10.5a5.5 5.5 0 0 1 0 11H11'\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\">  redo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M15 14l5-5-5-5M20 9H9.5a5.5 5.5 0 0 0 0 11H13'\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\">  plus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M5 12h14M12 5v14'\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\">  minus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M5 12h14'\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\">  fit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M4 9V6a2 2 0 0 1 2-2h3M15 4h3a2 2 0 0 1 2 2v3M20 15v3a2 2 0 0 1-2 2h-3M9 20H6a2 2 0 0 1-2-2v-3'\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\">  panels\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M5 4h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM15 4v16'\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\">  close\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M6 6l12 12M18 6L6 18'\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\">  eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5z'\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\">  hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12zM4 4l16 16'\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\">  chevron\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M9 6l6 6-6 6'\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\">  trash\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M4 7h16M9 7V4.5h6V7M18 7l-.8 12.2a1 1 0 0 1-1 .8H7.8a1 1 0 0 1-1-.8L6 7'\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\">  copy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M9 9h10v10H9zM5 15V5h10'\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\">  'align-left'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M4 3v18M8 7h12v3.5H8zM8 13.5h7V17H8z'\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\">  'align-center'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M12 3v18M6 7h12v3.5H6zM8.5 13.5h7V17h-7z'\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\">  'align-right'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M20 3v18M4 7h12v3.5H4zM9 13.5h7V17H9z'\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\">  'align-top'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M3 4h18M7 8h3.5v12H7zM13.5 8H17v7h-3.5z'\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\">  'align-middle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M3 12h18M7 6h3.5v12H7zM13.5 8.5H17v7h-3.5z'\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\">  'align-bottom'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M3 20h18M7 4h3.5v12H7zM13.5 9H17v7h-3.5z'\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\">  'text-left'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M4 6h16M4 12h10M4 18h13'\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\">  'text-center'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M4 6h16M7 12h10M5.5 18h13'\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\">  'text-right'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M4 6h16M10 12h10M7 18h13'\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\">  'distribute-x'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'M4 3v18M20 3v18M10 7h4v10h-4z'\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\">  'distribute-y'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'M3 4h18M3 20h18M7 10h10v4H7z'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\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\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> IconName\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> keyof\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> typeof\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ICONS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2275,"lang":2233,"code":2276,"html":2277},"ImageArt.vue","\u003Cscript setup lang=\"ts\">\nimport type { Artwork } from '.\u002Fdesign';\n\n\u002F\u002F Pictures for image layers, drawn here so the example needs no files: they fill the\n\u002F\u002F layer's box at any size and crop like a photo would.\ndefineProps\u003C{ art: Artwork }>();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csvg class=\"art\" viewBox=\"0 0 160 120\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\">\n    \u003Ctemplate v-if=\"art === 'mountains'\">\n      \u003Crect width=\"160\" height=\"120\" fill=\"#c7d2fe\" \u002F>\n      \u003Ccircle cx=\"116\" cy=\"36\" r=\"14\" fill=\"#fef3c7\" \u002F>\n      \u003Cpath d=\"M0 120V80l38-34 34 38 32-32 56 44v24z\" fill=\"#a5b4fc\" \u002F>\n      \u003Cpath d=\"M0 120V96l44-28 42 34 36-26 38 26v18z\" fill=\"#6366f1\" \u002F>\n      \u003Cpath d=\"M0 120v-10l50-16 48 18 62-14v22z\" fill=\"#3730a3\" \u002F>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate v-else-if=\"art === 'portrait'\">\n      \u003Crect width=\"160\" height=\"120\" fill=\"#fdba74\" \u002F>\n      \u003Cpath d=\"M28 120c0-26 22-40 52-40s52 14 52 40z\" fill=\"#ea580c\" \u002F>\n      \u003Ccircle cx=\"80\" cy=\"52\" r=\"22\" fill=\"#9a3412\" \u002F>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate v-else>\n      \u003Crect width=\"160\" height=\"120\" fill=\"#fecdd3\" \u002F>\n      \u003Ccircle cx=\"52\" cy=\"42\" r=\"15\" fill=\"#fff1f2\" \u002F>\n      \u003Cpath d=\"M0 82q50-22 100 0t60-6v44H0z\" fill=\"#fb7185\" \u002F>\n      \u003Cpath d=\"M0 100q60-22 120 0t40-4v24H0z\" fill=\"#be123c\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002Fsvg>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.art {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> Artwork \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\"> '.\u002Fdesign'\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 Pictures for image layers, drawn here so the example needs no files: they fill 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 layer's box at any size and crop like a photo would.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> art\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Artwork\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <svg\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\">\"art\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> viewBox\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"0 0 160 120\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> preserveAspectRatio\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"xMidYMid slice\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"art === 'mountains'\"\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\">      <rect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"160\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"120\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#c7d2fe\"\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\">      <circle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"116\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"36\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"14\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#fef3c7\"\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\">      <path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"M0 120V80l38-34 34 38 32-32 56 44v24z\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#a5b4fc\"\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\">      <path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"M0 120V96l44-28 42 34 36-26 38 26v18z\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#6366f1\"\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\">      <path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"M0 120v-10l50-16 48 18 62-14v22z\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#3730a3\"\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:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"art === 'portrait'\"\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\">      <rect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"160\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"120\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#fdba74\"\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\">      <path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"M28 120c0-26 22-40 52-40s52 14 52 40z\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#ea580c\"\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\">      <circle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"80\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"52\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"22\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#9a3412\"\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:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else\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\">      <rect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"160\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"120\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#fecdd3\"\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\">      <circle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"52\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> cy\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"42\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> r\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"15\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#fff1f2\"\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\">      <path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"M0 82q50-22 100 0t60-6v44H0z\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#fb7185\"\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\">      <path\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> d\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"M0 100q60-22 120 0t40-4v24H0z\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"#be123c\"\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\">  <\u002Fsvg>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">art\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> block\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2279,"lang":2233,"code":2280,"html":2281},"InsertTool.vue","\u003Cscript setup lang=\"ts\">\nimport { inject, useTemplateRef } from 'vue';\nimport { makeDraggable, snapCenterToCursor } from '@vue-dnd-kit\u002Fcore';\nimport ToolButton from '.\u002FToolButton.vue';\nimport ToolGhost from '.\u002FToolGhost.vue';\nimport { KINDS, type LayerKind } from '.\u002Fdesign';\nimport { EDITOR } from '.\u002Feditor';\nimport type { ToolData } from '.\u002FuseLayerDrop';\n\nconst props = defineProps\u003C{ kind: LayerKind; shortcut: string }>();\nconst editor = inject(EDITOR)!;\n\n\u002F\u002F A tool is a plain draggable: dropped on the canvas or into a frame, it adds its layer\n\u002F\u002F there (`useLayerDrop`). Its overlay is the layer's outline, centred on the pointer. With\n\u002F\u002F the keyboard, Enter picks it up and the arrows jump to the canvas and the frames.\nconst button = useTemplateRef\u003CInstanceType\u003Ctypeof ToolButton>>('button');\nconst { isDragging } = makeDraggable(button, {\n  id: `tool-${props.kind}`,\n  type: props.kind === 'frame' ? 'frame' : 'layer',\n  data: (): ToolData => ({ tool: props.kind, zoom: editor.view.zoom }),\n  overlay: ToolGhost,\n  modifiers: [snapCenterToCursor],\n  keyboardMode: 'droppables',\n});\n\n\u002F\u002F A click adds the layer in the middle of the view.\nconst add = () => editor.add(props.kind, editor.center());\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CToolButton\n    ref=\"button\"\n    :icon=\"kind\"\n    :label=\"`${KINDS[kind].name}: drag onto the canvas or click`\"\n    :shortcut=\"shortcut\"\n    :class=\"{ lifted: isDragging }\"\n    @click=\"add\"\n  \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.lifted {\n  opacity: 0.4;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject\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\"> makeDraggable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> snapCenterToCursor \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\"> ToolButton \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FToolButton.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ToolGhost \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FToolGhost.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\"> KINDS\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\"> LayerKind \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\"> '.\u002Fdesign'\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\"> EDITOR \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\"> '.\u002Feditor'\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\"> ToolData \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\"> '.\u002FuseLayerDrop'\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\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> LayerKind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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 A tool is a plain draggable: dropped on the canvas or into a frame, it adds its layer\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 there (`useLayerDrop`). Its overlay is the layer's outline, centred on the pointer. With\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 keyboard, Enter picks it up and the arrows jump to the canvas and the frames.\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\"> button \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\">InstanceType\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><typeof\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ToolButton\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'button'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> isDragging \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\"> makeDraggable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `tool-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">kind\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\">  type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'layer'\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\">  data\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ():\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> ToolData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom \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\">  overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ToolGhost\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\">snapCenterToCursor\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\">  keyboardMode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'droppables'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A click adds the layer in the middle of the view.\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\"> add\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">add\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">());\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <ToolButton\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\">\"button\"\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\">icon\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\">kind\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\">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:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">KINDS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">].\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">: drag onto the canvas or click`\"\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\">shortcut\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\">shortcut\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\">class\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\"> lifted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isDragging \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\">click\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\">add\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\">  \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\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">lifted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2283,"lang":2233,"code":2284,"html":2285},"Inspector.vue","\u003Cscript setup lang=\"ts\">\nimport { computed, inject } from 'vue';\nimport ColorField from '.\u002FColorField.vue';\nimport Icon from '.\u002FIcon.vue';\nimport ImageArt from '.\u002FImageArt.vue';\nimport NumberField from '.\u002FNumberField.vue';\nimport ToolButton from '.\u002FToolButton.vue';\nimport { KINDS, type Artwork, type Layer } from '.\u002Fdesign';\nimport { EDITOR, MOD } from '.\u002Feditor';\nimport type { Alignment } from '.\u002Fgeometry';\nimport type { IconName } from '.\u002Ficons';\n\nconst editor = inject(EDITOR)!;\nconst { selected } = editor;\n\nconst single = computed(() => (selected.value.length === 1 ? selected.value[0]! : null));\nconst set = (patch: Partial\u003CLayer>) => single.value && editor.update(single.value, patch);\n\n\u002F** The frame the selected layer is in: its position counts from the frame's corner. *\u002F\nconst frame = computed(() => (single.value ? editor.parentOf(single.value.id) : null));\n\u002F\u002F One layer lines up with its frame, several with each other.\nconst canAlign = computed(() => selected.value.length > 1 || !!frame.value);\nconst ALIGNMENTS: { alignment: Alignment; icon: IconName; label: string }[] = [\n  { alignment: 'left', icon: 'align-left', label: 'Align left' },\n  { alignment: 'center', icon: 'align-center', label: 'Align centre' },\n  { alignment: 'right', icon: 'align-right', label: 'Align right' },\n  { alignment: 'top', icon: 'align-top', label: 'Align top' },\n  { alignment: 'middle', icon: 'align-middle', label: 'Align middle' },\n  { alignment: 'bottom', icon: 'align-bottom', label: 'Align bottom' },\n];\n\nconst SWATCHES = ['#0f172a', '#64748b', '#ffffff', '#0d99ff', '#6366f1', '#f43f5e', '#f59e0b', '#10b981'];\nconst WEIGHTS = [\n  { value: 400, name: 'Regular' },\n  { value: 600, name: 'Semibold' },\n  { value: 700, name: 'Bold' },\n];\nconst TEXT_ALIGN = [\n  { value: 'left', icon: 'text-left', label: 'Align text left' },\n  { value: 'center', icon: 'text-center', label: 'Centre text' },\n  { value: 'right', icon: 'text-right', label: 'Align text right' },\n] as const;\nconst ARTWORKS: Artwork[] = ['mountains', 'portrait', 'dunes'];\n\nconst SHORTCUTS = [\n  ['Move', 'Drag · Enter, arrows'],\n  ['Select several', 'Shift-click · a box'],\n  ['Drop copies', 'Alt while dropping'],\n  ['Pan', 'Space-drag · wheel'],\n  ['Zoom', `${MOD} + wheel`],\n  ['Nudge', 'Arrows · Shift ×10'],\n  ['Undo · redo', `${MOD} Z · ${MOD} Shift Z`],\n  ['Duplicate · delete', `${MOD} D · Delete`],\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"inspector\" aria-label=\"Design\">\n    \u003Cheader class=\"head\">\n      \u003Ctemplate v-if=\"single\">\n        \u003CIcon :name=\"single.kind\" class=\"kind\" \u002F>\n        \u003Ch3>{{ single.name }}\u003C\u002Fh3>\n        \u003Cspan class=\"tag\">{{ KINDS[single.kind].name }}\u003C\u002Fspan>\n      \u003C\u002Ftemplate>\n      \u003Ch3 v-else-if=\"selected.length\">{{ selected.length }} layers\u003C\u002Fh3>\n      \u003Ch3 v-else>Design\u003C\u002Fh3>\n    \u003C\u002Fheader>\n\n    \u003Cdiv v-if=\"selected.length\" class=\"sections\">\n      \u003Cdiv class=\"section\">\n        \u003Cdiv class=\"buttons\">\n          \u003CToolButton\n            v-for=\"{ alignment, icon, label } in ALIGNMENTS\"\n            :key=\"alignment\"\n            :icon=\"icon\"\n            :label=\"label\"\n            :disabled=\"!canAlign\"\n            @click=\"editor.align(alignment)\"\n          \u002F>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"buttons\">\n          \u003CToolButton icon=\"distribute-x\" label=\"Distribute horizontally\" :disabled=\"selected.length \u003C 3\" @click=\"editor.distribute('x')\" \u002F>\n          \u003CToolButton icon=\"distribute-y\" label=\"Distribute vertically\" :disabled=\"selected.length \u003C 3\" @click=\"editor.distribute('y')\" \u002F>\n          \u003Cspan class=\"gap\" \u002F>\n          \u003CToolButton icon=\"copy\" label=\"Duplicate\" :shortcut=\"`${MOD} D`\" @click=\"editor.duplicate()\" \u002F>\n          \u003CToolButton icon=\"trash\" label=\"Delete\" shortcut=\"Del\" @click=\"editor.remove()\" \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003Ctemplate v-if=\"single\">\n        \u003Cdiv class=\"section\">\n          \u003Ch4>{{ frame ? `Position in ${frame.name}` : 'Position' }}\u003C\u002Fh4>\n          \u003Cdiv class=\"pair\">\n            \u003CNumberField label=\"X\" name=\"X\" :value=\"single.x\" @change=\"set({ x: $event })\" \u002F>\n            \u003CNumberField label=\"Y\" name=\"Y\" :value=\"single.y\" @change=\"set({ y: $event })\" \u002F>\n            \u003CNumberField label=\"W\" name=\"Width\" :value=\"single.width\" :min=\"1\" @change=\"set({ width: $event })\" \u002F>\n            \u003CNumberField label=\"H\" name=\"Height\" :value=\"single.height\" :min=\"1\" @change=\"set({ height: $event })\" \u002F>\n            \u003CNumberField\n              v-if=\"single.kind !== 'ellipse' && single.kind !== 'text'\"\n              label=\"R\"\n              name=\"Corner radius\"\n              :value=\"single.radius\"\n              :min=\"0\"\n              @change=\"set({ radius: $event })\"\n            \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv v-if=\"single.kind === 'image'\" class=\"section\">\n          \u003Ch4>Image\u003C\u002Fh4>\n          \u003Cdiv class=\"artworks\">\n            \u003Cbutton\n              v-for=\"art in ARTWORKS\"\n              :key=\"art\"\n              type=\"button\"\n              class=\"artwork\"\n              :aria-label=\"`Picture: ${art}`\"\n              :aria-pressed=\"single.image === art\"\n              @click=\"set({ image: art })\"\n            >\n              \u003CImageArt :art=\"art\" \u002F>\n            \u003C\u002Fbutton>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv v-else class=\"section\">\n          \u003Ch4>{{ single.kind === 'text' ? 'Colour' : 'Fill' }}\u003C\u002Fh4>\n          \u003CColorField :name=\"single.kind === 'text' ? 'Text colour' : 'Fill'\" :value=\"single.fill\" @change=\"set({ fill: $event })\" \u002F>\n          \u003Cdiv class=\"swatches\">\n            \u003Cbutton\n              v-for=\"swatch in SWATCHES\"\n              :key=\"swatch\"\n              type=\"button\"\n              class=\"swatch\"\n              :style=\"{ background: swatch }\"\n              :aria-label=\"`Fill ${swatch}`\"\n              :aria-pressed=\"single.fill === swatch\"\n              @click=\"set({ fill: swatch })\"\n            \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv v-if=\"single.kind === 'text'\" class=\"section\">\n          \u003Ch4>Text\u003C\u002Fh4>\n          \u003Ctextarea\n            class=\"words\"\n            rows=\"2\"\n            aria-label=\"Text\"\n            :value=\"single.content\"\n            @input=\"set({ content: ($event.target as HTMLTextAreaElement).value })\"\n          \u002F>\n          \u003Cdiv class=\"pair\">\n            \u003CNumberField label=\"Aa\" name=\"Font size\" :value=\"single.fontSize ?? 12\" :min=\"1\" @change=\"set({ fontSize: $event })\" \u002F>\n            \u003Cselect\n              class=\"weight\"\n              aria-label=\"Font weight\"\n              :value=\"single.fontWeight\"\n              @change=\"set({ fontWeight: Number(($event.target as HTMLSelectElement).value) })\"\n            >\n              \u003Coption v-for=\"weight in WEIGHTS\" :key=\"weight.value\" :value=\"weight.value\">{{ weight.name }}\u003C\u002Foption>\n            \u003C\u002Fselect>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"buttons\">\n            \u003CToolButton\n              v-for=\"option in TEXT_ALIGN\"\n              :key=\"option.value\"\n              :icon=\"option.icon\"\n              :label=\"option.label\"\n              :pressed=\"single.align === option.value\"\n              @click=\"set({ align: option.value })\"\n            \u002F>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003C\u002Fdiv>\n\n    \u003Cdl v-else class=\"shortcuts\">\n      \u003Ctemplate v-for=\"[action, keys] in SHORTCUTS\" :key=\"action\">\n        \u003Cdt>{{ action }}\u003C\u002Fdt>\n        \u003Cdd>{{ keys }}\u003C\u002Fdd>\n      \u003C\u002Ftemplate>\n    \u003C\u002Fdl>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.inspector {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.head {\n  display: flex;\n  flex: none;\n  align-items: center;\n  gap: 6px;\n  height: 36px;\n  padding: 0 12px;\n}\n\nh3 {\n  flex: 1;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  font-size: 11px;\n  font-weight: 600;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.kind {\n  width: 14px;\n  height: 14px;\n  color: #0d99ff;\n}\n\n.tag {\n  color: var(--dc-muted);\n  font-size: 10px;\n}\n\n.sections {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px 12px 12px;\n  border-top: 1px solid var(--dc-line);\n}\n\nh4 {\n  margin: 0;\n  overflow: hidden;\n  color: var(--dc-muted);\n  font-size: 11px;\n  font-weight: 500;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n}\n\n.buttons .gap {\n  flex: 1;\n}\n\n.pair {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px;\n}\n\n.swatches {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.swatch {\n  width: 18px;\n  height: 18px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  box-shadow: inset 0 0 0 1px rgb(0 0 0 \u002F 0.14);\n  cursor: pointer;\n  transition: transform 0.12s;\n}\n\n.swatch:hover {\n  transform: scale(1.15);\n}\n\n.swatch[aria-pressed='true'] {\n  box-shadow:\n    inset 0 0 0 1px rgb(0 0 0 \u002F 0.14),\n    0 0 0 2px var(--dc-panel),\n    0 0 0 3.5px #0d99ff;\n}\n\n.swatch:focus-visible,\n.artwork:focus-visible {\n  outline: 2px solid #0d99ff;\n  outline-offset: 2px;\n}\n\n.artworks {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 6px;\n}\n\n.artwork {\n  height: 40px;\n  padding: 0;\n  overflow: hidden;\n  border: 0;\n  border-radius: 6px;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: opacity 0.12s;\n}\n\n.artwork:hover,\n.artwork[aria-pressed='true'] {\n  opacity: 1;\n}\n\n.artwork[aria-pressed='true'] {\n  box-shadow: 0 0 0 2px #0d99ff;\n}\n\n.words,\n.weight {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  outline: none;\n  background: var(--dc-field);\n  color: inherit;\n  font: inherit;\n  font-size: 12px;\n}\n\n.words {\n  padding: 6px 8px;\n  resize: vertical;\n}\n\n.weight {\n  height: 28px;\n  padding: 0 6px;\n}\n\n.words:hover,\n.weight:hover {\n  border-color: var(--dc-line);\n}\n\n.words:focus,\n.weight:focus {\n  border-color: #0d99ff;\n}\n\n.shortcuts {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 8px 12px;\n  margin: 0;\n  padding: 10px 12px 14px;\n  overflow: auto;\n  border-top: 1px solid var(--dc-line);\n  font-size: 11px;\n}\n\ndt {\n  color: var(--dc-muted);\n}\n\ndd {\n  margin: 0;\n  text-align: right;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .swatch,\n  .artwork {\n    transition: none;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject \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:#27272A;--shiki-dark:#E4E4E7\"> ColorField \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FColorField.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Icon \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FIcon.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ImageArt \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FImageArt.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> NumberField \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FNumberField.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ToolButton \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FToolButton.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\"> KINDS\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\"> Artwork\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\"> Layer \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\"> '.\u002Fdesign'\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\"> EDITOR\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> MOD \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\"> '.\u002Feditor'\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\"> Alignment \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\"> '.\u002Fgeometry'\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\"> IconName \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\"> '.\u002Ficons'\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\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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\"> selected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\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\"> single \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:#27272A;--shiki-dark:#E4E4E7\">selected\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\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">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>\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\"> set\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\">patch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Partial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Layer\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\"> single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">update\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\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\"> patch\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** The frame the selected layer is in: its position counts from the frame's corner. *\u002F\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\"> frame \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:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\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\">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:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F One layer lines up with its frame, several with each other.\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\"> canAlign \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\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\">length \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:#5B5B63;--shiki-dark:#9F9FA9\"> !!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ALIGNMENTS\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\"> alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> IconName\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\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\"> alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'left'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\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\"> 'align-left'\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\"> 'Align left'\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\"> alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\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\"> 'align-center'\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\"> 'Align centre'\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\"> alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'right'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\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\"> 'align-right'\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\"> 'Align right'\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\"> alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'top'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\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\"> 'align-top'\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\"> 'Align top'\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\"> alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'middle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\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\"> 'align-middle'\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\"> 'Align middle'\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\"> alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'bottom'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\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\"> 'align-bottom'\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\"> 'Align bottom'\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\"> SWATCHES \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\">'#0f172a'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#64748b'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#ffffff'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#0d99ff'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#6366f1'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#f43f5e'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#f59e0b'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '#10b981'\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\"> WEIGHTS \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\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 400\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\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\"> 'Regular'\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\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\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\"> 'Semibold'\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\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 700\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\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\"> 'Bold'\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\"> TEXT_ALIGN \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\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'left'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\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\"> 'text-left'\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\"> 'Align text left'\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\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'center'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\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\"> 'text-center'\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\"> 'Centre 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>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'right'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\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\"> 'text-right'\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\"> 'Align text right'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\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\"> ARTWORKS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Artwork\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\">'mountains'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'portrait'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dunes'\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\"> SHORTCUTS \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:#9A6700;--shiki-dark:#E9C46A\">'Move'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Drag · Enter, arrows'\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\">'Select several'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Shift-click · a box'\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\">'Drop copies'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Alt while dropping'\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\">'Pan'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Space-drag · wheel'\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\">'Zoom'\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\">MOD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> + wheel`\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\">'Nudge'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Arrows · Shift ×10'\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\">'Undo · redo'\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\">MOD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> Z · \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">MOD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> Shift Z`\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\">'Duplicate · delete'\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\">MOD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> D · Delete`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"inspector\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Design\"\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\">    <header\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\">\"head\"\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\">      <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\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\">        <Icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"kind\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <h3>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ single.name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <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\">\"tag\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ KINDS[single.kind].name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"selected.length\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ selected.length }} layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Design\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fheader>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"selected.length\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"sections\"\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\">\"section\"\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\">\"buttons\"\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\">          <ToolButton\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">            v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> label \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ALIGNMENTS\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\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">alignment\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\">icon\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\">icon\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\">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\">label\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\">disabled\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\">canAlign\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\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <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\">\"buttons\"\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\">          <ToolButton\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\">\"distribute-x\"\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\">\"Distribute horizontally\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\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\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\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\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">distribute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'x'\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <ToolButton\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\">\"distribute-y\"\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\">\"Distribute vertically\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\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\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\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\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">distribute\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>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"gap\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <ToolButton\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\">\"copy\"\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\">\"Duplicate\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shortcut\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\">MOD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> D`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">duplicate\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <ToolButton\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\">\"trash\"\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\">\"Delete\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Del\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">remove\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\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\">\"section\"\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\">          <h4>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ frame ? `Position in ${frame.name}` : 'Position' }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh4>\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\">\"pair\"\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\">            <NumberField\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\">\"X\"\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\">\"X\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\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\">change\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> $event \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">            <NumberField\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\">\"Y\"\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\">\"Y\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\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\">change\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> $event \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">            <NumberField\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\">\"W\"\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\">\"Width\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\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\">min\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:#BC4C00;--shiki-dark:#F4A261\">1\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\">change\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> $event \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">            <NumberField\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\">\"H\"\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\">\"Height\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\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\">min\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:#BC4C00;--shiki-dark:#F4A261\">1\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\">change\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> $event \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">            <NumberField\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">              v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'text'\"\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\">\"R\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"Corner radius\"\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\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">radius\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\">min\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:#BC4C00;--shiki-dark:#F4A261\">0\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\">change\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> $event \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">            \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"single.kind === 'image'\"\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\">\"section\"\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\">          <h4>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh4>\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\">\"artworks\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">            <button\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"art in ARTWORKS\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"art\"\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\">\"artwork\"\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\">\"`Picture: ${art}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              :aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"single.image === art\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"set({ image: art })\"\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\">              <ImageArt\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">art\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\">art\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\">            <\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> v-else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"section\"\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\">          <h4>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ single.kind === 'text' ? 'Colour' : 'Fill' }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh4>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <ColorField\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'text'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Text colour'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'Fill'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fill\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\">change\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> $event \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">          <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\">\"swatches\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">            <button\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"swatch in SWATCHES\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"swatch\"\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\">\"swatch\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ background: swatch }\"\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\">\"`Fill ${swatch}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              :aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"single.fill === swatch\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"set({ fill: swatch })\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">            \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"single.kind === 'text'\"\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\">\"section\"\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\">          <h4>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh4>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <textarea\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\">\"words\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">            rows\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"2\"\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\">\"Text\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">            :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"single.content\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">            @input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"set({ content: ($event.target as HTMLTextAreaElement).value })\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">          \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <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\">\"pair\"\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\">            <NumberField\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\">\"Aa\"\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\">\"Font size\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fontSize \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">min\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:#BC4C00;--shiki-dark:#F4A261\">1\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\">change\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> $event \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">            <select\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\">\"weight\"\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\">\"Font weight\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"single.fontWeight\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">              @change\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"set({ fontWeight: Number(($event.target as HTMLSelectElement).value) })\"\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\">              <option\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"weight in WEIGHTS\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"weight.value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"weight.value\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ weight.name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Foption>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">            <\u002Fselect>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"buttons\"\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\">            <ToolButton\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">              v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">option \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> TEXT_ALIGN\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\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">option\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:#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\">icon\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\">option\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">icon\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\">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\">option\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">label\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\">pressed\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\">single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">align \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> option\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:#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\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> option\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">})\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">            \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">          <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Ftemplate>\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:#CF2257;--shiki-dark:#FF7B9C\">    <dl\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"shortcuts\"\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\">      <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> keys\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SHORTCUTS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">action\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\">        <dt>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ action }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fdt>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <dd>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ keys }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fdd>\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\">    <\u002Fdl>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fsection>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">inspector\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">head\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 36\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ellipsis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tag\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sections\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">h4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 500\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ellipsis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">buttons\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">buttons\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pair\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatches\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> transform \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> scale\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'true'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">swatch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artwork\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artworks\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> repeat\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artwork\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 40\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.75\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> opacity \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artwork\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artwork\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'true'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">artwork\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'true'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">words\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\">weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-field\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">words\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  resize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> vertical\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">words\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">words\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus\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\">weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shortcuts\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  grid-template-columns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">fr\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">dt\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">dd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-align\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">prefers-reduced-motion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reduce\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\">swatch\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\">artwork\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2287,"lang":2233,"code":2288,"html":2289},"LayerRow.vue","\u003Cscript setup lang=\"ts\">\nimport { computed, inject, nextTick, ref, useTemplateRef } from 'vue';\nimport { makeSortableItem, useDnD, type FlatNode } from '@vue-dnd-kit\u002Fcore';\nimport Icon from '.\u002FIcon.vue';\nimport type { Layer } from '.\u002Fdesign';\nimport { EDITOR } from '.\u002Feditor';\n\nconst props = defineProps\u003C{ node: FlatNode\u003CLayer> }>();\nconst emit = defineEmits\u003C{ toggle: [] }>();\nconst editor = inject(EDITOR)!;\nconst { selection, status } = useDnD();\n\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\u002F\u002F Typed, so the canvas and its frames, which take layers and tools, refuse a row.\nmakeSortableItem(el, { id: () => props.node.key, type: 'row' });\n\nconst layer = computed(() => props.node.item);\n\u002F\u002F The selection is the canvas's: a row lights up with its layer, and faintly inside a\n\u002F\u002F selected frame, which its layers move with.\nconst selected = computed(() => selection.has(layer.value.id));\nconst inSelected = computed(() => {\n  const frame = editor.parentOf(layer.value.id);\n  return !selected.value && !!frame && selection.has(frame.id);\n});\n\nconst pick = (event: MouseEvent) => editor.select(layer.value.id, event.shiftKey);\n\u002F\u002F Tabbing onto a row selects its layer; a click selects on its own (Shift adds).\nconst focus = () => {\n  if (el.value?.matches(':focus-visible') && !selected.value && !layer.value.hidden) editor.select(layer.value.id);\n};\n\u002F\u002F Hovering a row outlines its layer on the canvas.\nconst hover = (on: boolean) => {\n  if (on && status.value === 'idle') editor.hovered.value = layer.value.id;\n  else if (!on && editor.hovered.value === layer.value.id) editor.hovered.value = null;\n};\n\n\u002F\u002F Double-click (or F2) renames. The field is an input: it never starts a drag.\nconst renaming = ref(false);\nconst field = useTemplateRef\u003CHTMLInputElement>('field');\nconst rename = async () => {\n  renaming.value = true;\n  await nextTick();\n  field.value?.select();\n};\nconst finish = (save: boolean) => {\n  if (!renaming.value) return;\n  const name = field.value?.value.trim();\n  renaming.value = false;\n  if (save && name && name !== layer.value.name) editor.rename(layer.value, name);\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cli\n    ref=\"el\"\n    class=\"row\"\n    :class=\"{ selected, 'in-selected': inSelected, lit: editor.hovered.value === layer.id, 'is-hidden': layer.hidden }\"\n    :style=\"{ marginInlineStart: `${node.depth * 14}px` }\"\n    :aria-label=\"`${layer.name}${selected ? ', selected' : ''}`\"\n    :data-id=\"layer.id\"\n    @click=\"pick\"\n    @focus=\"focus\"\n    @dblclick=\"rename\"\n    @keydown.f2.prevent=\"rename\"\n    @pointerenter=\"hover(true)\"\n    @pointerleave=\"hover(false)\"\n  >\n    \u003Cbutton\n      v-if=\"layer.kind === 'frame'\"\n      type=\"button\"\n      class=\"chevron\"\n      :class=\"{ open: !node.collapsed }\"\n      :aria-label=\"`${node.collapsed ? 'Expand' : 'Collapse'} ${layer.name}`\"\n      :aria-expanded=\"!node.collapsed\"\n      @click.stop=\"emit('toggle')\"\n    >\n      \u003CIcon name=\"chevron\" \u002F>\n    \u003C\u002Fbutton>\n    \u003Cspan v-else class=\"indent\" \u002F>\n    \u003CIcon :name=\"layer.kind\" class=\"kind\" \u002F>\n    \u003Cinput\n      v-if=\"renaming\"\n      ref=\"field\"\n      class=\"rename\"\n      :value=\"layer.name\"\n      aria-label=\"Layer name\"\n      @keydown.enter.prevent=\"finish(true)\"\n      @keydown.esc.stop.prevent=\"finish(false)\"\n      @blur=\"finish(true)\"\n      @click.stop\n      @dblclick.stop\n    \u002F>\n    \u003Cspan v-else class=\"name\">{{ layer.name }}\u003C\u002Fspan>\n    \u003Cbutton\n      type=\"button\"\n      class=\"eye\"\n      :aria-label=\"`${layer.hidden ? 'Show' : 'Hide'} ${layer.name}`\"\n      :aria-pressed=\"!!layer.hidden\"\n      @click.stop=\"editor.setHidden(layer, !layer.hidden)\"\n    >\n      \u003CIcon :name=\"layer.hidden ? 'hidden' : 'eye'\" \u002F>\n    \u003C\u002Fbutton>\n  \u003C\u002Fli>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 28px;\n  padding: 0 4px 0 2px;\n  border-radius: 6px;\n  \u002F* Opaque: the overlay, a clone of the row, must not be see-through. *\u002F\n  background: var(--dc-panel);\n  font-size: 12px;\n  cursor: default;\n  user-select: none;\n}\n\n.row:hover,\n.row.lit {\n  background: color-mix(in srgb, currentColor 6%, var(--dc-panel));\n}\n\n.row.in-selected {\n  background: color-mix(in srgb, #0d99ff 8%, var(--dc-panel));\n}\n\n.row.selected {\n  background: color-mix(in srgb, #0d99ff 20%, var(--dc-panel));\n}\n\n.row:focus-visible {\n  outline: 2px solid #0d99ff;\n  outline-offset: -2px;\n}\n\n\u002F* The slot the dragged row lands in. *\u002F\n.row[data-dnd-placeholder] {\n  opacity: 1;\n  background: color-mix(in srgb, #0d99ff 10%, var(--dc-panel));\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, #0d99ff 70%, transparent);\n}\n\n.row[data-dnd-placeholder] > * {\n  opacity: 0.4;\n}\n\n[data-dnd-overlay] .row {\n  box-shadow:\n    0 10px 24px -10px rgb(0 0 0 \u002F 0.45),\n    0 0 0 1px var(--dc-line);\n}\n\n.kind {\n  width: 14px;\n  height: 14px;\n  color: var(--dc-muted);\n}\n\n.selected .kind {\n  color: #0d99ff;\n}\n\n.name,\n.rename {\n  flex: 1;\n  min-width: 0;\n}\n\n.name {\n  overflow: hidden;\n  padding-left: 2px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.rename {\n  height: 22px;\n  padding: 0 4px;\n  border: 1px solid #0d99ff;\n  border-radius: 4px;\n  outline: none;\n  background: Canvas;\n  color: inherit;\n  font: inherit;\n}\n\n.is-hidden .kind,\n.is-hidden .name {\n  opacity: 0.45;\n}\n\n.indent {\n  flex: none;\n  width: 18px;\n}\n\n.chevron,\n.eye {\n  display: grid;\n  flex: none;\n  place-items: center;\n  width: 18px;\n  height: 22px;\n  padding: 0;\n  border: 0;\n  border-radius: 4px;\n  background: none;\n  color: var(--dc-muted);\n  cursor: pointer;\n}\n\n.chevron :deep(.icon) {\n  width: 12px;\n  height: 12px;\n  transition: transform 0.15s;\n}\n\n.chevron.open :deep(.icon) {\n  transform: rotate(90deg);\n}\n\n.eye {\n  width: 24px;\n  opacity: 0;\n  transition: opacity 0.12s;\n}\n\n.eye :deep(.icon) {\n  width: 14px;\n  height: 14px;\n}\n\n\u002F* The eye shows on hover, on focus, and always on a hidden layer. *\u002F\n.row:hover .eye,\n.eye:focus-visible,\n.eye[aria-pressed='true'] {\n  opacity: 1;\n}\n\n.chevron:hover,\n.eye:hover {\n  background: var(--dc-hover);\n  color: inherit;\n}\n\n.chevron:focus-visible,\n.eye:focus-visible {\n  outline: 2px solid #0d99ff;\n}\n\n@media (hover: none) {\n  .eye {\n    opacity: 0.6;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron :deep(.icon),\n  .eye {\n    transition: none;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> nextTick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> FlatNode \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\"> Icon \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FIcon.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\"> Layer \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\"> '.\u002Fdesign'\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\"> EDITOR \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\"> '.\u002Feditor'\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\"> node\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> FlatNode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> emit \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineEmits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> toggle\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:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)!;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> 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:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\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\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Typed, so the canvas and its frames, which take layers and tools, refuse a row.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">makeSortableItem\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> 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\">node\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\"> 'row'\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\"> layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">node\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">item\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 selection is the canvas's: a row lights up with its layer, and faintly inside a\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F selected frame, which its layers move with.\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\"> selected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\">id\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\"> inSelected \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>\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\"> frame \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\">id\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\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\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:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> pick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> MouseEvent\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey\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 Tabbing onto a row selects its layer; a click selects on its own (Shift adds).\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\"> focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">el\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\">matches\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">':focus-visible'\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:#27272A;--shiki-dark:#E4E4E7\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\">hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\">id\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 Hovering a row outlines its layer on the canvas.\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\"> hover\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\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">on \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'idle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\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\"> layer\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\">id\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\">  else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">on \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\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\"> layer\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\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Double-click (or F2) renames. The field is an input: it never starts a drag.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> renaming \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> field \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\">HTMLInputElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'field'\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\"> rename\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">  renaming\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> nextTick\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\">  field\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\">select\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:#0969DA;--shiki-dark:#7CC4FF\"> finish\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\">save\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">renaming\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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> name \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> field\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\">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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  renaming\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">save \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> name \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> name \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\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\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">rename\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <li\u003C\u002Fspan>\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\">\"el\"\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\">\"row\"\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\">\"{ selected, 'in-selected': inSelected, lit: editor.hovered.value === layer.id, 'is-hidden': layer.hidden }\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"{ marginInlineStart: `${node.depth * 14}px` }\"\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\">\"`${layer.name}${selected ? ', selected' : ''}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    :data-id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"layer.id\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"pick\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"focus\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @dblclick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"rename\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @keydown.f2.prevent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"rename\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @pointerenter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hover(true)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @pointerleave\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hover(false)\"\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\">    <button\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"layer.kind === 'frame'\"\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\">\"chevron\"\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\">\"{ open: !node.collapsed }\"\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\">\"`${node.collapsed ? 'Expand' : 'Collapse'} ${layer.name}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      :aria-expanded\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"!node.collapsed\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @click.stop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"emit('toggle')\"\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\">      <Icon\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\">\"chevron\"\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\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"indent\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <Icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"kind\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <input\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"renaming\"\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\">\"field\"\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\">\"rename\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"layer.name\"\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\">\"Layer name\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @keydown.enter.prevent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"finish(true)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @keydown.esc.stop.prevent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"finish(false)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @blur\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"finish(true)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @click.stop\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @dblclick.stop\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"name\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ layer.name }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <button\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\">\"eye\"\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\">\"`${layer.hidden ? 'Show' : 'Hide'} ${layer.name}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      :aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"!!layer.hidden\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @click.stop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"editor.setHidden(layer, !layer.hidden)\"\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\">      <Icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hidden \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'hidden'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'eye'\"\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\">  <\u002Fli>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">  \u002F* Opaque: the overlay, a clone of the row, must not be see-through. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">lit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> currentColor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in-selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">20\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\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The slot the dragged row lands in. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> color-mix\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> srgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">70\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-placeholder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> >\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">rename\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding-left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  text-overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ellipsis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">rename\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">is-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">is-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">indent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chevron\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\">eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  place-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chevron\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> :deep(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> transform \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chevron\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">open\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> :deep(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rotate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">90\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">deg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 24\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> opacity \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> :deep(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The eye shows on hover, on focus, and always on a hidden layer. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">eye\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\">eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'true'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chevron\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">chevron\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> none\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\">eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">prefers-reduced-motion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reduce\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\">chevron\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> :deep(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">),\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\">eye\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":533,"lang":2233,"code":2291,"html":2292},"\u003Cscript setup lang=\"ts\">\nimport { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';\nimport { makeSortableTree, type Key } from '@vue-dnd-kit\u002Fcore';\nimport LayerRow from '.\u002FLayerRow.vue';\nimport type { Layer } from '.\u002Fdesign';\nimport { EDITOR } from '.\u002Feditor';\nimport { overlaps } from '.\u002Fgeometry';\n\nconst editor = inject(EDITOR)!;\n\n\u002F\u002F Rows have keys of their own: the layers' ids belong to their draggables on the canvas.\nconst rowKey = (layer: Layer) => `row:${layer.id}`;\nconst layerOf = (key: Key) => editor.find(String(key).slice('row:'.length)) ?? null;\n\nconst collapsed = ref(new Set\u003CKey>());\nconst toggle = (key: Key) => (collapsed.value.has(key) ? collapsed.value.delete(key) : collapsed.value.add(key));\n\nconst tree = useTemplateRef\u003CHTMLElement>('tree');\n\u002F\u002F The panel is the design itself, as a tree. Its order is the stacking order (the top row\n\u002F\u002F is in front), and a layer dropped onto a frame's row, or under it, moves into the frame.\nconst { items } = makeSortableTree(tree, {\n  items: editor.layers,\n  getKey: rowKey,\n  \u002F\u002F Frames take layers; frames themselves stay on the canvas.\n  canNest: (layer, parent) => parent.kind === 'frame' && layer.kind !== 'frame',\n  maxDepth: 1,\n  indentation: 14,\n  collapsed,\n  \u002F\u002F Changes made elsewhere (the canvas, undo) slide the rows too.\n  animateChanges: true,\n  autoScroll: true,\n  onDrop: ({ items: moved, from, to }) => {\n    if (from.parentKey === to.parentKey && from.index === to.index) return;\n    editor.record();\n    \u002F\u002F A layer that changes frames stays where it is on the canvas: its position counts from\n    \u002F\u002F its frame's corner, so it takes the difference. Moved into a frame that doesn't cover\n    \u002F\u002F it, it would be clipped out of sight: it goes to the frame's middle instead. `onDrop`\n    \u002F\u002F runs before the tree is written, so `boxOf` still knows the frame it comes from.\n    const frame = to.parentKey === null ? null : layerOf(to.parentKey);\n    for (const layer of moved) {\n      if (editor.parentOf(layer.id) === frame) continue;\n      const box = editor.boxOf(layer);\n      const into = frame ? editor.boxOf(frame) : { x: 0, y: 0, width: 0, height: 0 };\n      const middle = frame && !overlaps(box, into);\n      layer.x = Math.round(middle ? (into.width - box.width) \u002F 2 : box.x - into.x);\n      layer.y = Math.round(middle ? (into.height - box.height) \u002F 2 : box.y - into.y);\n    }\n  },\n});\n\n\u002F\u002F A layer selected on the canvas may be out of sight here: its row scrolls into the panel\n\u002F\u002F (the panel only, not the page around the editor).\nwatch(\n  () => editor.selected.value[0]?.id,\n  async (id) => {\n    await nextTick();\n    const list = tree.value;\n    const row = id ? list?.querySelector\u003CHTMLElement>(`[data-id=\"${id}\"]`) : null;\n    if (!list || !row) return;\n    if (row.offsetTop \u003C list.scrollTop) list.scrollTop = row.offsetTop - 6;\n    else if (row.offsetTop + row.offsetHeight > list.scrollTop + list.clientHeight) {\n      list.scrollTop = row.offsetTop + row.offsetHeight - list.clientHeight + 6;\n    }\n  },\n);\n\nconst count = computed(() => editor.layers.value.reduce((sum, layer) => sum + 1 + (layer.children?.length ?? 0), 0));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Csection class=\"layers\" aria-label=\"Layers\">\n    \u003Cheader class=\"head\">\n      \u003Ch3>Layers\u003C\u002Fh3>\n      \u003Cspan class=\"count\">{{ count }}\u003C\u002Fspan>\n    \u003C\u002Fheader>\n    \u003Cul ref=\"tree\" class=\"tree\">\n      \u003CLayerRow v-for=\"node in items\" :key=\"node.key\" :node=\"node\" @toggle=\"toggle(node.key)\" \u002F>\n    \u003C\u002Ful>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.layers {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 36px;\n  padding: 0 12px;\n  flex: none;\n}\n\nh3 {\n  margin: 0;\n  font-size: 11px;\n  font-weight: 600;\n}\n\n.count {\n  padding: 1px 6px;\n  border-radius: 99px;\n  background: var(--dc-hover);\n  color: var(--dc-muted);\n  font-size: 10px;\n  font-variant-numeric: tabular-nums;\n}\n\n.tree {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  margin: 0;\n  padding: 0 6px 8px;\n  overflow: auto;\n  list-style: none;\n}\n\n\u002F* Where the panel shares a column with the properties, its tab names it. *\u002F\n@container editor (max-width: 959px) {\n  .head {\n    display: none;\n  }\n\n  .tree {\n    padding-top: 6px;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> nextTick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> watch \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> makeSortableTree\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\"> Key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> LayerRow \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FLayerRow.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\"> Layer \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\"> '.\u002Fdesign'\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\"> EDITOR \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\"> '.\u002Feditor'\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\"> overlaps \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\"> '.\u002Fgeometry'\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\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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 Rows have keys of their own: the layers' ids belong to their draggables on the canvas.\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\"> rowKey\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\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `row:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">${\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">layer\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:#9A6700;--shiki-dark:#E9C46A\">`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> layerOf\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\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">find\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:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">slice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'row:'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> collapsed \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:#1F8A5B;--shiki-dark:#42B883\">new\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">Key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>());\u003C\u002Fspan>\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\"> toggle\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\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">collapsed\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\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> collapsed\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\">delete\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> collapsed\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\">add\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\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\"> tree \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\">'tree'\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 panel is the design itself, as a tree. Its order is the stacking order (the top row\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 is in front), and a layer dropped onto a frame's row, or under it, moves into the frame.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeSortableTree\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tree\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layers\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\">  getKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> rowKey\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 Frames take layers; frames themselves stay on the canvas.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  canNest\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\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> parent\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\"> parent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\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\">  maxDepth\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  indentation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 14\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  collapsed\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 Changes made elsewhere (the canvas, undo) slide the rows too.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  animateChanges\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  autoScroll\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  onDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> moved\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> })\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parentKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parentKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">record\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    \u002F\u002F A layer that changes frames stays where it is on the canvas: its position counts from\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 its frame's corner, so it takes the difference. Moved into a frame that doesn't cover\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 it, it would be clipped out of sight: it goes to the frame's middle instead. `onDrop`\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 runs before the tree is written, so `boxOf` still knows the frame it comes from.\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\"> frame \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parentKey \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:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> layerOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">parentKey\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\">    for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">of\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> moved\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\">      if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> continue\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\"> box \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\"> into \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> frame \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">frame\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\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:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> middle \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> frame \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\">overlaps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> into\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">middle \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\">into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\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:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\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\">      layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">middle \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\">into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\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:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> into\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A layer selected on the canvas may be out of sight here: its row scrolls into the panel\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 panel only, not the page around the editor).\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">watch\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\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:#1F8A5B;--shiki-dark:#42B883\">  async\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">id\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\">    await\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> nextTick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tree\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\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\"> id \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">querySelector\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\">`[data-id=\"\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:#9A6700;--shiki-dark:#E9C46A\">\"]`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">list \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">offsetTop \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">scrollTop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">scrollTop \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\">offsetTop \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">row\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">offsetTop \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\">offsetHeight \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">scrollTop \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientHeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">scrollTop \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\">offsetTop \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\">offsetHeight \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> list\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientHeight \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> count \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">layers\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\">reduce\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">((\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sum\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> layer\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\"> sum \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:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">children\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">??\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <section\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"layers\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Layers\"\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\">    <header\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\">\"head\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <h3>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fh3>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"count\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ count }}\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\">    <\u002Fheader>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <ul\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tree\"\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\">\"tree\"\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\">      <LayerRow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">node \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">node\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">node\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\">node\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\">toggle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">toggle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">node\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Ful>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fsection>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">layers\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex-direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> column\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">head\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  justify-content\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> space-between\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 36\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">h3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 600\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">count\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 99\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-variant-numeric\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> tabular-nums\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tree\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  list-style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Where the panel shares a column with the properties, its tab names it. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor (max-width: 959px) \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\">head\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tree\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    padding-top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2294,"lang":2233,"code":2295,"html":2296},"NumberField.vue","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\n\n\u002F\u002F A number field as in design tools: type a value, step it with the arrow keys (Shift: by\n\u002F\u002F 10), or drag its label sideways to scrub it.\nconst props = withDefaults(defineProps\u003C{ label: string; name: string; value: number; min?: number }>(), {\n  min: -Infinity,\n});\nconst emit = defineEmits\u003C{ change: [value: number] }>();\n\n\u002F** What is typed, until Enter or leaving the field applies it. *\u002F\nconst draft = ref\u003Cstring | null>(null);\n\nconst set = (value: number) => {\n  const next = Math.max(props.min, Math.round(value));\n  if (next !== props.value) emit('change', next);\n};\n\nconst commit = () => {\n  if (draft.value === null) return;\n  const typed = draft.value.trim();\n  draft.value = null;\n  if (typed !== '' && Number.isFinite(Number(typed))) set(Number(typed));\n};\n\nconst step = (event: KeyboardEvent, direction: 1 | -1) => {\n  event.preventDefault();\n  draft.value = null;\n  set(props.value + direction * (event.shiftKey ? 10 : 1));\n};\n\nconst cancel = (event: KeyboardEvent) => {\n  draft.value = null;\n  (event.target as HTMLInputElement).blur();\n};\n\n\u002F\u002F Scrubbing: the label captures the pointer, and each pixel sideways is one unit.\nconst scrub = (event: PointerEvent) => {\n  if (event.button !== 0) return;\n  event.preventDefault();\n  const label = event.currentTarget as HTMLElement;\n  label.setPointerCapture(event.pointerId);\n  const start = props.value;\n  const move = (next: PointerEvent) => set(start + (next.clientX - event.clientX) * (next.shiftKey ? 10 : 1));\n  const end = () => {\n    label.removeEventListener('pointermove', move);\n    label.removeEventListener('pointerup', end);\n    label.removeEventListener('pointercancel', end);\n  };\n  label.addEventListener('pointermove', move);\n  label.addEventListener('pointerup', end);\n  label.addEventListener('pointercancel', end);\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"number\">\n    \u003Cspan class=\"scrub\" aria-hidden=\"true\" :title=\"`Drag to change the ${name.toLowerCase()}`\" @pointerdown=\"scrub\">{{ label }}\u003C\u002Fspan>\n    \u003Cinput\n      :value=\"draft ?? value\"\n      inputmode=\"numeric\"\n      :aria-label=\"name\"\n      @focus=\"($event.target as HTMLInputElement).select()\"\n      @input=\"draft = ($event.target as HTMLInputElement).value\"\n      @keydown.enter=\"commit\"\n      @keydown.up=\"step($event, 1)\"\n      @keydown.down=\"step($event, -1)\"\n      @keydown.esc.stop.prevent=\"cancel\"\n      @blur=\"commit\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.number {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  height: 28px;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  background: var(--dc-field);\n  transition:\n    border-color 0.12s,\n    background-color 0.12s;\n}\n\n.number:hover {\n  border-color: var(--dc-line);\n}\n\n.number:focus-within {\n  border-color: #0d99ff;\n  background: Canvas;\n}\n\n.scrub {\n  flex: none;\n  min-width: 22px;\n  padding: 0 2px 0 8px;\n  color: var(--dc-muted);\n  font-size: 11px;\n  cursor: ew-resize;\n  user-select: none;\n  touch-action: none;\n}\n\ninput {\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0 6px 0 2px;\n  border: 0;\n  outline: none;\n  background: none;\n  color: inherit;\n  font: inherit;\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .number {\n    transition: none;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ref \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A number field as in design tools: type a value, step it with the arrow keys (Shift: by\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 10), or drag its label sideways to scrub it.\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\"> props \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> withDefaults\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\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>(),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">  min\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\">Infinity\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\"> emit \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> defineEmits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> change\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\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F** What is typed, until Enter or leaving the field applies it. *\u002F\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\"> draft \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> ref\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> 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:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> next \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">next \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> emit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'change'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> commit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">draft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> typed \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> draft\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  draft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">typed \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\"> Number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">isFinite\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">typed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">Number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">typed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> step\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> KeyboardEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> direction\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> -\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:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">preventDefault\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  draft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> direction \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> cancel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> KeyboardEvent\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\">  draft\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> HTMLInputElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">).\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">blur\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Scrubbing: the label captures the pointer, and each pixel sideways is one unit.\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\"> scrub\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">button \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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">preventDefault\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> label \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">currentTarget \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> HTMLElement\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:#0969DA;--shiki-dark:#7CC4FF\">setPointerCapture\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">pointerId\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\"> start \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\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\"> move\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\">next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\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\"> set\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">start \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\">next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX\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:#27272A;--shiki-dark:#E4E4E7\">next\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">    label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointermove'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> move\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:#0969DA;--shiki-dark:#7CC4FF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointerup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\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:#0969DA;--shiki-dark:#7CC4FF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointercancel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointermove'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> move\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:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointerup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\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:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointercancel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"number\"\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\">\"scrub\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">\"`Drag to change the ${name.toLowerCase()}`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @pointerdown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"scrub\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ label }}\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\">    <input\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"draft ?? value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      inputmode\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"numeric\"\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\">\"name\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"($event.target as HTMLInputElement).select()\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"draft = ($event.target as HTMLInputElement).value\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @keydown.enter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"commit\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @keydown.up\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"step($event, 1)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @keydown.down\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"step($event, -1)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @keydown.esc.stop.prevent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"cancel\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">      @blur\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"commit\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 28\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> transparent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-field\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    border-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    background-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-within\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Canvas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">scrub\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 22\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-muted\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ew-resize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  touch-action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">input\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  min-width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-variant-numeric\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> tabular-nums\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">prefers-reduced-motion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reduce\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\">number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2298,"lang":2233,"code":2299,"html":2300},"SelectionBox.vue","\u003Cscript setup lang=\"ts\">\nimport { computed, inject } from 'vue';\nimport { useDnD } from '@vue-dnd-kit\u002Fcore';\nimport { EDITOR, SNAP } from '.\u002Feditor';\nimport { guidesFor, NO_GUIDES, snapValues, union, type Box } from '.\u002Fgeometry';\n\nconst HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'] as const;\ntype Handle = (typeof HANDLES)[number];\n\nconst editor = inject(EDITOR)!;\nconst { view, selected } = editor;\nconst { selection, status } = useDnD();\n\nconst toScreen = (box: Box) => ({\n  left: `${view.x + box.x * view.zoom}px`,\n  top: `${view.y + box.y * view.zoom}px`,\n  width: `${box.width * view.zoom}px`,\n  height: `${box.height * view.zoom}px`,\n});\n\nconst boxes = computed(() => selected.value.map(editor.boxOf));\nconst bounds = computed(() => union(boxes.value));\nconst single = computed(() => (selected.value.length === 1 ? selected.value[0]! : null));\n\u002F\u002F While a drag runs, the clones in the overlay show where the layers are.\nconst shown = computed(() => bounds.value && status.value !== 'dragging' && status.value !== 'dropping');\n\u002F\u002F Hovered on the canvas or in the layers panel: an outline, unless it is selected anyway.\nconst hoverBox = computed(() => {\n  const layer = editor.hovered.value ? editor.find(editor.hovered.value) : null;\n  return layer && !selection.has(layer.id) && status.value === 'idle' ? editor.boxOf(layer) : null;\n});\n\n\u002F\u002F ─── Resizing ──────────────────────────────────────────────────────────────────\n\u002F\u002F Handles are plain pointer events: a resize changes a layer's box, it moves nothing anywhere.\n\nlet gestures = 0;\n\nconst resize = (handle: Handle, event: PointerEvent) => {\n  const layer = single.value;\n  if (!layer || event.button !== 0) return;\n  event.preventDefault();\n  const grip = event.currentTarget as HTMLElement;\n  grip.setPointerCapture(event.pointerId);\n  const start = editor.boxOf(layer);\n  const frame = editor.parentOf(layer.id);\n  const targets = editor.snapTargets([layer.id]);\n  const origin = { x: event.clientX, y: event.clientY };\n  \u002F\u002F One undo step for the whole gesture.\n  const key = `resize-${++gestures}`;\n\n  const move = ({ clientX, clientY, shiftKey }: PointerEvent) => {\n    const dx = (clientX - origin.x) \u002F view.zoom;\n    const dy = (clientY - origin.y) \u002F view.zoom;\n    \u002F\u002F The edges the handle holds follow the pointer and snap to the other layers' lines.\n    const snap = (value: number, axis: 'x' | 'y') =>\n      shiftKey ? value : value + snapValues([value], targets, axis, SNAP \u002F view.zoom);\n    let left = start.x;\n    let top = start.y;\n    let right = start.x + start.width;\n    let bottom = start.y + start.height;\n    if (handle.includes('w')) left = Math.min(snap(left + dx, 'x'), right - 1);\n    if (handle.includes('e')) right = Math.max(snap(right + dx, 'x'), left + 1);\n    if (handle.includes('n')) top = Math.min(snap(top + dy, 'y'), bottom - 1);\n    if (handle.includes('s')) bottom = Math.max(snap(bottom + dy, 'y'), top + 1);\n    \u002F\u002F A corner with Shift keeps the proportions, from the opposite corner.\n    if (shiftKey && handle.length === 2) {\n      const ratio = start.width \u002F start.height;\n      let width = right - left;\n      let height = bottom - top;\n      if (width \u002F start.width > height \u002F start.height) height = width \u002F ratio;\n      else width = height * ratio;\n      if (handle.includes('w')) left = right - width;\n      else right = left + width;\n      if (handle.includes('n')) top = bottom - height;\n      else bottom = top + height;\n    }\n    const box = { x: Math.round(left), y: Math.round(top), width: Math.round(right) - Math.round(left), height: Math.round(bottom) - Math.round(top) };\n    editor.update(layer, { ...box, x: box.x - (frame?.x ?? 0), y: box.y - (frame?.y ?? 0) }, key);\n    editor.guides.value = guidesFor(box, targets);\n  };\n  const end = () => {\n    editor.guides.value = NO_GUIDES;\n    grip.removeEventListener('pointermove', move);\n    grip.removeEventListener('pointerup', end);\n    grip.removeEventListener('pointercancel', end);\n  };\n  grip.addEventListener('pointermove', move);\n  grip.addEventListener('pointerup', end);\n  grip.addEventListener('pointercancel', end);\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"selection\" aria-hidden=\"true\">\n    \u003Cdiv v-if=\"hoverBox\" class=\"hover\" :style=\"toScreen(hoverBox)\" \u002F>\n    \u003Ctemplate v-if=\"shown\">\n      \u003Ctemplate v-if=\"boxes.length > 1\">\n        \u003Cdiv v-for=\"(box, index) in boxes\" :key=\"index\" class=\"member\" :style=\"toScreen(box)\" \u002F>\n      \u003C\u002Ftemplate>\n      \u003Cdiv class=\"bounds\" :style=\"toScreen(bounds!)\">\n        \u003Ctemplate v-if=\"single\">\n          \u003Cspan v-for=\"handle in HANDLES\" :key=\"handle\" class=\"grip\" :class=\"handle\" @pointerdown=\"resize(handle, $event)\" \u002F>\n        \u003C\u002Ftemplate>\n        \u003Cspan class=\"dimensions\">{{ Math.round(bounds!.width) }} × {{ Math.round(bounds!.height) }}\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.selection {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n.hover,\n.member,\n.bounds {\n  position: absolute;\n  box-sizing: border-box;\n}\n\n.hover {\n  box-shadow: 0 0 0 1.5px #0d99ff;\n}\n\n.member {\n  box-shadow: 0 0 0 1px rgb(13 153 255 \u002F 0.6);\n}\n\n.bounds {\n  box-shadow: 0 0 0 1px #0d99ff;\n}\n\n\u002F* Corners are white squares on the corners; the edges are grips just outside the sides,\n   felt rather than seen. The inside of the box is left to dragging, however small it is. *\u002F\n.grip {\n  position: absolute;\n  pointer-events: auto;\n  touch-action: none;\n}\n\n.nw,\n.ne,\n.se,\n.sw {\n  z-index: 1;\n  width: 8px;\n  height: 8px;\n  margin: -4px;\n  border: 1px solid #0d99ff;\n  border-radius: 2px;\n  box-sizing: border-box;\n  background: #fff;\n}\n\n.nw {\n  top: 0;\n  left: 0;\n  cursor: nwse-resize;\n}\n\n.ne {\n  top: 0;\n  right: 0;\n  cursor: nesw-resize;\n}\n\n.se {\n  right: 0;\n  bottom: 0;\n  cursor: nwse-resize;\n}\n\n.sw {\n  bottom: 0;\n  left: 0;\n  cursor: nesw-resize;\n}\n\n.n,\n.s {\n  right: 0;\n  left: 0;\n  height: 8px;\n  cursor: ns-resize;\n}\n\n.n {\n  top: -8px;\n}\n\n.s {\n  bottom: -8px;\n}\n\n.e,\n.w {\n  top: 0;\n  bottom: 0;\n  width: 8px;\n  cursor: ew-resize;\n}\n\n.e {\n  right: -8px;\n}\n\n.w {\n  left: -8px;\n}\n\n\u002F* Fingers: larger squares, mostly outside the box. *\u002F\n@media (pointer: coarse) {\n  .nw,\n  .ne,\n  .se,\n  .sw {\n    width: 16px;\n    height: 16px;\n    margin: -12px;\n  }\n}\n\n.dimensions {\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 50%;\n  padding: 2px 5px;\n  border-radius: 4px;\n  background: #0d99ff;\n  color: #fff;\n  font: 500 10px\u002F1.3 ui-monospace, Menlo, Consolas, monospace;\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n  transform: translateX(-50%);\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject \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\"> useDnD \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> EDITOR\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SNAP \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\"> '.\u002Feditor'\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\"> guidesFor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> NO_GUIDES\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> snapValues\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> union\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\"> Box \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\"> '.\u002Fgeometry'\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\"> HANDLES \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\">'nw'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'n'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ne'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'e'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'se'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 's'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'sw'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'w'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (typeof\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> HANDLES\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\">\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\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> 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:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> toScreen\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\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Box\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\">  left\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\">view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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\">  top\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\">view\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>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> box\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>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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\">  width\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\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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\">  height\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\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> boxes \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> selected\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\">map\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">boxOf\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\"> bounds \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> union\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> single \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:#27272A;--shiki-dark:#E4E4E7\">selected\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\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">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>\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 While a drag runs, the clones in the overlay show where the layers are.\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\"> 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:#27272A;--shiki-dark:#E4E4E7\"> bounds\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\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dragging'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'dropping'\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 Hovered on the canvas or in the layers panel: an outline, unless it is selected anyway.\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\"> hoverBox \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>\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\"> layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">find\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> layer \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\">selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">has\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> &&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'idle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F ─── Resizing ──────────────────────────────────────────────────────────────────\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 Handles are plain pointer events: a resize changes a layer's box, it moves nothing anywhere.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">let\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> gestures \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\"> resize\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\">handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\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\"> layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> single\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">button \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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">preventDefault\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  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:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">currentTarget \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> HTMLElement\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\">  grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">setPointerCapture\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">pointerId\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\"> start \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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\"> frame \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">parentOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targets \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">snapTargets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">([\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> origin \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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientX\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">clientY \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 One undo step for the whole gesture.\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\"> key \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> `resize-\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\">gestures\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:#1F8A5B;--shiki-dark:#42B883\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> move\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\"> clientX\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> clientY\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shiftKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\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\"> dx \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\">clientX \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> origin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\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\"> dy \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\">clientY \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> origin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\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 edges the handle holds follow the pointer and snap to the other layers' lines.\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\"> snap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\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\"> 'x'\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>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      shiftKey \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\"> value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> snapValues\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\"> targets\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> axis\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> SNAP \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\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\"> left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\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\"> top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\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\"> right \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width\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\"> bottom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">handle\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:#9A6700;--shiki-dark:#E9C46A\">'w'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">snap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'x'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> right \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">handle\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:#9A6700;--shiki-dark:#E9C46A\">'e'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> right \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">snap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">right \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'x'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">handle\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:#9A6700;--shiki-dark:#E9C46A\">'n'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">min\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">snap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dy\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>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bottom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">handle\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:#9A6700;--shiki-dark:#E9C46A\">'s'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bottom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">max\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">snap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">bottom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> dy\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>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">    \u002F\u002F A corner with Shift keeps the proportions, from the opposite corner.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> handle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ratio \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\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\"> width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> right \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left\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\"> height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bottom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> start\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ratio\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\">      else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ratio\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">handle\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:#9A6700;--shiki-dark:#E9C46A\">'w'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> right \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width\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\">      else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> right \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> left \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">      if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">handle\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:#9A6700;--shiki-dark:#E9C46A\">'n'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">))\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bottom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height\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\">      else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> bottom \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> top \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height\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\"> box \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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">right\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\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">bottom\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\"> Math\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">round\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">top\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\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">update\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">layer\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:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \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\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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\">frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \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:#27272A;--shiki-dark:#E4E4E7\"> key\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\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">guides\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> guidesFor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> targets\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:#0969DA;--shiki-dark:#7CC4FF\"> end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">guides\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\"> NO_GUIDES\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\">    grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointermove'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> move\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\">    grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointerup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\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\">    grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">removeEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointercancel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">  grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointermove'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> move\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\">  grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointerup'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\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\">  grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">addEventListener\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'pointercancel'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> end\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"selection\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\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\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hoverBox\"\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\">\"hover\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"toScreen(hoverBox)\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shown\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\">      <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">boxes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">length \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\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\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"(box, index) in boxes\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"index\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">\"member\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"toScreen(box)\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <\u002Ftemplate>\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\">\"bounds\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"toScreen(bounds!)\"\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\">        <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">single\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\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"handle in HANDLES\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"handle\"\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\">\"grip\"\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\">\"handle\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> @pointerdown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"resize(handle, $event)\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">        <\u002Ftemplate>\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\">\"dimensions\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ Math.round(bounds!.width) }} × {{ Math.round(bounds!.height) }}\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\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">selection\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  inset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\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\">member\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\">bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">member\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">13\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 153\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">bounds\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-shadow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Corners are white squares on the corners; the edges are grips just outside the sides,\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\">   felt rather than seen. The inside of the box is left to dragging, however small it is. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">grip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  touch-action\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">nw\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\">ne\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\">se\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\">sw\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  z-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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">nw\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nwse-resize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">ne\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nesw-resize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">se\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nwse-resize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">sw\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nesw-resize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">n\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\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ns-resize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">n\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">e\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\">w\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ew-resize\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">w\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Fingers: larger squares, mostly outside the box. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> coarse\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\">nw\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\">ne\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\">se\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\">sw\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    margin\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">dimensions\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 5\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 500\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 10\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">1.3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ui-monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Menlo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Consolas\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> monospace\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-variant-numeric\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> tabular-nums\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translateX\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">-50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":501,"lang":2233,"code":2302,"html":2303},"\u003Cscript setup lang=\"ts\">\nimport { computed, inject, useTemplateRef } from 'vue';\nimport { makeDraggable, useDnD } from '@vue-dnd-kit\u002Fcore';\nimport DragGroup from '.\u002FDragGroup.vue';\nimport ImageArt from '.\u002FImageArt.vue';\nimport type { Layer } from '.\u002Fdesign';\nimport { EDITOR } from '.\u002Feditor';\n\nconst props = defineProps\u003C{ shape: Layer }>();\nconst editor = inject(EDITOR)!;\nconst { status } = useDnD();\n\nconst el = useTemplateRef\u003CHTMLElement>('el');\n\u002F\u002F A plain draggable. Its overlay lays every dragged layer out as on the canvas (`DragGroup`),\n\u002F\u002F from the `data` of each: where it is drawn.\nconst { isDragging, selected } = makeDraggable(el, {\n  id: () => props.shape.id,\n  type: 'layer',\n  data: () => editor.dragData(props.shape),\n  overlay: DragGroup,\n});\n\n\u002F\u002F Its clone moves in the overlay, so the layer itself steps aside, until its clone has\n\u002F\u002F landed (`isDragging` lasts until then). With Alt held, a copy is being dragged: it stays.\nconst moving = computed(() => isDragging.value && !editor.altHeld.value);\n\n\u002F\u002F Drawn at the zoom: every length is in screen pixels, so what the library measures is what\n\u002F\u002F is on screen, and the clones in the overlay come out the right size.\nconst style = computed(() => {\n  const { zoom } = editor.view;\n  const { kind, x, y, width, height, fill, radius, fontSize = 12, fontWeight, align } = props.shape;\n  return {\n    left: `${x * zoom}px`,\n    top: `${y * zoom}px`,\n    width: `${width * zoom}px`,\n    height: `${height * zoom}px`,\n    borderRadius: kind === 'ellipse' ? '50%' : `${radius * zoom}px`,\n    ...(kind === 'text'\n      ? { color: fill, fontSize: `${fontSize * zoom}px`, fontWeight, textAlign: align }\n      : { background: fill }),\n  };\n});\n\n\u002F\u002F As in Figma: a press selects the layer at once, so a drag right away moves it, and a\n\u002F\u002F press on one of several selected layers drags them all. The click (no drag) then keeps\n\u002F\u002F only it; Shift adds a layer or, on a selected one, takes it out.\nlet wasSelected = false;\nconst press = (event: PointerEvent) => {\n  if (event.button !== 0 || editor.panning.value) return;\n  wasSelected = selected.value;\n  if (!wasSelected) editor.select(props.shape.id, event.shiftKey);\n};\nconst click = (event: MouseEvent) => {\n  if (editor.panning.value) return;\n  if (!event.shiftKey) editor.select(props.shape.id);\n  else if (wasSelected) selected.value = false;\n};\n\u002F\u002F Tabbing onto a layer selects it, so the keyboard can nudge it, align it or delete it.\nconst focus = () => {\n  if (!selected.value) editor.select(props.shape.id);\n};\n\nconst hover = (on: boolean) => {\n  if (on && status.value === 'idle') editor.hovered.value = props.shape.id;\n  else if (!on && editor.hovered.value === props.shape.id) editor.hovered.value = null;\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv\n    ref=\"el\"\n    class=\"shape\"\n    :class=\"[shape.kind, { moving }]\"\n    :style=\"style\"\n    :aria-label=\"`${shape.name}${selected ? ', selected' : ''}`\"\n    data-layer\n    @pointerdown=\"press\"\n    @click=\"click\"\n    @focus=\"focus\"\n    @pointerenter=\"hover(true)\"\n    @pointerleave=\"hover(false)\"\n  >\n    \u003Cspan v-if=\"shape.kind === 'text'\" class=\"words\">{{ shape.content }}\u003C\u002Fspan>\n    \u003CImageArt v-else-if=\"shape.image\" :art=\"shape.image\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.shape {\n  position: absolute;\n  box-sizing: border-box;\n  cursor: default;\n  user-select: none;\n}\n\n.shape:focus-visible {\n  outline: 2px solid #0d99ff;\n  outline-offset: 3px;\n}\n\n.text {\n  display: flex;\n  align-items: center;\n  line-height: 1.35;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.words {\n  width: 100%;\n}\n\n.image {\n  overflow: hidden;\n}\n\n.moving {\n  visibility: hidden;\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject\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\"> makeDraggable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> useDnD \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DragGroup \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FDragGroup.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ImageArt \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FImageArt.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\"> Layer \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\"> '.\u002Fdesign'\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\"> EDITOR \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\"> '.\u002Feditor'\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\"> shape\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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\"> 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:#0969DA;--shiki-dark:#7CC4FF\"> useDnD\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\"> el \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useTemplateRef\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">HTMLElement\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'el'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F A plain draggable. Its overlay lays every dragged layer out as on the canvas (`DragGroup`),\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 from the `data` of each: where it is drawn.\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\"> isDragging\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> makeDraggable\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">el\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\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\">shape\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\">  type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'layer'\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\">  data\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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">dragData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shape\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\">  overlay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> DragGroup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Its clone moves in the overlay, so the layer itself steps aside, until its clone has\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 landed (`isDragging` lasts until then). With Alt held, a copy is being dragged: it stays.\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\"> moving \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> computed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> isDragging\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> !\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">altHeld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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 Drawn at the zoom: every length is in screen pixels, so what the library measures is what\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 is on screen, and the clones in the overlay come out the right size.\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\"> style \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>\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\"> zoom \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\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">view\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\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> fontSize \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> align \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\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shape\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    left\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\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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\">    top\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\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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\">    width\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\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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\">    height\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\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\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\">    borderRadius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '50%'\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\">radius \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">    ...(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'text'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> fill\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\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\">fontSize \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> fontWeight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> textAlign\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> align \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">      :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> fill \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F As in Figma: a press selects the layer at once, so a drag right away moves it, and a\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 press on one of several selected layers drags them all. The click (no drag) then keeps\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F only it; Shift adds a layer or, on a selected one, takes it out.\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\"> wasSelected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> press\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> PointerEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">button \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">!==\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ||\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">panning\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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">  wasSelected \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">wasSelected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shape\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey\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:#0969DA;--shiki-dark:#7CC4FF\"> click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> MouseEvent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">panning\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:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">event\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shiftKey\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shape\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:#1F8A5B;--shiki-dark:#42B883\">  else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">wasSelected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> false\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F\u002F Tabbing onto a layer selects it, so the keyboard can nudge it, align it or delete it.\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\"> focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ()\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">selected\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shape\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:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> hover\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\">on\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> =>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">  if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">on \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> status\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'idle'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\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\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shape\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:#1F8A5B;--shiki-dark:#42B883\">  else\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">on \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\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\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shape\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">id\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">hovered\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> null\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\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\">\"el\"\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\">\"shape\"\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\">\"[shape.kind, { moving }]\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"style\"\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\">\"`${shape.name}${selected ? ', selected' : ''}`\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    data-layer\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @pointerdown\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"press\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"click\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @focus\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"focus\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @pointerenter\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hover(true)\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">    @pointerleave\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"hover(false)\"\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\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"shape.kind === 'text'\"\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\">\"words\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ shape.content }}\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\">    <ImageArt\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-else-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shape\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">image\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\">art\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\">shape\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shape\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  user-select\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shape\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 3\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  line-height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1.35\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pre-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow-wrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> anywhere\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">words\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  overflow\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">moving\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2305,"lang":2233,"code":2306,"html":2307},"Toolbar.vue","\u003Cscript setup lang=\"ts\">\nimport { inject } from 'vue';\nimport InsertTool from '.\u002FInsertTool.vue';\nimport ToolButton from '.\u002FToolButton.vue';\nimport type { LayerKind } from '.\u002Fdesign';\nimport { EDITOR, MOD } from '.\u002Feditor';\n\ndefineProps\u003C{ panelsOpen: boolean }>();\ndefineEmits\u003C{ togglePanels: [] }>();\n\nconst editor = inject(EDITOR)!;\nconst { tool, canUndo, canRedo } = editor;\n\nconst INSERTS: { kind: LayerKind; shortcut: string }[] = [\n  { kind: 'frame', shortcut: 'F' },\n  { kind: 'rect', shortcut: 'R' },\n  { kind: 'ellipse', shortcut: 'O' },\n  { kind: 'text', shortcut: 'T' },\n  { kind: 'image', shortcut: 'I' },\n];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"toolbar\">\n    \u003C!-- On a phone the hand is the only way to pan: it toggles, and the move tool steps aside. -->\n    \u003Cdiv class=\"group\">\n      \u003CToolButton class=\"move-tool\" icon=\"move\" label=\"Move\" shortcut=\"V\" :pressed=\"tool === 'move'\" @click=\"tool = 'move'\" \u002F>\n      \u003CToolButton\n        icon=\"hand\"\n        label=\"Hand\"\n        shortcut=\"H · Space\"\n        :pressed=\"tool === 'hand'\"\n        @click=\"tool = tool === 'hand' ? 'move' : 'hand'\"\n      \u002F>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"divider\" \u002F>\n    \u003Cdiv class=\"group\" role=\"group\" aria-label=\"Add a layer\">\n      \u003CInsertTool v-for=\"insert in INSERTS\" :key=\"insert.kind\" :kind=\"insert.kind\" :shortcut=\"insert.shortcut\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cspan class=\"spacer\" \u002F>\n    \u003Cdiv class=\"group\">\n      \u003CToolButton icon=\"undo\" label=\"Undo\" :shortcut=\"`${MOD} Z`\" :disabled=\"!canUndo\" @click=\"editor.undo()\" \u002F>\n      \u003CToolButton icon=\"redo\" label=\"Redo\" :shortcut=\"`${MOD} Shift Z`\" :disabled=\"!canRedo\" @click=\"editor.redo()\" \u002F>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"group panels-toggle\">\n      \u003CToolButton icon=\"panels\" label=\"Layers and design\" :pressed=\"panelsOpen\" :aria-expanded=\"panelsOpen\" @click=\"$emit('togglePanels')\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  height: 44px;\n  padding: 0 8px;\n  border-bottom: 1px solid var(--dc-line);\n  background: var(--dc-panel);\n}\n\n.group {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n}\n\n.divider {\n  flex: none;\n  width: 1px;\n  height: 18px;\n  background: var(--dc-line);\n}\n\n.spacer {\n  flex: 1;\n}\n\n\u002F* The panels open as a drawer only where they don't fit next to the canvas. *\u002F\n.panels-toggle {\n  display: none;\n}\n\n@container editor (max-width: 599px) {\n  .toolbar {\n    gap: 2px;\n    padding: 0 4px;\n  }\n\n  .move-tool,\n  .divider {\n    display: none;\n  }\n\n  .panels-toggle {\n    display: flex;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject \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:#27272A;--shiki-dark:#E4E4E7\"> InsertTool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FInsertTool.vue'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> ToolButton \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FToolButton.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\"> LayerKind \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\"> '.\u002Fdesign'\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\"> EDITOR\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> MOD \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\"> '.\u002Feditor'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">defineProps\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> panelsOpen\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">defineEmits\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><{\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> togglePanels\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> []\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }>();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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\"> tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> canUndo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> canRedo \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\"> editor\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\"> INSERTS\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\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> LayerKind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }[]\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> =\u003C\u002Fspan>\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\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'frame'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'F'\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\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'rect'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'R'\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\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'ellipse'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'O'\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\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'text'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shortcut\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>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> kind\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'image'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'I'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">];\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"toolbar\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\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\">    <!-- On a phone the hand is the only way to pan: it toggles, and the move tool steps aside. -->\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\">\"group\"\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\">      <ToolButton\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\">\"move-tool\"\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\">\"move\"\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\">\"Move\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"V\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pressed\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\">tool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'move'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> @\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'move'\"\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\">      <ToolButton\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\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\">\"hand\"\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\">\"Hand\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">        shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"H · Space\"\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\">pressed\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\">tool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'hand'\"\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\">click\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\">tool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'hand'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'move'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'hand'\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <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\">\"divider\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <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\">\"group\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> role\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"group\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"Add a layer\"\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\">      <InsertTool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-for\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">insert \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">in\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> INSERTS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">key\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">insert\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\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\">kind\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\">insert\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">kind\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\">shortcut\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\">insert\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <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\">\"spacer\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <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\">\"group\"\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\">      <ToolButton\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\">\"undo\"\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\">\"Undo\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shortcut\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\">MOD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> Z`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\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\">canUndo\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\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">undo\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">      <ToolButton\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\">\"redo\"\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\">\"Redo\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">shortcut\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\">MOD\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> Shift Z`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\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\">canRedo\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\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">redo\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <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\">\"group panels-toggle\"\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\">      <ToolButton\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\">\"panels\"\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\">\"Layers and design\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">pressed\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\">panelsOpen\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\">aria-expanded\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\">panelsOpen\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\">click\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">$emit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'togglePanels'\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\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">toolbar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 44\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-panel\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">group\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">divider\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 18\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-line\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">spacer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The panels open as a drawer only where they don't fit next to the canvas. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">panels-toggle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">container\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor (max-width: 599px) \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\">toolbar\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">move-tool\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\">divider\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">panels-toggle\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2309,"lang":2233,"code":2310,"html":2311},"ToolButton.vue","\u003Cscript setup lang=\"ts\">\nimport Icon from '.\u002FIcon.vue';\nimport type { IconName } from '.\u002Ficons';\n\n\u002F\u002F A square icon button with a tooltip: its label and shortcut. `pressed` makes it a toggle\n\u002F\u002F (left `undefined`, a plain button: no `aria-pressed`).\nwithDefaults(defineProps\u003C{ icon: IconName; label: string; shortcut?: string; pressed?: boolean; tip?: 'above' | 'below' }>(), {\n  shortcut: undefined,\n  pressed: undefined,\n  tip: 'below',\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton type=\"button\" class=\"tool-button\" :class=\"tip\" :aria-label=\"label\" :aria-pressed=\"pressed\">\n    \u003CIcon :name=\"icon\" \u002F>\n    \u003Cspan class=\"tip\" aria-hidden=\"true\">\n      {{ label }}\u003Ckbd v-if=\"shortcut\">{{ shortcut }}\u003C\u002Fkbd>\n    \u003C\u002Fspan>\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.tool-button {\n  position: relative;\n  display: grid;\n  flex: none;\n  place-items: center;\n  width: 30px;\n  height: 30px;\n  padding: 0;\n  border: 0;\n  border-radius: 7px;\n  background: none;\n  color: inherit;\n  cursor: pointer;\n  transition:\n    background-color 0.15s,\n    color 0.15s,\n    transform 0.1s;\n}\n\n@media (hover: hover) {\n  .tool-button:hover:not(:disabled) {\n    background: var(--dc-hover);\n  }\n}\n\n.tool-button:active:not(:disabled) {\n  transform: scale(0.92);\n}\n\n.tool-button:focus-visible {\n  outline: 2px solid var(--dc-accent);\n  outline-offset: 1px;\n}\n\n.tool-button:disabled {\n  opacity: 0.35;\n  cursor: default;\n}\n\n.tool-button[aria-pressed='true'],\n.tool-button[aria-pressed='true']:hover {\n  background: var(--dc-accent);\n  color: #fff;\n}\n\n\u002F* The tooltip: after a short wait on hover, at once for the keyboard. *\u002F\n.tip {\n  position: absolute;\n  left: 50%;\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 7px;\n  border-radius: 6px;\n  background: #1e1e1e;\n  color: #fff;\n  font-size: 11px;\n  font-weight: 500;\n  white-space: nowrap;\n  opacity: 0;\n  pointer-events: none;\n  transform: translate(-50%, 2px);\n  transition:\n    opacity 0.12s,\n    transform 0.12s;\n}\n\n.below .tip {\n  top: calc(100% + 6px);\n}\n\n.above .tip {\n  bottom: calc(100% + 6px);\n  transform: translate(-50%, -2px);\n}\n\n\u002F* The first and the last button of a group keep their tooltip inside the editor. *\u002F\n.tool-button:first-child .tip {\n  left: 0;\n  transform: translate(0, 2px);\n}\n\n.tool-button:last-child .tip {\n  right: 0;\n  left: auto;\n  transform: translate(0, 2px);\n}\n\n\u002F* Only where there is a hover: a tap would leave it showing. *\u002F\n@media (hover: hover) {\n  .tool-button:hover .tip {\n    opacity: 1;\n    transform: translate(-50%, 0);\n    transition-delay: 0.45s;\n  }\n}\n\n.tool-button:focus-visible .tip {\n  opacity: 1;\n  transform: translate(-50%, 0);\n}\n\n.tool-button:first-child:hover .tip,\n.tool-button:first-child:focus-visible .tip,\n.tool-button:last-child:hover .tip,\n.tool-button:last-child:focus-visible .tip {\n  transform: none;\n}\n\n\u002F* No tooltips over a drag. *\u002F\nhtml[data-dnd-dragging] .tip {\n  visibility: hidden;\n}\n\nkbd {\n  font: inherit;\n  opacity: 0.55;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tool-button,\n  .tip {\n    transition: none;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> Icon \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '.\u002FIcon.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\"> IconName \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\"> '.\u002Ficons'\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 A square icon button with a tooltip: its label and shortcut. `pressed` makes it a toggle\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 (left `undefined`, a plain button: no `aria-pressed`).\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">withDefaults\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\"> icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> IconName\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> string\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> boolean\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'above'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> |\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'below'\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\">  shortcut\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\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\">  pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> undefined\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\">  tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'below'\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>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> type\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tool-button\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tip\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"label\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"pressed\"\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\">    <Icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> :\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">name\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">icon\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <span\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"tip\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> aria-hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"true\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">      {{ label }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><kbd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"shortcut\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">{{ shortcut }}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fkbd>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">    <\u002Fspan>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fbutton>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> grid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  place-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 30\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    background-color \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">    color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.15\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    transform \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> hover\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\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">not\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">not\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> scale\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.92\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-accent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline-offset\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">disabled\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.35\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  cursor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'true'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">aria-pressed\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">'true'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">]:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> var\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">--dc-accent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The tooltip: after a short wait on hover, at once for the keyboard. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  z-index\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:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  gap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  padding\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 4\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 7\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">1e1e1e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">fff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-size\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 11\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font-weight\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 500\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  pointer-events\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">-50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    opacity \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">    transform \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.12\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">below\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">above\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  bottom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> calc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> +\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">-50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* The first and the last button of a group keep their tooltip inside the editor. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">first-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">last-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  right\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> auto\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 2\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* Only where there is a hover: a tap would leave it showing. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> hover\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\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">-50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transition-delay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.45\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">-50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">first-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\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\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">first-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\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\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">last-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hover\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\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\">tool-button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">last-child\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">focus-visible\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> .\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F* No tooltips over a drag. *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">html\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">data-dnd-dragging\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\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  visibility\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> hidden\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">kbd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  font\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> inherit\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0.55\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">prefers-reduced-motion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reduce\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\">tool-button\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\">tip\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transition\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":2313,"lang":2233,"code":2314,"html":2315},"ToolGhost.vue","\u003Cscript setup lang=\"ts\">\nimport { computed } from 'vue';\nimport type { Active } from '@vue-dnd-kit\u002Fcore';\nimport { KINDS } from '.\u002Fdesign';\nimport type { ToolData } from '.\u002FuseLayerDrop';\n\n\u002F\u002F A tool from the toolbar in hand: the outline of the layer it adds, at its size on the\n\u002F\u002F canvas, centred on the pointer (the overlay box is the button, held by its centre).\nconst props = defineProps\u003C{ active: Active }>();\n\nconst ghost = computed(() => {\n  const { tool, zoom } = props.active.data as ToolData;\n  const { width, height } = KINDS[tool];\n  return { tool, style: { width: `${width * zoom}px`, height: `${height * zoom}px`, fontSize: `${16 * zoom}px` } };\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"hold\">\n    \u003Cdiv class=\"ghost\" :class=\"`of-${ghost.tool}`\" :style=\"ghost.style\">\n      \u003Ctemplate v-if=\"ghost.tool === 'text'\">Type something\u003C\u002Ftemplate>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.hold {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.ghost {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  outline: 1px solid #0d99ff;\n  background: rgb(217 217 217 \u002F 0.75);\n  color: #1e1e1e;\n  white-space: nowrap;\n  transform: translate(-50%, -50%);\n  animation: appear 0.16s ease-out;\n}\n\n.of-ellipse {\n  border-radius: 50%;\n}\n\n.of-frame {\n  background: rgb(255 255 255 \u002F 0.85);\n}\n\n.of-image {\n  border-radius: 6px;\n  background: rgb(165 180 252 \u002F 0.8);\n}\n\n.of-text {\n  background: none;\n}\n\n@keyframes appear {\n  from {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.85);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ghost {\n    animation: none;\n  }\n}\n\u003C\u002Fstyle>","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> computed \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\"> Active \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> '@vue-dnd-kit\u002Fcore'\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> KINDS \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\"> '.\u002Fdesign'\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\"> ToolData \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\"> '.\u002FuseLayerDrop'\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 A tool from the toolbar in hand: the outline of the layer it adds, at its size on 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 canvas, centred on the pointer (the overlay box is the button, held by its centre).\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\"> 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\"> active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Active\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\"> ghost \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>\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\"> tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> zoom \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\"> props\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">data \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> ToolData\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\"> width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> height \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\"> KINDS\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tool\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\"> tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> width\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\">width \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> height\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\">height \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> fontSize\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:#BC4C00;--shiki-dark:#F4A261\">16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> *\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">px`\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fscript>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><template>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <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\">\"hold\"\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\">\"ghost\"\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\">\"`of-${ghost.tool}`\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> :style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"ghost.style\"\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\">      <template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> v-if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\">\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ghost\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">===\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#9A6700;--shiki-dark:#E9C46A\"> 'text'\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">Type something\u003C\u002Fspan>\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\">    <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">  <\u002Fdiv>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Ftemplate>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> scoped\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">hold\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> relative\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  width\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  height\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 100\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">ghost\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> absolute\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  display\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> flex\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  align-items\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> center\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  box-sizing\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> border-box\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  outline\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> solid\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">0d99ff\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">217\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 217\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 217\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.75\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  color\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> #\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">1e1e1e\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  white-space\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> nowrap\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">-50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  animation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> appear \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.16\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">s\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> ease-out\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">of-ellipse\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">of-frame\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 255\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.85\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">of-image\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  border-radius\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 6\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">px\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> rgb\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">165\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 180\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 252\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> \u002F \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.8\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\">of-text\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">  background\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">keyframes\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> appear\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\">  from \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    opacity\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> 0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    transform\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> translate\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">-50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> -50\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">%\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> scale\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\">0.85\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">@\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">media\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">prefers-reduced-motion\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> reduce\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\">ghost\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">    animation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#BC4C00;--shiki-dark:#F4A261\"> none\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#CF2257;--shiki-dark:#FF7B9C\"><\u002Fstyle>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",{"name":520,"lang":592,"code":2317,"html":2318},"import { inject } from 'vue';\nimport type { DnDEvent } from '@vue-dnd-kit\u002Fcore';\nimport type { Layer, LayerKind } from '.\u002Fdesign';\nimport { EDITOR } from '.\u002Feditor';\n\n\u002F** What a tool of the toolbar carries while it is dragged: the kind of layer it adds. *\u002F\nexport interface ToolData {\n  tool: LayerKind;\n  zoom: number;\n}\n\n\u002F**\n * The canvas and every frame take drops alike. `position` is where the grabbed layer's\n * corner was let go inside the target, in screen pixels: turned into world units, it says\n * how far that layer went, and every dragged layer moves as far, into the frame (or onto\n * the canvas). Alt held leaves them in place and drops copies. A tool from the toolbar\n * adds its layer centred on the drop point.\n *\u002F\nexport function useLayerDrop(frame: () => Layer | null) {\n  const editor = inject(EDITOR)!;\n\n  return ({ active, over, pointer, position }: DnDEvent) => {\n    const target = frame();\n    const { view } = editor;\n    \u002F\u002F The target's corner in the world: the frame's, or whatever the canvas shows at its corner.\n    const corner = target ? editor.boxOf(target) : { x: -view.x \u002F view.zoom, y: -view.y \u002F view.zoom };\n    const toWorld = (x: number, y: number) => ({ x: corner.x + x \u002F view.zoom, y: corner.y + y \u002F view.zoom });\n\n    const { tool } = active.data as Partial\u003CToolData>;\n    if (tool && over) return editor.add(tool, toWorld(pointer.x - over.rect.left, pointer.y - over.rect.top), target);\n\n    const grabbed = editor.find(active.id);\n    if (!grabbed || !position) return;\n    const from = editor.boxOf(grabbed);\n    const to = toWorld(position.x, position.y);\n    editor.move(active.ids, { x: to.x - from.x, y: to.y - from.y }, target, editor.altHeld.value);\n  };\n}","\u003Cpre class=\"shiki shiki-themes dnd-light dnd-dark\" style=\"--shiki-light:#27272a;--shiki-dark:#e4e4e7;--shiki-light-bg:#00000000;--shiki-dark-bg:#00000000\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> inject \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\"> DnDEvent \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\"> Layer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> LayerKind \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\"> '.\u002Fdesign'\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\"> EDITOR \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\"> '.\u002Feditor'\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** What a tool of the toolbar carries while it is dragged: the kind of layer it adds. *\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\"> interface\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> ToolData\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\">  tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> LayerKind\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\">  zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> number\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\">\u002F**\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 canvas and every frame take drops alike. `position` is where the grabbed layer'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\"> * corner was let go inside the target, in screen pixels: turned into world units, it says\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\"> * how far that layer went, and every dragged layer moves as far, into the frame (or onto\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 canvas). Alt held leaves them in place and drops copies. A tool from the toolbar\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\"> * adds its layer centred on the drop point.\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#85858D;--shiki-light-font-style:italic;--shiki-dark:#6E6E78;--shiki-dark-font-style:italic\"> *\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> useLayerDrop\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">frame\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:#0F766E;--shiki-dark:#7EE0C0\"> Layer\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:#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\"> editor \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> inject\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">EDITOR\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\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> ({\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> }:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> DnDEvent\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\"> target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> frame\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\"> view \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\"> editor\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 target's corner in the world: the frame's, or whatever the canvas shows at its corner.\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\"> corner \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">?\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">target\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:#7C4DCC;--shiki-dark:#C3A6FF\"> x\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\">view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\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\">view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom \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\"> toWorld\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\">x\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:#7C4DCC;--shiki-dark:#C3A6FF\"> y\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>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> corner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> corner\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">+\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> view\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">zoom \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:#5B5B63;--shiki-dark:#9F9FA9\"> {\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> tool \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\"> active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">data \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">as\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\"> Partial\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0F766E;--shiki-dark:#7EE0C0\">ToolData\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">>;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tool \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">&&\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">add\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">tool\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> toWorld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">rect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">left\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> pointer\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> over\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">rect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">top\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">),\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target\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\"> grabbed \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">find\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#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:#1F8A5B;--shiki-dark:#42B883\">    if\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\"> (!\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">grabbed \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\">position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\"> return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#1F8A5B;--shiki-dark:#42B883\">    const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">boxOf\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">grabbed\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\"> to \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\"> toWorld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> position\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y\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\">    editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0969DA;--shiki-dark:#7CC4FF\">move\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">(\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">active\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">ids\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\"> x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">x\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#7C4DCC;--shiki-dark:#C3A6FF\"> y\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">:\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> to\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">-\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">y \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">},\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> target\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">,\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\"> editor\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">altHeld\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#27272A;--shiki-dark:#E4E4E7\">value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#5B5B63;--shiki-dark:#9F9FA9\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#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>",1793707565857]