[{"data":1,"prerenderedAt":6616},["ShallowReactive",2],{"navigation_docs":3,"-components-interactive-drag-and-drop":1538,"-components-interactive-drag-and-drop-surround":6611},[4,36,43,1322,1345,1352,1507,1531],{"title":5,"path":6,"stem":7,"children":8,"icon":35},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,11,15,19,23,27,31],{"title":10,"path":6,"stem":7},"Introduction",{"title":12,"path":13,"stem":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":16,"path":17,"stem":18},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage",{"title":20,"path":21,"stem":22},"Theming","\u002Fgetting-started\u002Ftheming","1.getting-started\u002F4.theming",{"title":24,"path":25,"stem":26},"AI Agents","\u002Fgetting-started\u002Fai-agents","1.getting-started\u002F5.ai-agents",{"title":28,"path":29,"stem":30},"Vue + Vite","\u002Fgetting-started\u002Fvue","1.getting-started\u002F7.vue",{"title":32,"path":33,"stem":34},"Laravel","\u002Fgetting-started\u002Flaravel","1.getting-started\u002F8.laravel","i-lucide-rocket",{"title":37,"path":38,"stem":39,"children":40,"icon":42},"Core Concepts","\u002Fcore-concepts","2.core-concepts\u002Findex",[41],{"title":37,"path":38,"stem":39},"i-lucide-lightbulb",{"title":44,"icon":45,"path":46,"stem":47,"children":48},"Components","i-lucide-component","\u002Fcomponents","3.components",[49,51,70,160,274,332,454,472,486,620,710,896,926,956,990,1024,1062,1292],{"title":44,"path":46,"stem":50},"3.components\u002Findex",{"title":52,"icon":53,"path":54,"stem":55,"children":56,"page":69},"3D","i-lucide-box","\u002Fcomponents\u002F3d","3.components\u002F3d",[57,61,65],{"title":58,"path":59,"stem":60},"3D Card","\u002Fcomponents\u002F3d\u002F3d-card","3.components\u002F3d\u002F3d-card",{"title":62,"path":63,"stem":64},"Book","\u002Fcomponents\u002F3d\u002Fbook","3.components\u002F3d\u002Fbook",{"title":66,"path":67,"stem":68},"Globe","\u002Fcomponents\u002F3d\u002Fglobe","3.components\u002F3d\u002Fglobe",false,{"title":71,"icon":72,"path":73,"stem":74,"children":75,"page":69},"AI","i-lucide-sparkles","\u002Fcomponents\u002Fai","3.components\u002Fai",[76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156],{"title":77,"path":78,"stem":79},"Agent Avatar","\u002Fcomponents\u002Fai\u002Fagent-avatar","3.components\u002Fai\u002Fagent-avatar",{"title":81,"path":82,"stem":83},"AI Approval","\u002Fcomponents\u002Fai\u002Fai-approval","3.components\u002Fai\u002Fai-approval",{"title":85,"path":86,"stem":87},"AI Artifact","\u002Fcomponents\u002Fai\u002Fai-artifact","3.components\u002Fai\u002Fai-artifact",{"title":89,"path":90,"stem":91},"AI Branch","\u002Fcomponents\u002Fai\u002Fai-branch","3.components\u002Fai\u002Fai-branch",{"title":93,"path":94,"stem":95},"AI Citation","\u002Fcomponents\u002Fai\u002Fai-citation","3.components\u002Fai\u002Fai-citation",{"title":97,"path":98,"stem":99},"AI Context Meter","\u002Fcomponents\u002Fai\u002Fai-context-meter","3.components\u002Fai\u002Fai-context-meter",{"title":101,"path":102,"stem":103},"AI Conversation","\u002Fcomponents\u002Fai\u002Fai-conversation","3.components\u002Fai\u002Fai-conversation",{"title":105,"path":106,"stem":107},"AI Diff","\u002Fcomponents\u002Fai\u002Fai-diff","3.components\u002Fai\u002Fai-diff",{"title":109,"path":110,"stem":111},"AI Message","\u002Fcomponents\u002Fai\u002Fai-message","3.components\u002Fai\u002Fai-message",{"title":113,"path":114,"stem":115},"AI Messages","\u002Fcomponents\u002Fai\u002Fai-messages","3.components\u002Fai\u002Fai-messages",{"title":117,"path":118,"stem":119},"AI Orb","\u002Fcomponents\u002Fai\u002Fai-orb","3.components\u002Fai\u002Fai-orb",{"title":121,"path":122,"stem":123},"AI Orb Face","\u002Fcomponents\u002Fai\u002Fai-orb-face","3.components\u002Fai\u002Fai-orb-face",{"title":125,"path":126,"stem":127},"AI Orb Face Mouth","\u002Fcomponents\u002Fai\u002Fai-orb-face-mouth","3.components\u002Fai\u002Fai-orb-face-mouth",{"title":129,"path":130,"stem":131},"AI Prompt Input","\u002Fcomponents\u002Fai\u002Fai-prompt-input","3.components\u002Fai\u002Fai-prompt-input",{"title":133,"path":134,"stem":135},"AI Reasoning","\u002Fcomponents\u002Fai\u002Fai-reasoning","3.components\u002Fai\u002Fai-reasoning",{"title":137,"path":138,"stem":139},"AI Response","\u002Fcomponents\u002Fai\u002Fai-response","3.components\u002Fai\u002Fai-response",{"title":141,"path":142,"stem":143},"AI Sources","\u002Fcomponents\u002Fai\u002Fai-sources","3.components\u002Fai\u002Fai-sources",{"title":145,"path":146,"stem":147},"AI Suggestions","\u002Fcomponents\u002Fai\u002Fai-suggestions","3.components\u002Fai\u002Fai-suggestions",{"title":149,"path":150,"stem":151},"AI Task List","\u002Fcomponents\u002Fai\u002Fai-task-list","3.components\u002Fai\u002Fai-task-list",{"title":153,"path":154,"stem":155},"AI Tool Call","\u002Fcomponents\u002Fai\u002Fai-tool-call","3.components\u002Fai\u002Fai-tool-call",{"title":157,"path":158,"stem":159},"Image Generation Panel","\u002Fcomponents\u002Fai\u002Fimage-generation-panel","3.components\u002Fai\u002Fimage-generation-panel",{"title":161,"icon":162,"path":163,"stem":164,"children":165,"page":69},"Backgrounds","i-lucide-layers","\u002Fcomponents\u002Fbackgrounds","3.components\u002Fbackgrounds",[166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270],{"title":167,"path":168,"stem":169},"Animated Background","\u002Fcomponents\u002Fbackgrounds\u002Fanimated-background","3.components\u002Fbackgrounds\u002Fanimated-background",{"title":171,"path":172,"stem":173},"Animated Grid Pattern","\u002Fcomponents\u002Fbackgrounds\u002Fanimated-grid-pattern","3.components\u002Fbackgrounds\u002Fanimated-grid-pattern",{"title":175,"path":176,"stem":177},"Animated Spotlight","\u002Fcomponents\u002Fbackgrounds\u002Fanimated-spotlight","3.components\u002Fbackgrounds\u002Fanimated-spotlight",{"title":179,"path":180,"stem":181},"Aurora Background","\u002Fcomponents\u002Fbackgrounds\u002Faurora-background","3.components\u002Fbackgrounds\u002Faurora-background",{"title":183,"path":184,"stem":185},"Aurora Curtain","\u002Fcomponents\u002Fbackgrounds\u002Faurora-curtain","3.components\u002Fbackgrounds\u002Faurora-curtain",{"title":187,"path":188,"stem":189},"Background Beams","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-beams","3.components\u002Fbackgrounds\u002Fbackground-beams",{"title":191,"path":192,"stem":193},"Background Gradient Animation","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-gradient-animation","3.components\u002Fbackgrounds\u002Fbackground-gradient-animation",{"title":195,"path":196,"stem":197},"Background Lines","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-lines","3.components\u002Fbackgrounds\u002Fbackground-lines",{"title":199,"path":200,"stem":201},"Background Ripple Effect","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-ripple-effect","3.components\u002Fbackgrounds\u002Fbackground-ripple-effect",{"title":203,"path":204,"stem":205},"Boxes Core","\u002Fcomponents\u002Fbackgrounds\u002Fboxes-core","3.components\u002Fbackgrounds\u002Fboxes-core",{"title":207,"path":208,"stem":209},"Directional Light","\u002Fcomponents\u002Fbackgrounds\u002Fdirectional-light","3.components\u002Fbackgrounds\u002Fdirectional-light",{"title":211,"path":212,"stem":213},"Dotted Glow Background","\u002Fcomponents\u002Fbackgrounds\u002Fdotted-glow-background","3.components\u002Fbackgrounds\u002Fdotted-glow-background",{"title":215,"path":216,"stem":217},"Dotted Map","\u002Fcomponents\u002Fbackgrounds\u002Fdotted-map","3.components\u002Fbackgrounds\u002Fdotted-map",{"title":219,"path":220,"stem":221},"Flickering Grid","\u002Fcomponents\u002Fbackgrounds\u002Fflickering-grid","3.components\u002Fbackgrounds\u002Fflickering-grid",{"title":223,"path":224,"stem":225},"Hexagon Pattern","\u002Fcomponents\u002Fbackgrounds\u002Fhexagon-pattern","3.components\u002Fbackgrounds\u002Fhexagon-pattern",{"title":227,"path":228,"stem":229},"Interactive Grid Pattern","\u002Fcomponents\u002Fbackgrounds\u002Finteractive-grid-pattern","3.components\u002Fbackgrounds\u002Finteractive-grid-pattern",{"title":231,"path":232,"stem":233},"Lamp Container","\u002Fcomponents\u002Fbackgrounds\u002Flamp-container","3.components\u002Fbackgrounds\u002Flamp-container",{"title":235,"path":236,"stem":237},"Light Rays","\u002Fcomponents\u002Fbackgrounds\u002Flight-rays","3.components\u002Fbackgrounds\u002Flight-rays",{"title":239,"path":240,"stem":241},"Meteors","\u002Fcomponents\u002Fbackgrounds\u002Fmeteors","3.components\u002Fbackgrounds\u002Fmeteors",{"title":243,"path":244,"stem":245},"Noise Texture","\u002Fcomponents\u002Fbackgrounds\u002Fnoise-texture","3.components\u002Fbackgrounds\u002Fnoise-texture",{"title":247,"path":248,"stem":249},"Particles","\u002Fcomponents\u002Fbackgrounds\u002Fparticles","3.components\u002Fbackgrounds\u002Fparticles",{"title":251,"path":252,"stem":253},"Retro Grid","\u002Fcomponents\u002Fbackgrounds\u002Fretro-grid","3.components\u002Fbackgrounds\u002Fretro-grid",{"title":255,"path":256,"stem":257},"Shooting Stars","\u002Fcomponents\u002Fbackgrounds\u002Fshooting-stars","3.components\u002Fbackgrounds\u002Fshooting-stars",{"title":259,"path":260,"stem":261},"Stars Background","\u002Fcomponents\u002Fbackgrounds\u002Fstars-background","3.components\u002Fbackgrounds\u002Fstars-background",{"title":263,"path":264,"stem":265},"Striped Pattern","\u002Fcomponents\u002Fbackgrounds\u002Fstriped-pattern","3.components\u002Fbackgrounds\u002Fstriped-pattern",{"title":267,"path":268,"stem":269},"Vortex","\u002Fcomponents\u002Fbackgrounds\u002Fvortex","3.components\u002Fbackgrounds\u002Fvortex",{"title":271,"path":272,"stem":273},"Warp Background","\u002Fcomponents\u002Fbackgrounds\u002Fwarp-background","3.components\u002Fbackgrounds\u002Fwarp-background",{"title":275,"icon":276,"path":277,"stem":278,"children":279,"page":69},"Buttons","i-lucide-mouse-pointer-click","\u002Fcomponents\u002Fbuttons","3.components\u002Fbuttons",[280,284,288,292,296,300,304,308,312,316,320,324,328],{"title":281,"path":282,"stem":283},"Button Copy","\u002Fcomponents\u002Fbuttons\u002Fbutton-copy","3.components\u002Fbuttons\u002Fbutton-copy",{"title":285,"path":286,"stem":287},"Clip Corners Button","\u002Fcomponents\u002Fbuttons\u002Fclip-corners-button","3.components\u002Fbuttons\u002Fclip-corners-button",{"title":289,"path":290,"stem":291},"Dot Morph Button","\u002Fcomponents\u002Fbuttons\u002Fdot-morph-button","3.components\u002Fbuttons\u002Fdot-morph-button",{"title":293,"path":294,"stem":295},"Interactive Hover Button","\u002Fcomponents\u002Fbuttons\u002Finteractive-hover-button","3.components\u002Fbuttons\u002Finteractive-hover-button",{"title":297,"path":298,"stem":299},"Magnetic Button","\u002Fcomponents\u002Fbuttons\u002Fmagnetic-button","3.components\u002Fbuttons\u002Fmagnetic-button",{"title":301,"path":302,"stem":303},"Music Toggle","\u002Fcomponents\u002Fbuttons\u002Fmusic-toggle","3.components\u002Fbuttons\u002Fmusic-toggle",{"title":305,"path":306,"stem":307},"Pulsating Button","\u002Fcomponents\u002Fbuttons\u002Fpulsating-button","3.components\u002Fbuttons\u002Fpulsating-button",{"title":309,"path":310,"stem":311},"Rainbow Button","\u002Fcomponents\u002Fbuttons\u002Frainbow-button","3.components\u002Fbuttons\u002Frainbow-button",{"title":313,"path":314,"stem":315},"Ripple Button","\u002Fcomponents\u002Fbuttons\u002Fripple-button","3.components\u002Fbuttons\u002Fripple-button",{"title":317,"path":318,"stem":319},"Shimmer Button","\u002Fcomponents\u002Fbuttons\u002Fshimmer-button","3.components\u002Fbuttons\u002Fshimmer-button",{"title":321,"path":322,"stem":323},"Shiny Button","\u002Fcomponents\u002Fbuttons\u002Fshiny-button","3.components\u002Fbuttons\u002Fshiny-button",{"title":325,"path":326,"stem":327},"Smooth Button","\u002Fcomponents\u002Fbuttons\u002Fsmooth-button","3.components\u002Fbuttons\u002Fsmooth-button",{"title":329,"path":330,"stem":331},"Theme Toggle","\u002Fcomponents\u002Fbuttons\u002Ftheme-toggle","3.components\u002Fbuttons\u002Ftheme-toggle",{"title":333,"icon":334,"path":335,"stem":336,"children":337,"page":69},"Cards","i-lucide-layout-panel-top","\u002Fcomponents\u002Fcards","3.components\u002Fcards",[338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450],{"title":339,"path":340,"stem":341},"App Download Stack","\u002Fcomponents\u002Fcards\u002Fapp-download-stack","3.components\u002Fcards\u002Fapp-download-stack",{"title":343,"path":344,"stem":345},"Apple Invites","\u002Fcomponents\u002Fcards\u002Fapple-invites","3.components\u002Fcards\u002Fapple-invites",{"title":347,"path":348,"stem":349},"Bento Grid","\u002Fcomponents\u002Fcards\u002Fbento-grid","3.components\u002Fcards\u002Fbento-grid",{"title":351,"path":352,"stem":353},"Stacked Cards","\u002Fcomponents\u002Fcards\u002Fcard-stack","3.components\u002Fcards\u002Fcard-stack",{"title":355,"path":356,"stem":357},"Card Swipe Deck","\u002Fcomponents\u002Fcards\u002Fcard-swipe-deck","3.components\u002Fcards\u002Fcard-swipe-deck",{"title":359,"path":360,"stem":361},"Draggable Card","\u002Fcomponents\u002Fcards\u002Fdraggable-card","3.components\u002Fcards\u002Fdraggable-card",{"title":363,"path":364,"stem":365},"Evervault Card","\u002Fcomponents\u002Fcards\u002Fever-vault-card","3.components\u002Fcards\u002Fever-vault-card",{"title":367,"path":368,"stem":369},"Expandable Cards","\u002Fcomponents\u002Fcards\u002Fexpandable-cards","3.components\u002Fcards\u002Fexpandable-cards",{"title":371,"path":372,"stem":373},"Figma Comment","\u002Fcomponents\u002Fcards\u002Ffigma-comment","3.components\u002Fcards\u002Ffigma-comment",{"title":375,"path":376,"stem":377},"Focus Cards","\u002Fcomponents\u002Fcards\u002Ffocus-cards","3.components\u002Fcards\u002Ffocus-cards",{"title":379,"path":380,"stem":381},"Glare Card","\u002Fcomponents\u002Fcards\u002Fglare-card","3.components\u002Fcards\u002Fglare-card",{"title":383,"path":384,"stem":385},"Glass Card","\u002Fcomponents\u002Fcards\u002Fglass-card","3.components\u002Fcards\u002Fglass-card",{"title":387,"path":388,"stem":389},"Glass Panel","\u002Fcomponents\u002Fcards\u002Fglass-panel","3.components\u002Fcards\u002Fglass-panel",{"title":391,"path":392,"stem":393},"Glow Hover Cards","\u002Fcomponents\u002Fcards\u002Fglow-hover-cards","3.components\u002Fcards\u002Fglow-hover-cards",{"title":395,"path":396,"stem":397},"Glowing Stars Card","\u002Fcomponents\u002Fcards\u002Fglowing-stars-card","3.components\u002Fcards\u002Fglowing-stars-card",{"title":399,"path":400,"stem":401},"Mac Terminal","\u002Fcomponents\u002Fcards\u002Fmac-terminal","3.components\u002Fcards\u002Fmac-terminal",{"title":403,"path":404,"stem":405},"Magic Card","\u002Fcomponents\u002Fcards\u002Fmagic-card","3.components\u002Fcards\u002Fmagic-card",{"title":407,"path":408,"stem":409},"Mail Card","\u002Fcomponents\u002Fcards\u002Fmail-card","3.components\u002Fcards\u002Fmail-card",{"title":411,"path":412,"stem":413},"Photo Stack","\u002Fcomponents\u002Fcards\u002Fphoto-stack","3.components\u002Fcards\u002Fphoto-stack",{"title":415,"path":416,"stem":417},"Price Flow","\u002Fcomponents\u002Fcards\u002Fprice-flow","3.components\u002Fcards\u002Fprice-flow",{"title":419,"path":420,"stem":421},"Product Card","\u002Fcomponents\u002Fcards\u002Fproduct-card","3.components\u002Fcards\u002Fproduct-card",{"title":423,"path":424,"stem":425},"Scrollable Card Stack","\u002Fcomponents\u002Fcards\u002Fscrollable-card-stack","3.components\u002Fcards\u002Fscrollable-card-stack",{"title":427,"path":428,"stem":429},"Shine Border","\u002Fcomponents\u002Fcards\u002Fshine-border","3.components\u002Fcards\u002Fshine-border",{"title":431,"path":432,"stem":433},"Social Hover Card","\u002Fcomponents\u002Fcards\u002Fsocial-hover-card","3.components\u002Fcards\u002Fsocial-hover-card",{"title":435,"path":436,"stem":437},"Switchboard Card","\u002Fcomponents\u002Fcards\u002Fswitchboard-card","3.components\u002Fcards\u002Fswitchboard-card",{"title":439,"path":440,"stem":441},"Tilt Card","\u002Fcomponents\u002Fcards\u002Ftilt-card","3.components\u002Fcards\u002Ftilt-card",{"title":443,"path":444,"stem":445},"Tweet Card","\u002Fcomponents\u002Fcards\u002Ftweet-card","3.components\u002Fcards\u002Ftweet-card",{"title":447,"path":448,"stem":449},"Wallet Card","\u002Fcomponents\u002Fcards\u002Fwallet-card","3.components\u002Fcards\u002Fwallet-card",{"title":451,"path":452,"stem":453},"Wobble Card","\u002Fcomponents\u002Fcards\u002Fwobble-card","3.components\u002Fcards\u002Fwobble-card",{"title":455,"icon":456,"path":457,"stem":458,"children":459,"page":69},"Carousels","i-lucide-gallery-horizontal-end","\u002Fcomponents\u002Fcarousels","3.components\u002Fcarousels",[460,464,468],{"title":461,"path":462,"stem":463},"Carousel","\u002Fcomponents\u002Fcarousels\u002Fcarousel","3.components\u002Fcarousels\u002Fcarousel",{"title":465,"path":466,"stem":467},"Coverflow Carousel","\u002Fcomponents\u002Fcarousels\u002Fcoverflow-carousel","3.components\u002Fcarousels\u002Fcoverflow-carousel",{"title":469,"path":470,"stem":471},"Reviews Carousel","\u002Fcomponents\u002Fcarousels\u002Freviews-carousel","3.components\u002Fcarousels\u002Freviews-carousel",{"title":473,"icon":474,"path":475,"stem":476,"children":477,"page":69},"Directional","i-lucide-move-3d","\u002Fcomponents\u002Fdirectional","3.components\u002Fdirectional",[478,482],{"title":479,"path":480,"stem":481},"Direction Aware Hover","\u002Fcomponents\u002Fdirectional\u002Fdirection-aware-hover","3.components\u002Fdirectional\u002Fdirection-aware-hover",{"title":483,"path":484,"stem":485},"Direction Aware Hover New","\u002Fcomponents\u002Fdirectional\u002Fdirection-aware-hover-new","3.components\u002Fdirectional\u002Fdirection-aware-hover-new",{"title":487,"icon":488,"path":489,"stem":490,"children":491,"page":69},"Visual Effects","i-lucide-wand-sparkles","\u002Fcomponents\u002Feffects","3.components\u002Feffects",[492,496,500,504,508,512,516,520,524,528,532,536,540,544,548,552,556,560,564,568,572,576,580,584,588,592,596,600,604,608,612,616],{"title":493,"path":494,"stem":495},"Animated Beam","\u002Fcomponents\u002Feffects\u002Fanimated-beam","3.components\u002Feffects\u002Fanimated-beam",{"title":497,"path":498,"stem":499},"Arcade Pixel","\u002Fcomponents\u002Feffects\u002Farcade-pixel","3.components\u002Feffects\u002Farcade-pixel",{"title":501,"path":502,"stem":503},"ASCII Render","\u002Fcomponents\u002Feffects\u002Fascii-render","3.components\u002Feffects\u002Fascii-render",{"title":505,"path":506,"stem":507},"Border Beam","\u002Fcomponents\u002Feffects\u002Fborder-beam","3.components\u002Feffects\u002Fborder-beam",{"title":509,"path":510,"stem":511},"Border Trail","\u002Fcomponents\u002Feffects\u002Fborder-trail","3.components\u002Feffects\u002Fborder-trail",{"title":513,"path":514,"stem":515},"Confetti","\u002Fcomponents\u002Feffects\u002Fconfetti","3.components\u002Feffects\u002Fconfetti",{"title":517,"path":518,"stem":519},"Dither Chart","\u002Fcomponents\u002Feffects\u002Fdither-chart","3.components\u002Feffects\u002Fdither-chart",{"title":521,"path":522,"stem":523},"Dither Image","\u002Fcomponents\u002Feffects\u002Fdither-image","3.components\u002Feffects\u002Fdither-image",{"title":525,"path":526,"stem":527},"Div Grid","\u002Fcomponents\u002Feffects\u002Fdiv-grid","3.components\u002Feffects\u002Fdiv-grid",{"title":529,"path":530,"stem":531},"Drawing Cursor","\u002Fcomponents\u002Feffects\u002Fdrawing-cursor","3.components\u002Feffects\u002Fdrawing-cursor",{"title":533,"path":534,"stem":535},"Emboss Surface","\u002Fcomponents\u002Feffects\u002Femboss-surface","3.components\u002Feffects\u002Femboss-surface",{"title":537,"path":538,"stem":539},"Brightness slider","\u002Fcomponents\u002Feffects\u002Fexposure-slider","3.components\u002Feffects\u002Fexposure-slider",{"title":541,"path":542,"stem":543},"Flowing Stroke","\u002Fcomponents\u002Feffects\u002Fflowing-stroke","3.components\u002Feffects\u002Fflowing-stroke",{"title":545,"path":546,"stem":547},"Glow Effect","\u002Fcomponents\u002Feffects\u002Fglow-effect","3.components\u002Feffects\u002Fglow-effect",{"title":549,"path":550,"stem":551},"Glowing Effect","\u002Fcomponents\u002Feffects\u002Fglowing-effect","3.components\u002Feffects\u002Fglowing-effect",{"title":553,"path":554,"stem":555},"Gooey Filter","\u002Fcomponents\u002Feffects\u002Fgooey-filter","3.components\u002Feffects\u002Fgooey-filter",{"title":557,"path":558,"stem":559},"Gravity Stars","\u002Fcomponents\u002Feffects\u002Fgravity-stars","3.components\u002Feffects\u002Fgravity-stars",{"title":561,"path":562,"stem":563},"Iridescent foil","\u002Fcomponents\u002Feffects\u002Fholographic-foil","3.components\u002Feffects\u002Fholographic-foil",{"title":565,"path":566,"stem":567},"Icon Cloud","\u002Fcomponents\u002Feffects\u002Ficon-cloud","3.components\u002Feffects\u002Ficon-cloud",{"title":569,"path":570,"stem":571},"Liquid Metal","\u002Fcomponents\u002Feffects\u002Fliquid-metal","3.components\u002Feffects\u002Fliquid-metal",{"title":573,"path":574,"stem":575},"Mask Container","\u002Fcomponents\u002Feffects\u002Fmask-container","3.components\u002Feffects\u002Fmask-container",{"title":577,"path":578,"stem":579},"Orbiting Circles","\u002Fcomponents\u002Feffects\u002Forbiting-circles","3.components\u002Feffects\u002Forbiting-circles",{"title":581,"path":582,"stem":583},"Depth layers","\u002Fcomponents\u002Feffects\u002Fparallax-layers","3.components\u002Feffects\u002Fparallax-layers",{"title":585,"path":586,"stem":587},"Pixel Flow Field","\u002Fcomponents\u002Feffects\u002Fpixel-flow-field","3.components\u002Feffects\u002Fpixel-flow-field",{"title":589,"path":590,"stem":591},"Pixelated Canvas","\u002Fcomponents\u002Feffects\u002Fpixelated-canvas","3.components\u002Feffects\u002Fpixelated-canvas",{"title":593,"path":594,"stem":595},"Progressive Blur","\u002Fcomponents\u002Feffects\u002Fprogressive-blur","3.components\u002Feffects\u002Fprogressive-blur",{"title":597,"path":598,"stem":599},"Siri Orb","\u002Fcomponents\u002Feffects\u002Fsiri-orb","3.components\u002Feffects\u002Fsiri-orb",{"title":601,"path":602,"stem":603},"Spotlight","\u002Fcomponents\u002Feffects\u002Fspotlight","3.components\u002Feffects\u002Fspotlight",{"title":605,"path":606,"stem":607},"Squircle","\u002Fcomponents\u002Feffects\u002Fsquircle","3.components\u002Feffects\u002Fsquircle",{"title":609,"path":610,"stem":611},"SVG Clip Mask","\u002Fcomponents\u002Feffects\u002Fsvg-clip-mask","3.components\u002Feffects\u002Fsvg-clip-mask",{"title":613,"path":614,"stem":615},"Tracing Beam","\u002Fcomponents\u002Feffects\u002Ftracing-beam","3.components\u002Feffects\u002Ftracing-beam",{"title":617,"path":618,"stem":619},"Video Ambient","\u002Fcomponents\u002Feffects\u002Fvideo-ambient","3.components\u002Feffects\u002Fvideo-ambient",{"title":621,"icon":622,"path":623,"stem":624,"children":625,"page":69},"Forms","i-lucide-text-cursor-input","\u002Fcomponents\u002Fforms","3.components\u002Fforms",[626,630,634,638,642,646,650,654,658,662,666,670,674,678,682,686,690,694,698,702,706],{"title":627,"path":628,"stem":629},"Animated File Upload","\u002Fcomponents\u002Fforms\u002Fanimated-file-upload","3.components\u002Fforms\u002Fanimated-file-upload",{"title":631,"path":632,"stem":633},"Animated Input","\u002Fcomponents\u002Fforms\u002Fanimated-input","3.components\u002Fforms\u002Fanimated-input",{"title":635,"path":636,"stem":637},"Animated Number Input","\u002Fcomponents\u002Fforms\u002Fanimated-number-input","3.components\u002Fforms\u002Fanimated-number-input",{"title":639,"path":640,"stem":641},"Animated OTP Input","\u002Fcomponents\u002Fforms\u002Fanimated-otp-input","3.components\u002Fforms\u002Fanimated-otp-input",{"title":643,"path":644,"stem":645},"Animated Progress Bar","\u002Fcomponents\u002Fforms\u002Fanimated-progress-bar","3.components\u002Fforms\u002Fanimated-progress-bar",{"title":647,"path":648,"stem":649},"Animated Stepper","\u002Fcomponents\u002Fforms\u002Fanimated-stepper","3.components\u002Fforms\u002Fanimated-stepper",{"title":651,"path":652,"stem":653},"Animated Tags","\u002Fcomponents\u002Fforms\u002Fanimated-tags","3.components\u002Fforms\u002Fanimated-tags",{"title":655,"path":656,"stem":657},"Animated Toggle","\u002Fcomponents\u002Fforms\u002Fanimated-toggle","3.components\u002Fforms\u002Fanimated-toggle",{"title":659,"path":660,"stem":661},"Auth Form","\u002Fcomponents\u002Fforms\u002Fauth-form","3.components\u002Fforms\u002Fauth-form",{"title":663,"path":664,"stem":665},"Checkbox","\u002Fcomponents\u002Fforms\u002Fcheckbox","3.components\u002Fforms\u002Fcheckbox",{"title":667,"path":668,"stem":669},"Country Picker","\u002Fcomponents\u002Fforms\u002Fcountry-picker","3.components\u002Fforms\u002Fcountry-picker",{"title":671,"path":672,"stem":673},"Digit Roll","\u002Fcomponents\u002Fforms\u002Fdigit-roll","3.components\u002Fforms\u002Fdigit-roll",{"title":675,"path":676,"stem":677},"Duration Picker","\u002Fcomponents\u002Fforms\u002Fduration-picker","3.components\u002Fforms\u002Fduration-picker",{"title":679,"path":680,"stem":681},"Favicon Search","\u002Fcomponents\u002Fforms\u002Ffavicon-search","3.components\u002Fforms\u002Ffavicon-search",{"title":683,"path":684,"stem":685},"Float Input","\u002Fcomponents\u002Fforms\u002Ffloat-input","3.components\u002Fforms\u002Ffloat-input",{"title":687,"path":688,"stem":689},"Form","\u002Fcomponents\u002Fforms\u002Fform","3.components\u002Fforms\u002Fform",{"title":691,"path":692,"stem":693},"Morph Toggle","\u002Fcomponents\u002Fforms\u002Fmorph-toggle","3.components\u002Fforms\u002Fmorph-toggle",{"title":695,"path":696,"stem":697},"Radio Group","\u002Fcomponents\u002Fforms\u002Fradio-group","3.components\u002Fforms\u002Fradio-group",{"title":699,"path":700,"stem":701},"Scrubber","\u002Fcomponents\u002Fforms\u002Fscrubber","3.components\u002Fforms\u002Fscrubber",{"title":703,"path":704,"stem":705},"Social Selector","\u002Fcomponents\u002Fforms\u002Fsocial-selector","3.components\u002Fforms\u002Fsocial-selector",{"title":707,"path":708,"stem":709},"Swap Panel","\u002Fcomponents\u002Fforms\u002Fswap-panel","3.components\u002Fforms\u002Fswap-panel",{"title":711,"icon":712,"path":713,"stem":714,"children":715,"page":69},"Interactive","i-lucide-hand","\u002Fcomponents\u002Finteractive","3.components\u002Finteractive",[716,720,724,728,732,736,740,744,748,752,756,760,764,768,772,776,780,784,788,792,796,800,804,808,812,816,820,824,828,832,836,840,844,848,852,856,860,864,868,872,876,880,884,888,892],{"title":717,"path":718,"stem":719},"Accordion","\u002Fcomponents\u002Finteractive\u002Faccordion","3.components\u002Finteractive\u002Faccordion",{"title":721,"path":722,"stem":723},"Motion dialog","\u002Fcomponents\u002Finteractive\u002Fanimated-dialog","3.components\u002Finteractive\u002Fanimated-dialog",{"title":725,"path":726,"stem":727},"Animated Tooltip","\u002Fcomponents\u002Finteractive\u002Fanimated-tooltip","3.components\u002Finteractive\u002Fanimated-tooltip",{"title":729,"path":730,"stem":731},"Basic Dropdown","\u002Fcomponents\u002Finteractive\u002Fbasic-dropdown","3.components\u002Finteractive\u002Fbasic-dropdown",{"title":733,"path":734,"stem":735},"Basic Toast","\u002Fcomponents\u002Finteractive\u002Fbasic-toast","3.components\u002Finteractive\u002Fbasic-toast",{"title":737,"path":738,"stem":739},"Code Block","\u002Fcomponents\u002Finteractive\u002Fcode-block","3.components\u002Finteractive\u002Fcode-block",{"title":741,"path":742,"stem":743},"Code Comparison","\u002Fcomponents\u002Finteractive\u002Fcode-comparison","3.components\u002Finteractive\u002Fcode-comparison",{"title":745,"path":746,"stem":747},"Contribution Graph","\u002Fcomponents\u002Finteractive\u002Fcontribution-graph","3.components\u002Finteractive\u002Fcontribution-graph",{"title":749,"path":750,"stem":751},"Cool Mode","\u002Fcomponents\u002Finteractive\u002Fcool-mode","3.components\u002Finteractive\u002Fcool-mode",{"title":753,"path":754,"stem":755},"Count Badge","\u002Fcomponents\u002Finteractive\u002Fcount-badge","3.components\u002Finteractive\u002Fcount-badge",{"title":757,"path":758,"stem":759},"Dock","\u002Fcomponents\u002Finteractive\u002Fdock","3.components\u002Finteractive\u002Fdock",{"title":761,"path":762,"stem":763},"Drag and Drop","\u002Fcomponents\u002Finteractive\u002Fdrag-and-drop","3.components\u002Finteractive\u002Fdrag-and-drop",{"title":765,"path":766,"stem":767},"Drawer","\u002Fcomponents\u002Finteractive\u002Fdrawer","3.components\u002Finteractive\u002Fdrawer",{"title":769,"path":770,"stem":771},"Dynamic Group","\u002Fcomponents\u002Finteractive\u002Fdynamic-group","3.components\u002Finteractive\u002Fdynamic-group",{"title":773,"path":774,"stem":775},"Dynamic Island","\u002Fcomponents\u002Finteractive\u002Fdynamic-island","3.components\u002Finteractive\u002Fdynamic-island",{"title":777,"path":778,"stem":779},"Emoji Reaction","\u002Fcomponents\u002Finteractive\u002Femoji-reaction","3.components\u002Finteractive\u002Femoji-reaction",{"title":781,"path":782,"stem":783},"Fluid Hover Highlight","\u002Fcomponents\u002Finteractive\u002Ffluid-hover-highlight","3.components\u002Finteractive\u002Ffluid-hover-highlight",{"title":785,"path":786,"stem":787},"Folder Reveal","\u002Fcomponents\u002Finteractive\u002Ffolder-reveal","3.components\u002Finteractive\u002Ffolder-reveal",{"title":789,"path":790,"stem":791},"GitHub Stars Animation","\u002Fcomponents\u002Finteractive\u002Fgithub-stars-animation","3.components\u002Finteractive\u002Fgithub-stars-animation",{"title":793,"path":794,"stem":795},"Hover Expand","\u002Fcomponents\u002Finteractive\u002Fhover-expand","3.components\u002Finteractive\u002Fhover-expand",{"title":797,"path":798,"stem":799},"Hover Image List","\u002Fcomponents\u002Finteractive\u002Fhover-image-list","3.components\u002Finteractive\u002Fhover-image-list",{"title":801,"path":802,"stem":803},"Image compare","\u002Fcomponents\u002Finteractive\u002Fimage-comparison","3.components\u002Finteractive\u002Fimage-comparison",{"title":805,"path":806,"stem":807},"Image Metadata Preview","\u002Fcomponents\u002Finteractive\u002Fimage-metadata-preview","3.components\u002Finteractive\u002Fimage-metadata-preview",{"title":809,"path":810,"stem":811},"Inline Testimonials","\u002Fcomponents\u002Finteractive\u002Finline-testimonials","3.components\u002Finteractive\u002Finline-testimonials",{"title":813,"path":814,"stem":815},"Interactive Image Selector","\u002Fcomponents\u002Finteractive\u002Finteractive-image-selector","3.components\u002Finteractive\u002Finteractive-image-selector",{"title":817,"path":818,"stem":819},"Job Listing","\u002Fcomponents\u002Finteractive\u002Fjob-listing","3.components\u002Finteractive\u002Fjob-listing",{"title":821,"path":822,"stem":823},"Lens","\u002Fcomponents\u002Finteractive\u002Flens","3.components\u002Finteractive\u002Flens",{"title":825,"path":826,"stem":827},"Morph Icon","\u002Fcomponents\u002Finteractive\u002Fmorph-icon","3.components\u002Finteractive\u002Fmorph-icon",{"title":829,"path":830,"stem":831},"Morph Surface","\u002Fcomponents\u002Finteractive\u002Fmorph-surface","3.components\u002Finteractive\u002Fmorph-surface",{"title":833,"path":834,"stem":835},"Shape-shift dialog","\u002Fcomponents\u002Finteractive\u002Fmorphing-dialog","3.components\u002Finteractive\u002Fmorphing-dialog",{"title":837,"path":838,"stem":839},"Shape-shift popover","\u002Fcomponents\u002Finteractive\u002Fmorphing-popover","3.components\u002Finteractive\u002Fmorphing-popover",{"title":841,"path":842,"stem":843},"Notification Badge","\u002Fcomponents\u002Finteractive\u002Fnotification-badge","3.components\u002Finteractive\u002Fnotification-badge",{"title":845,"path":846,"stem":847},"Orbital Image Wheel","\u002Fcomponents\u002Finteractive\u002Forbital-image-wheel","3.components\u002Finteractive\u002Forbital-image-wheel",{"title":849,"path":850,"stem":851},"Phototab","\u002Fcomponents\u002Finteractive\u002Fphototab","3.components\u002Finteractive\u002Fphototab",{"title":853,"path":854,"stem":855},"Pinned List","\u002Fcomponents\u002Finteractive\u002Fpinned-list","3.components\u002Finteractive\u002Fpinned-list",{"title":857,"path":858,"stem":859},"Pixel Brush Canvas","\u002Fcomponents\u002Finteractive\u002Fpixel-brush-canvas","3.components\u002Finteractive\u002Fpixel-brush-canvas",{"title":861,"path":862,"stem":863},"Power Off Slide","\u002Fcomponents\u002Finteractive\u002Fpower-off-slide","3.components\u002Finteractive\u002Fpower-off-slide",{"title":865,"path":866,"stem":867},"Rich Popover","\u002Fcomponents\u002Finteractive\u002Frich-popover","3.components\u002Finteractive\u002Frich-popover",{"title":869,"path":870,"stem":871},"Scratch to Reveal","\u002Fcomponents\u002Finteractive\u002Fscratch-to-reveal","3.components\u002Finteractive\u002Fscratch-to-reveal",{"title":873,"path":874,"stem":875},"Time Machine Stack","\u002Fcomponents\u002Finteractive\u002Ftime-machine-stack","3.components\u002Finteractive\u002Ftime-machine-stack",{"title":877,"path":878,"stem":879},"Unlock Face ID","\u002Fcomponents\u002Finteractive\u002Funlock-face-id","3.components\u002Finteractive\u002Funlock-face-id",{"title":881,"path":882,"stem":883},"User Account Avatar","\u002Fcomponents\u002Finteractive\u002Fuser-account-avatar","3.components\u002Finteractive\u002Fuser-account-avatar",{"title":885,"path":886,"stem":887},"Vector Editor Toolbar","\u002Fcomponents\u002Finteractive\u002Fvector-editor-toolbar","3.components\u002Finteractive\u002Fvector-editor-toolbar",{"title":889,"path":890,"stem":891},"Video Modal","\u002Fcomponents\u002Finteractive\u002Fvideo-modal","3.components\u002Finteractive\u002Fvideo-modal",{"title":893,"path":894,"stem":895},"Zoomable Image","\u002Fcomponents\u002Finteractive\u002Fzoomable-image","3.components\u002Finteractive\u002Fzoomable-image",{"title":897,"icon":898,"path":899,"stem":900,"children":901,"page":69},"Layout","i-lucide-layout-grid","\u002Fcomponents\u002Flayout","3.components\u002Flayout",[902,906,910,914,918,922],{"title":903,"path":904,"stem":905},"Android","\u002Fcomponents\u002Flayout\u002Fandroid","3.components\u002Flayout\u002Fandroid",{"title":907,"path":908,"stem":909},"Animated Group","\u002Fcomponents\u002Flayout\u002Fanimated-group","3.components\u002Flayout\u002Fanimated-group",{"title":911,"path":912,"stem":913},"Breakpoint Indicator","\u002Fcomponents\u002Flayout\u002Fbreakpoint-indicator","3.components\u002Flayout\u002Fbreakpoint-indicator",{"title":915,"path":916,"stem":917},"Collision","\u002Fcomponents\u002Flayout\u002Fcollision","3.components\u002Flayout\u002Fcollision",{"title":919,"path":920,"stem":921},"iPhone 15 Pro","\u002Fcomponents\u002Flayout\u002Fiphone-15-pro","3.components\u002Flayout\u002Fiphone-15-pro",{"title":923,"path":924,"stem":925},"Safari","\u002Fcomponents\u002Flayout\u002Fsafari","3.components\u002Flayout\u002Fsafari",{"title":927,"icon":928,"path":929,"stem":930,"children":931,"page":69},"Loaders & Progress","i-lucide-loader-circle","\u002Fcomponents\u002Floaders","3.components\u002Floaders",[932,936,940,944,948,952],{"title":933,"path":934,"stem":935},"AI Loader","\u002Fcomponents\u002Floaders\u002Fai-loader","3.components\u002Floaders\u002Fai-loader",{"title":937,"path":938,"stem":939},"Circular Progress","\u002Fcomponents\u002Floaders\u002Fcircular-progress","3.components\u002Floaders\u002Fcircular-progress",{"title":941,"path":942,"stem":943},"Content Skeleton","\u002Fcomponents\u002Floaders\u002Fcontent-skeleton","3.components\u002Floaders\u002Fcontent-skeleton",{"title":945,"path":946,"stem":947},"Grid Loader","\u002Fcomponents\u002Floaders\u002Fgrid-loader","3.components\u002Floaders\u002Fgrid-loader",{"title":949,"path":950,"stem":951},"Motion Loader","\u002Fcomponents\u002Floaders\u002Fmotion-loader","3.components\u002Floaders\u002Fmotion-loader",{"title":953,"path":954,"stem":955},"Page Preloader","\u002Fcomponents\u002Floaders\u002Fpage-preloader","3.components\u002Floaders\u002Fpage-preloader",{"title":957,"icon":958,"path":959,"stem":960,"children":961,"page":69},"Interaction & Movement","i-lucide-move","\u002Fcomponents\u002Fmovement","3.components\u002Fmovement",[962,966,970,974,978,982,986],{"title":963,"path":964,"stem":965},"Cursor","\u002Fcomponents\u002Fmovement\u002Fcursor","3.components\u002Fmovement\u002Fcursor",{"title":967,"path":968,"stem":969},"Cursor Follow","\u002Fcomponents\u002Fmovement\u002Fcursor-follow","3.components\u002Fmovement\u002Fcursor-follow",{"title":971,"path":972,"stem":973},"Cursor Image Trail","\u002Fcomponents\u002Fmovement\u002Fcursor-image-trail","3.components\u002Fmovement\u002Fcursor-image-trail",{"title":975,"path":976,"stem":977},"Force Dot","\u002Fcomponents\u002Fmovement\u002Fforce-dot","3.components\u002Fmovement\u002Fforce-dot",{"title":979,"path":980,"stem":981},"Magnetic","\u002Fcomponents\u002Fmovement\u002Fmagnetic","3.components\u002Fmovement\u002Fmagnetic",{"title":983,"path":984,"stem":985},"Magnetic Field","\u002Fcomponents\u002Fmovement\u002Fmagnetic-field","3.components\u002Fmovement\u002Fmagnetic-field",{"title":987,"path":988,"stem":989},"Tilt","\u002Fcomponents\u002Fmovement\u002Ftilt","3.components\u002Fmovement\u002Ftilt",{"title":991,"icon":992,"path":993,"stem":994,"children":995,"page":69},"Navigation & Toolbars","i-lucide-menu","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation",[996,1000,1004,1008,1012,1016,1020],{"title":997,"path":998,"stem":999},"Breadcrumb","\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb","3.components\u002Fnavigation\u002Fbreadcrumb",{"title":1001,"path":1002,"stem":1003},"Expandable Navbar","\u002Fcomponents\u002Fnavigation\u002Fexpandable-navbar","3.components\u002Fnavigation\u002Fexpandable-navbar",{"title":1005,"path":1006,"stem":1007},"File Tree","\u002Fcomponents\u002Fnavigation\u002Ffile-tree","3.components\u002Fnavigation\u002Ffile-tree",{"title":1009,"path":1010,"stem":1011},"Floating Navbar","\u002Fcomponents\u002Fnavigation\u002Ffloating-navbar","3.components\u002Fnavigation\u002Ffloating-navbar",{"title":1013,"path":1014,"stem":1015},"Pagination","\u002Fcomponents\u002Fnavigation\u002Fpagination","3.components\u002Fnavigation\u002Fpagination",{"title":1017,"path":1018,"stem":1019},"Toolbar adaptive","\u002Fcomponents\u002Fnavigation\u002Ftoolbar-dynamic","3.components\u002Fnavigation\u002Ftoolbar-dynamic",{"title":1021,"path":1022,"stem":1023},"Toolbar collapsible","\u002Fcomponents\u002Fnavigation\u002Ftoolbar-expandable","3.components\u002Fnavigation\u002Ftoolbar-expandable",{"title":1025,"icon":1026,"path":1027,"stem":1028,"children":1029,"page":69},"Scroll & Viewport","i-lucide-scroll-text","\u002Fcomponents\u002Fscroll","3.components\u002Fscroll",[1030,1034,1038,1042,1046,1050,1054,1058],{"title":1031,"path":1032,"stem":1033},"In View","\u002Fcomponents\u002Fscroll\u002Fin-view","3.components\u002Fscroll\u002Fin-view",{"title":1035,"path":1036,"stem":1037},"Infinite Slider","\u002Fcomponents\u002Fscroll\u002Finfinite-slider","3.components\u002Fscroll\u002Finfinite-slider",{"title":1039,"path":1040,"stem":1041},"Kinetic Type Scroll","\u002Fcomponents\u002Fscroll\u002Fkinetic-type-scroll","3.components\u002Fscroll\u002Fkinetic-type-scroll",{"title":1043,"path":1044,"stem":1045},"Marquee","\u002Fcomponents\u002Fscroll\u002Fmarquee","3.components\u002Fscroll\u002Fmarquee",{"title":1047,"path":1048,"stem":1049},"Scroll Image Reveal","\u002Fcomponents\u002Fscroll\u002Fscroll-image-reveal","3.components\u002Fscroll\u002Fscroll-image-reveal",{"title":1051,"path":1052,"stem":1053},"Scroll Progress","\u002Fcomponents\u002Fscroll\u002Fscroll-progress","3.components\u002Fscroll\u002Fscroll-progress",{"title":1055,"path":1056,"stem":1057},"Scroll Velocity","\u002Fcomponents\u002Fscroll\u002Fscroll-velocity","3.components\u002Fscroll\u002Fscroll-velocity",{"title":1059,"path":1060,"stem":1061},"Svg Draw On Scroll","\u002Fcomponents\u002Fscroll\u002Fsvg-draw-on-scroll","3.components\u002Fscroll\u002Fsvg-draw-on-scroll",{"title":1063,"icon":1064,"path":1065,"stem":1066,"children":1067,"page":69},"Text & Numbers","i-lucide-type","\u002Fcomponents\u002Ftext","3.components\u002Ftext",[1068,1072,1076,1080,1084,1088,1092,1096,1100,1104,1108,1112,1116,1120,1124,1128,1132,1136,1140,1144,1148,1152,1156,1160,1164,1168,1172,1176,1180,1184,1188,1192,1196,1200,1204,1208,1212,1216,1220,1224,1228,1232,1236,1240,1244,1248,1252,1256,1260,1264,1268,1272,1276,1280,1284,1288],{"title":1069,"path":1070,"stem":1071},"Animated Avatar Group","\u002Fcomponents\u002Ftext\u002Fanimated-avatar-group","3.components\u002Ftext\u002Fanimated-avatar-group",{"title":1073,"path":1074,"stem":1075},"Animated List","\u002Fcomponents\u002Ftext\u002Fanimated-list","3.components\u002Ftext\u002Fanimated-list",{"title":1077,"path":1078,"stem":1079},"Animated Number","\u002Fcomponents\u002Ftext\u002Fanimated-number","3.components\u002Ftext\u002Fanimated-number",{"title":1081,"path":1082,"stem":1083},"Blur Out Up","\u002Fcomponents\u002Ftext\u002Fblur-out-up","3.components\u002Ftext\u002Fblur-out-up",{"title":1085,"path":1086,"stem":1087},"Bottom Up Letters","\u002Fcomponents\u002Ftext\u002Fbottom-up-letters","3.components\u002Ftext\u002Fbottom-up-letters",{"title":1089,"path":1090,"stem":1091},"Comic Text","\u002Fcomponents\u002Ftext\u002Fcomic-text","3.components\u002Ftext\u002Fcomic-text",{"title":1093,"path":1094,"stem":1095},"Counting Number","\u002Fcomponents\u002Ftext\u002Fcounting-number","3.components\u002Ftext\u002Fcounting-number",{"title":1097,"path":1098,"stem":1099},"Depth Parallax Words","\u002Fcomponents\u002Ftext\u002Fdepth-parallax-words","3.components\u002Ftext\u002Fdepth-parallax-words",{"title":1101,"path":1102,"stem":1103},"Fade Through","\u002Fcomponents\u002Ftext\u002Ffade-through","3.components\u002Ftext\u002Ffade-through",{"title":1105,"path":1106,"stem":1107},"Focus Blur Resolve","\u002Fcomponents\u002Ftext\u002Ffocus-blur-resolve","3.components\u002Ftext\u002Ffocus-blur-resolve",{"title":1109,"path":1110,"stem":1111},"Gravity Letters","\u002Fcomponents\u002Ftext\u002Fgravity-letters","3.components\u002Ftext\u002Fgravity-letters",{"title":1113,"path":1114,"stem":1115},"Kinetic Center Build","\u002Fcomponents\u002Ftext\u002Fkinetic-center-build","3.components\u002Ftext\u002Fkinetic-center-build",{"title":1117,"path":1118,"stem":1119},"Line By Line Slide","\u002Fcomponents\u002Ftext\u002Fline-by-line-slide","3.components\u002Ftext\u002Fline-by-line-slide",{"title":1121,"path":1122,"stem":1123},"Line Shadow Text","\u002Fcomponents\u002Ftext\u002Fline-shadow-text","3.components\u002Ftext\u002Fline-shadow-text",{"title":1125,"path":1126,"stem":1127},"Mask Reveal Up","\u002Fcomponents\u002Ftext\u002Fmask-reveal-up","3.components\u002Ftext\u002Fmask-reveal-up",{"title":1129,"path":1130,"stem":1131},"Micro Scale Fade","\u002Fcomponents\u002Ftext\u002Fmicro-scale-fade","3.components\u002Ftext\u002Fmicro-scale-fade",{"title":1133,"path":1134,"stem":1135},"Number Flow","\u002Fcomponents\u002Ftext\u002Fnumber-flow","3.components\u002Ftext\u002Fnumber-flow",{"title":1137,"path":1138,"stem":1139},"Per Character Rise","\u002Fcomponents\u002Ftext\u002Fper-character-rise","3.components\u002Ftext\u002Fper-character-rise",{"title":1141,"path":1142,"stem":1143},"Per Word Crossfade","\u002Fcomponents\u002Ftext\u002Fper-word-crossfade","3.components\u002Ftext\u002Fper-word-crossfade",{"title":1145,"path":1146,"stem":1147},"Perspective Text 3D","\u002Fcomponents\u002Ftext\u002Fperspective-text-3d","3.components\u002Ftext\u002Fperspective-text-3d",{"title":1149,"path":1150,"stem":1151},"Ransom Note","\u002Fcomponents\u002Ftext\u002Fransom-note","3.components\u002Ftext\u002Fransom-note",{"title":1153,"path":1154,"stem":1155},"Rolling Text","\u002Fcomponents\u002Ftext\u002Frolling-text","3.components\u002Ftext\u002Frolling-text",{"title":1157,"path":1158,"stem":1159},"Scale Down Fade","\u002Fcomponents\u002Ftext\u002Fscale-down-fade","3.components\u002Ftext\u002Fscale-down-fade",{"title":1161,"path":1162,"stem":1163},"Scroll Reveal Paragraph","\u002Fcomponents\u002Ftext\u002Fscroll-reveal-paragraph","3.components\u002Ftext\u002Fscroll-reveal-paragraph",{"title":1165,"path":1166,"stem":1167},"Shared Axis","\u002Fcomponents\u002Ftext\u002Fshared-axis","3.components\u002Ftext\u002Fshared-axis",{"title":1169,"path":1170,"stem":1171},"Shimmer Sweep","\u002Fcomponents\u002Ftext\u002Fshimmer-sweep","3.components\u002Ftext\u002Fshimmer-sweep",{"title":1173,"path":1174,"stem":1175},"Shine Text","\u002Fcomponents\u002Ftext\u002Fshine-text","3.components\u002Ftext\u002Fshine-text",{"title":1177,"path":1178,"stem":1179},"Short Lower in","\u002Fcomponents\u002Ftext\u002Fshort-slide-down","3.components\u002Ftext\u002Fshort-slide-down",{"title":1181,"path":1182,"stem":1183},"Short Slide Right","\u002Fcomponents\u002Ftext\u002Fshort-slide-right","3.components\u002Ftext\u002Fshort-slide-right",{"title":1185,"path":1186,"stem":1187},"Sliding Number","\u002Fcomponents\u002Ftext\u002Fsliding-number","3.components\u002Ftext\u002Fsliding-number",{"title":1189,"path":1190,"stem":1191},"Soft Blur In","\u002Fcomponents\u002Ftext\u002Fsoft-blur-in","3.components\u002Ftext\u002Fsoft-blur-in",{"title":1193,"path":1194,"stem":1195},"Sparkles Text","\u002Fcomponents\u002Ftext\u002Fsparkles-text","3.components\u002Ftext\u002Fsparkles-text",{"title":1197,"path":1198,"stem":1199},"Spinning Text","\u002Fcomponents\u002Ftext\u002Fspinning-text","3.components\u002Ftext\u002Fspinning-text",{"title":1201,"path":1202,"stem":1203},"Spring Scale In","\u002Fcomponents\u002Ftext\u002Fspring-scale-in","3.components\u002Ftext\u002Fspring-scale-in",{"title":1205,"path":1206,"stem":1207},"Stagger From Center","\u002Fcomponents\u002Ftext\u002Fstagger-from-center","3.components\u002Ftext\u002Fstagger-from-center",{"title":1209,"path":1210,"stem":1211},"Stagger From Edges","\u002Fcomponents\u002Ftext\u002Fstagger-from-edges","3.components\u002Ftext\u002Fstagger-from-edges",{"title":1213,"path":1214,"stem":1215},"Text Animate","\u002Fcomponents\u002Ftext\u002Ftext-animate","3.components\u002Ftext\u002Ftext-animate",{"title":1217,"path":1218,"stem":1219},"Text motion","\u002Fcomponents\u002Ftext\u002Ftext-effect","3.components\u002Ftext\u002Ftext-effect",{"title":1221,"path":1222,"stem":1223},"Text Glitch","\u002Fcomponents\u002Ftext\u002Ftext-glitch","3.components\u002Ftext\u002Ftext-glitch",{"title":1225,"path":1226,"stem":1227},"Text Glitch New","\u002Fcomponents\u002Ftext\u002Ftext-glitch-new","3.components\u002Ftext\u002Ftext-glitch-new",{"title":1229,"path":1230,"stem":1231},"Text Gradient","\u002Fcomponents\u002Ftext\u002Ftext-gradient","3.components\u002Ftext\u002Ftext-gradient",{"title":1233,"path":1234,"stem":1235},"Text Highlighter","\u002Fcomponents\u002Ftext\u002Ftext-highlighter","3.components\u002Ftext\u002Ftext-highlighter",{"title":1237,"path":1238,"stem":1239},"Text Loop","\u002Fcomponents\u002Ftext\u002Ftext-loop","3.components\u002Ftext\u002Ftext-loop",{"title":1241,"path":1242,"stem":1243},"Text Morph","\u002Fcomponents\u002Ftext\u002Ftext-morph","3.components\u002Ftext\u002Ftext-morph",{"title":1245,"path":1246,"stem":1247},"Text Reveal","\u002Fcomponents\u002Ftext\u002Ftext-reveal","3.components\u002Ftext\u002Ftext-reveal",{"title":1249,"path":1250,"stem":1251},"Text Roll","\u002Fcomponents\u002Ftext\u002Ftext-roll","3.components\u002Ftext\u002Ftext-roll",{"title":1253,"path":1254,"stem":1255},"Text Scramble","\u002Fcomponents\u002Ftext\u002Ftext-scramble","3.components\u002Ftext\u002Ftext-scramble",{"title":1257,"path":1258,"stem":1259},"Text Shimmer","\u002Fcomponents\u002Ftext\u002Ftext-shimmer","3.components\u002Ftext\u002Ftext-shimmer",{"title":1261,"path":1262,"stem":1263},"Text Shimmer Wave","\u002Fcomponents\u002Ftext\u002Ftext-shimmer-wave","3.components\u002Ftext\u002Ftext-shimmer-wave",{"title":1265,"path":1266,"stem":1267},"Top Down Letters","\u002Fcomponents\u002Ftext\u002Ftop-down-letters","3.components\u002Ftext\u002Ftop-down-letters",{"title":1269,"path":1270,"stem":1271},"True Focus","\u002Fcomponents\u002Ftext\u002Ftrue-focus","3.components\u002Ftext\u002Ftrue-focus",{"title":1273,"path":1274,"stem":1275},"Typing Text","\u002Fcomponents\u002Ftext\u002Ftyping-text","3.components\u002Ftext\u002Ftyping-text",{"title":1277,"path":1278,"stem":1279},"Variable Proximity","\u002Fcomponents\u002Ftext\u002Fvariable-proximity","3.components\u002Ftext\u002Fvariable-proximity",{"title":1281,"path":1282,"stem":1283},"Video Text","\u002Fcomponents\u002Ftext\u002Fvideo-text","3.components\u002Ftext\u002Fvideo-text",{"title":1285,"path":1286,"stem":1287},"Wave Text","\u002Fcomponents\u002Ftext\u002Fwave-text","3.components\u002Ftext\u002Fwave-text",{"title":1289,"path":1290,"stem":1291},"Word Rotate","\u002Fcomponents\u002Ftext\u002Fword-rotate","3.components\u002Ftext\u002Fword-rotate",{"title":1293,"icon":1294,"path":1295,"stem":1296,"children":1297,"page":69},"Transitions","i-lucide-git-compare","\u002Fcomponents\u002Ftransitions","3.components\u002Ftransitions",[1298,1302,1306,1310,1314,1318],{"title":1299,"path":1300,"stem":1301},"Aperture Blur Transition","\u002Fcomponents\u002Ftransitions\u002Faperture-blur-transition","3.components\u002Ftransitions\u002Faperture-blur-transition",{"title":1303,"path":1304,"stem":1305},"Chroma Blur Transition","\u002Fcomponents\u002Ftransitions\u002Fchroma-blur-transition","3.components\u002Ftransitions\u002Fchroma-blur-transition",{"title":1307,"path":1308,"stem":1309},"Prism Sweep Transition","\u002Fcomponents\u002Ftransitions\u002Fprism-sweep-transition","3.components\u002Ftransitions\u002Fprism-sweep-transition",{"title":1311,"path":1312,"stem":1313},"SDF Blob Transition","\u002Fcomponents\u002Ftransitions\u002Fsdf-blob-transition","3.components\u002Ftransitions\u002Fsdf-blob-transition",{"title":1315,"path":1316,"stem":1317},"Shader Reveal Transition","\u002Fcomponents\u002Ftransitions\u002Fshader-reveal-transition","3.components\u002Ftransitions\u002Fshader-reveal-transition",{"title":1319,"path":1320,"stem":1321},"Transition Panel","\u002Fcomponents\u002Ftransitions\u002Ftransition-panel","3.components\u002Ftransitions\u002Ftransition-panel",{"title":1323,"path":1324,"stem":1325,"children":1326,"icon":1344},"Composables","\u002Fcomposables","4.composables\u002Findex",[1327,1328,1332,1336,1340],{"title":1323,"path":1324,"stem":1325},{"title":1329,"path":1330,"stem":1331},"useCanvasCursor","\u002Fcomposables\u002Fuse-canvas-cursor","4.composables\u002Fuse-canvas-cursor",{"title":1333,"path":1334,"stem":1335},"useFluidCursor","\u002Fcomposables\u002Fuse-fluid-cursor","4.composables\u002Fuse-fluid-cursor",{"title":1337,"path":1338,"stem":1339},"useMotionBlockUI","\u002Fcomposables\u002Fuse-motion-block-ui","4.composables\u002Fuse-motion-block-ui",{"title":1341,"path":1342,"stem":1343},"useThemeColor","\u002Fcomposables\u002Fuse-theme-color","4.composables\u002Fuse-theme-color","i-lucide-puzzle",{"title":1346,"path":1347,"stem":1348,"children":1349,"icon":1351},"Guides","\u002Fguides","5.guides\u002Findex",[1350],{"title":1346,"path":1347,"stem":1348},"i-lucide-book-open",{"title":1353,"icon":1354,"path":1355,"stem":1356,"children":1357},"Blocks","i-lucide-blocks","\u002Fblocks","6.blocks",[1358,1360,1373,1382,1395,1408,1424,1437,1446,1455,1468,1477,1490,1499],{"title":1353,"path":1355,"stem":1359},"6.blocks\u002Findex",{"title":1361,"path":1362,"stem":1363,"children":1364,"page":69},"Blog","\u002Fblocks\u002Fblog","6.blocks\u002Fblog",[1365,1369],{"title":1366,"path":1367,"stem":1368},"Article Page","\u002Fblocks\u002Fblog\u002Farticle-page","6.blocks\u002Fblog\u002Farticle-page",{"title":1370,"path":1371,"stem":1372},"Blog Listing","\u002Fblocks\u002Fblog\u002Fblog-listing","6.blocks\u002Fblog\u002Fblog-listing",{"title":1374,"path":1375,"stem":1376,"children":1377,"page":69},"Cta","\u002Fblocks\u002Fcta","6.blocks\u002Fcta",[1378],{"title":1379,"path":1380,"stem":1381},"Centered CTA","\u002Fblocks\u002Fcta\u002Fcentered-cta","6.blocks\u002Fcta\u002Fcentered-cta",{"title":1383,"path":1384,"stem":1385,"children":1386,"page":69},"Dashboard Components","\u002Fblocks\u002Fdashboard-components","6.blocks\u002Fdashboard-components",[1387,1391],{"title":1388,"path":1389,"stem":1390},"Analytics Dashboard","\u002Fblocks\u002Fdashboard-components\u002Fanalytics-dashboard","6.blocks\u002Fdashboard-components\u002Fanalytics-dashboard",{"title":1392,"path":1393,"stem":1394},"User Management Table","\u002Fblocks\u002Fdashboard-components\u002Fuser-management","6.blocks\u002Fdashboard-components\u002Fuser-management",{"title":1396,"path":1397,"stem":1398,"children":1399,"page":69},"E Commerce","\u002Fblocks\u002Fe-commerce","6.blocks\u002Fe-commerce",[1400,1404],{"title":1401,"path":1402,"stem":1403},"Product Grid","\u002Fblocks\u002Fe-commerce\u002Fproduct-grid","6.blocks\u002Fe-commerce\u002Fproduct-grid",{"title":1405,"path":1406,"stem":1407},"Shopping Cart","\u002Fblocks\u002Fe-commerce\u002Fshopping-cart","6.blocks\u002Fe-commerce\u002Fshopping-cart",{"title":1409,"path":1410,"stem":1411,"children":1412,"page":69},"Featured Components","\u002Fblocks\u002Ffeatured-components","6.blocks\u002Ffeatured-components",[1413,1417,1420],{"title":1414,"path":1415,"stem":1416},"Animated Gradient","\u002Fblocks\u002Ffeatured-components\u002Fanimated-gradient","6.blocks\u002Ffeatured-components\u002Fanimated-gradient",{"title":175,"path":1418,"stem":1419},"\u002Fblocks\u002Ffeatured-components\u002Fanimated-spotlight","6.blocks\u002Ffeatured-components\u002Fanimated-spotlight",{"title":1421,"path":1422,"stem":1423},"Ripple Effect","\u002Fblocks\u002Ffeatured-components\u002Fripple-effect","6.blocks\u002Ffeatured-components\u002Fripple-effect",{"title":1425,"path":1426,"stem":1427,"children":1428,"page":69},"Features","\u002Fblocks\u002Ffeatures","6.blocks\u002Ffeatures",[1429,1433],{"title":1430,"path":1431,"stem":1432},"Feature Grid","\u002Fblocks\u002Ffeatures\u002Ffeature-grid","6.blocks\u002Ffeatures\u002Ffeature-grid",{"title":1434,"path":1435,"stem":1436},"Glare Card Features","\u002Fblocks\u002Ffeatures\u002Fglare-card-features","6.blocks\u002Ffeatures\u002Fglare-card-features",{"title":1438,"path":1439,"stem":1440,"children":1441,"page":69},"Footers","\u002Fblocks\u002Ffooters","6.blocks\u002Ffooters",[1442],{"title":1443,"path":1444,"stem":1445},"Multi-column Footer","\u002Fblocks\u002Ffooters\u002Fmulti-column-footer","6.blocks\u002Ffooters\u002Fmulti-column-footer",{"title":1447,"path":1448,"stem":1449,"children":1450,"page":69},"Hero Sections","\u002Fblocks\u002Fhero-sections","6.blocks\u002Fhero-sections",[1451],{"title":1452,"path":1453,"stem":1454},"Gradient Hero","\u002Fblocks\u002Fhero-sections\u002Fgradient-hero","6.blocks\u002Fhero-sections\u002Fgradient-hero",{"title":1456,"path":1457,"stem":1458,"children":1459,"page":69},"Landing Page","\u002Fblocks\u002Flanding-page","6.blocks\u002Flanding-page",[1460,1464],{"title":1461,"path":1462,"stem":1463},"Feature Showcase","\u002Fblocks\u002Flanding-page\u002Ffeature-showcase","6.blocks\u002Flanding-page\u002Ffeature-showcase",{"title":1465,"path":1466,"stem":1467},"Testimonial Carousel","\u002Fblocks\u002Flanding-page\u002Ftestimonial-carousel","6.blocks\u002Flanding-page\u002Ftestimonial-carousel",{"title":1469,"path":1470,"stem":1471,"children":1472,"page":69},"Navigation","\u002Fblocks\u002Fnavigation","6.blocks\u002Fnavigation",[1473],{"title":1474,"path":1475,"stem":1476},"Modern Navbar","\u002Fblocks\u002Fnavigation\u002Fmodern-navbar","6.blocks\u002Fnavigation\u002Fmodern-navbar",{"title":1478,"path":1479,"stem":1480,"children":1481,"page":69},"Portfolio","\u002Fblocks\u002Fportfolio","6.blocks\u002Fportfolio",[1482,1486],{"title":1483,"path":1484,"stem":1485},"Case Study","\u002Fblocks\u002Fportfolio\u002Fcase-study","6.blocks\u002Fportfolio\u002Fcase-study",{"title":1487,"path":1488,"stem":1489},"Project Gallery","\u002Fblocks\u002Fportfolio\u002Fproject-gallery","6.blocks\u002Fportfolio\u002Fproject-gallery",{"title":1491,"path":1492,"stem":1493,"children":1494,"page":69},"Pricing","\u002Fblocks\u002Fpricing","6.blocks\u002Fpricing",[1495],{"title":1496,"path":1497,"stem":1498},"Pricing Cards","\u002Fblocks\u002Fpricing\u002Fpricing-cards","6.blocks\u002Fpricing\u002Fpricing-cards",{"title":1500,"path":1501,"stem":1502,"children":1503,"page":69},"Testimonials","\u002Fblocks\u002Ftestimonials","6.blocks\u002Ftestimonials",[1504],{"title":1465,"path":1505,"stem":1506},"\u002Fblocks\u002Ftestimonials\u002Ftestimonial-carousel","6.blocks\u002Ftestimonials\u002Ftestimonial-carousel",{"title":1508,"icon":1509,"path":1510,"stem":1511,"children":1512},"Templates","i-lucide-layout-template","\u002Ftemplates","7.templates",[1513,1515,1519,1523,1527],{"title":1508,"path":1510,"stem":1514},"7.templates\u002Findex",{"title":1516,"path":1517,"stem":1518},"Basic Landing Page","\u002Ftemplates\u002Fbasic-landing-page","7.templates\u002F2.basic-landing-page",{"title":1520,"path":1521,"stem":1522},"SaaS Landing Page","\u002Ftemplates\u002Fsaas-landing-page","7.templates\u002F3.saas-landing-page",{"title":1524,"path":1525,"stem":1526},"E-commerce Landing Page","\u002Ftemplates\u002Fecommerce-landing-page","7.templates\u002F4.ecommerce-landing-page",{"title":1528,"path":1529,"stem":1530},"Creative Agency Landing Page","\u002Ftemplates\u002Fcreative-agency-landing-page","7.templates\u002F5.creative-agency-landing-page",{"title":1532,"path":1533,"stem":1534,"children":1535,"icon":1537},"API Reference","\u002Fapi-reference","8.api-reference\u002Findex",[1536],{"title":1532,"path":1533,"stem":1534},"i-lucide-braces",{"id":1539,"title":761,"body":1540,"description":6605,"extension":6606,"links":6607,"meta":6608,"navigation":2025,"path":762,"seo":6609,"stem":763,"__hash__":6610},"docs\u002F3.components\u002Finteractive\u002Fdrag-and-drop.md",{"type":1541,"value":1542,"toc":6592},"minimark",[1543,1556,1567,1570,1585,1589,1616,2472,2476,2490,2494,2503,2571,2627,2654,2657,4184,4187,4201,4888,4892,4913,6180,6184,6299,6303,6341,6345,6360,6364,6380,6386,6441,6445,6461,6467,6476,6493,6497,6564,6588],[1544,1545,1546,1547,1551,1552,1555],"p",{},"A drag-and-drop container for an array of items. Drag one row onto another and it\ndrops into the gap you are hovering — before or after the item under the pointer,\nchosen from which half of it you are over — with a primary-coloured indicator\nmarking where it will land. The split follows the layout: list and masonry read\nthe vertical half, while grid reads the diagonal, so a card dropped past an item's\nbottom-right corner lands after it and anywhere else lands before. The indicator\nis drawn as an overlay, so the list itself never reflows mid-drag. Three layouts\nare built in — list, grid and masonry — plus two extra behaviours for ",[1548,1549,1550],"code",{},"move"," and\n",[1548,1553,1554],{},"copy"," modes, where three drop zones appear below the container.",[1544,1557,1558,1559,1562,1563,1566],{},"The container keeps its own copy of your items and reorders that. Your array is\nnever mutated; the new order is handed back through the ",[1548,1560,1561],{},"change"," event, so the\nsource of truth stays yours. If you do not write it back, the container resets on\nthe next ",[1548,1564,1565],{},"items"," change — which is why the example writes it straight back.",[1544,1568,1569],{},"It is built on the native HTML drag-and-drop API, not on pointer events. That\ngives keyboard and touch behaviour from the platform for free on browsers that\nimplement it, and it means the drag ghost is the browser's own.",[1544,1571,1572,1573,1576,1577,1580,1581,1584],{},"The default slot replaces each item's whole appearance. Without a slot you get a\nplain bordered card showing ",[1548,1574,1575],{},"label",", ",[1548,1578,1579],{},"name"," or ",[1548,1582,1583],{},"id",".",[1586,1587,16],"h2",{"id":1588},"usage",[1544,1590,1591,1592,1594,1595,1597,1598,1600,1601,1604,1605,1576,1608,1611,1612,1615],{},"Pass ",[1548,1593,1565],{}," — objects with an ",[1548,1596,1583],{},", plus anything else your slot needs — and\nhandle ",[1548,1599,1561],{}," to adopt the new order. ",[1548,1602,1603],{},"layout"," picks the arrangement; with\n",[1548,1606,1607],{},"grid",[1548,1609,1610],{},"columns"," and ",[1548,1613,1614],{},"gap"," shape it.",[1617,1618,1620,1633],"code-preview",{"label":1619},"Preview",[1621,1622,1628,1629],"div",{"className":1623},[1624,1625,1626,1627],"flex","justify-center","w-full","h-full","  ",[1630,1631],"component-example",{"name":1632},"drag-and-drop-basic",[1634,1635,1637],"template",{"v-slot:code":1636},"",[1638,1639,1643],"pre",{"className":1640,"code":1641,"language":1642,"meta":1636,"style":1636},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"flex w-full max-w-md flex-col gap-4\">\n    \u003CMDragAndDrop\n      :items=\"items\"\n      item-class=\"cursor-grab\"\n      class=\"rounded-xl border border-dashed border-default p-3\"\n      @change=\"onChange\"\n    >\n      \u003Ctemplate #default=\"{ item, isDragging }\">\n        \u003Cdiv\n          class=\"flex items-center gap-3 rounded-lg border border-default bg-default px-3 py-2.5\"\n          :class=\"isDragging ? 'opacity-60' : ''\"\n        >\n          \u003CUIcon\n            name=\"i-lucide-grip-vertical\"\n            class=\"size-4 shrink-0 text-dimmed\"\n          \u002F>\n          \u003Cspan class=\"flex-1 text-sm font-medium\">\n            {{ item.label }}\n          \u003C\u002Fspan>\n          \u003CUBadge\n            size=\"sm\"\n            variant=\"subtle\"\n          >\n            {{ item.owner }}\n          \u003C\u002FUBadge>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003C\u002FMDragAndDrop>\n\n    \u003Cp class=\"text-xs text-muted\">\n      Drag a row onto another to reorder it — the new order is emitted, not applied\n      to your source array.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst items = ref([\n  { id: 'design-tokens', label: 'Style tokens', owner: 'Ana' },\n  { id: 'component-audit', label: 'Component audit', owner: 'Ben' },\n  { id: 'motion-guidelines', label: 'Motion guidelines', owner: 'Chidi' },\n  { id: 'accessibility-pass', label: 'Accessibility pass', owner: 'Dara' },\n  { id: 'docs-rewrite', label: 'Docs rewrite', owner: 'Eli' },\n])\n\nfunction onChange(next: { id: string, label: string, owner: string }[]) {\n  items.value = [...next]\n}\n\u003C\u002Fscript>\n","vue",[1548,1644,1645,1660,1686,1695,1713,1728,1743,1760,1766,1803,1812,1827,1842,1848,1857,1872,1887,1893,1913,1919,1929,1937,1952,1967,1973,1979,1989,1999,2009,2020,2027,2047,2053,2059,2068,2078,2088,2093,2118,2136,2188,2232,2276,2320,2364,2370,2375,2432,2457,2463],{"__ignoreMap":1636},[1646,1647,1650,1654,1657],"span",{"class":1648,"line":1649},"line",1,[1646,1651,1653],{"class":1652},"sMK4o","\u003C",[1646,1655,1634],{"class":1656},"swJcz",[1646,1658,1659],{"class":1652},">\n",[1646,1661,1663,1666,1668,1672,1675,1678,1682,1684],{"class":1648,"line":1662},2,[1646,1664,1665],{"class":1652},"  \u003C",[1646,1667,1621],{"class":1656},[1646,1669,1671],{"class":1670},"spNyl"," class",[1646,1673,1674],{"class":1652},"=",[1646,1676,1677],{"class":1652},"\"",[1646,1679,1681],{"class":1680},"sfazB","flex w-full max-w-md flex-col gap-4",[1646,1683,1677],{"class":1652},[1646,1685,1659],{"class":1652},[1646,1687,1689,1692],{"class":1648,"line":1688},3,[1646,1690,1691],{"class":1652},"    \u003C",[1646,1693,1694],{"class":1656},"MDragAndDrop\n",[1646,1696,1698,1701,1703,1705,1707,1710],{"class":1648,"line":1697},4,[1646,1699,1700],{"class":1652},"      :",[1646,1702,1565],{"class":1670},[1646,1704,1674],{"class":1652},[1646,1706,1677],{"class":1652},[1646,1708,1565],{"class":1709},"sTEyZ",[1646,1711,1712],{"class":1652},"\"\n",[1646,1714,1716,1719,1721,1723,1726],{"class":1648,"line":1715},5,[1646,1717,1718],{"class":1670},"      item-class",[1646,1720,1674],{"class":1652},[1646,1722,1677],{"class":1652},[1646,1724,1725],{"class":1680},"cursor-grab",[1646,1727,1712],{"class":1652},[1646,1729,1731,1734,1736,1738,1741],{"class":1648,"line":1730},6,[1646,1732,1733],{"class":1670},"      class",[1646,1735,1674],{"class":1652},[1646,1737,1677],{"class":1652},[1646,1739,1740],{"class":1680},"rounded-xl border border-dashed border-default p-3",[1646,1742,1712],{"class":1652},[1646,1744,1746,1749,1751,1753,1755,1758],{"class":1648,"line":1745},7,[1646,1747,1748],{"class":1652},"      @",[1646,1750,1561],{"class":1670},[1646,1752,1674],{"class":1652},[1646,1754,1677],{"class":1652},[1646,1756,1757],{"class":1709},"onChange",[1646,1759,1712],{"class":1652},[1646,1761,1763],{"class":1648,"line":1762},8,[1646,1764,1765],{"class":1652},"    >\n",[1646,1767,1769,1772,1774,1777,1780,1782,1784,1787,1790,1793,1796,1799,1801],{"class":1648,"line":1768},9,[1646,1770,1771],{"class":1652},"      \u003C",[1646,1773,1634],{"class":1656},[1646,1775,1776],{"class":1652}," #",[1646,1778,1779],{"class":1670},"default",[1646,1781,1674],{"class":1652},[1646,1783,1677],{"class":1652},[1646,1785,1786],{"class":1652},"{",[1646,1788,1789],{"class":1709}," item",[1646,1791,1792],{"class":1652},",",[1646,1794,1795],{"class":1709}," isDragging ",[1646,1797,1798],{"class":1652},"}",[1646,1800,1677],{"class":1652},[1646,1802,1659],{"class":1652},[1646,1804,1806,1809],{"class":1648,"line":1805},10,[1646,1807,1808],{"class":1652},"        \u003C",[1646,1810,1811],{"class":1656},"div\n",[1646,1813,1815,1818,1820,1822,1825],{"class":1648,"line":1814},11,[1646,1816,1817],{"class":1670},"          class",[1646,1819,1674],{"class":1652},[1646,1821,1677],{"class":1652},[1646,1823,1824],{"class":1680},"flex items-center gap-3 rounded-lg border border-default bg-default px-3 py-2.5",[1646,1826,1712],{"class":1652},[1646,1828,1830,1833,1835,1837,1840],{"class":1648,"line":1829},12,[1646,1831,1832],{"class":1670},"          :class",[1646,1834,1674],{"class":1652},[1646,1836,1677],{"class":1652},[1646,1838,1839],{"class":1680},"isDragging ? 'opacity-60' : ''",[1646,1841,1712],{"class":1652},[1646,1843,1845],{"class":1648,"line":1844},13,[1646,1846,1847],{"class":1652},"        >\n",[1646,1849,1851,1854],{"class":1648,"line":1850},14,[1646,1852,1853],{"class":1652},"          \u003C",[1646,1855,1856],{"class":1656},"UIcon\n",[1646,1858,1860,1863,1865,1867,1870],{"class":1648,"line":1859},15,[1646,1861,1862],{"class":1670},"            name",[1646,1864,1674],{"class":1652},[1646,1866,1677],{"class":1652},[1646,1868,1869],{"class":1680},"i-lucide-grip-vertical",[1646,1871,1712],{"class":1652},[1646,1873,1875,1878,1880,1882,1885],{"class":1648,"line":1874},16,[1646,1876,1877],{"class":1670},"            class",[1646,1879,1674],{"class":1652},[1646,1881,1677],{"class":1652},[1646,1883,1884],{"class":1680},"size-4 shrink-0 text-dimmed",[1646,1886,1712],{"class":1652},[1646,1888,1890],{"class":1648,"line":1889},17,[1646,1891,1892],{"class":1652},"          \u002F>\n",[1646,1894,1896,1898,1900,1902,1904,1906,1909,1911],{"class":1648,"line":1895},18,[1646,1897,1853],{"class":1652},[1646,1899,1646],{"class":1656},[1646,1901,1671],{"class":1670},[1646,1903,1674],{"class":1652},[1646,1905,1677],{"class":1652},[1646,1907,1908],{"class":1680},"flex-1 text-sm font-medium",[1646,1910,1677],{"class":1652},[1646,1912,1659],{"class":1652},[1646,1914,1916],{"class":1648,"line":1915},19,[1646,1917,1918],{"class":1709},"            {{ item.label }}\n",[1646,1920,1922,1925,1927],{"class":1648,"line":1921},20,[1646,1923,1924],{"class":1652},"          \u003C\u002F",[1646,1926,1646],{"class":1656},[1646,1928,1659],{"class":1652},[1646,1930,1932,1934],{"class":1648,"line":1931},21,[1646,1933,1853],{"class":1652},[1646,1935,1936],{"class":1656},"UBadge\n",[1646,1938,1940,1943,1945,1947,1950],{"class":1648,"line":1939},22,[1646,1941,1942],{"class":1670},"            size",[1646,1944,1674],{"class":1652},[1646,1946,1677],{"class":1652},[1646,1948,1949],{"class":1680},"sm",[1646,1951,1712],{"class":1652},[1646,1953,1955,1958,1960,1962,1965],{"class":1648,"line":1954},23,[1646,1956,1957],{"class":1670},"            variant",[1646,1959,1674],{"class":1652},[1646,1961,1677],{"class":1652},[1646,1963,1964],{"class":1680},"subtle",[1646,1966,1712],{"class":1652},[1646,1968,1970],{"class":1648,"line":1969},24,[1646,1971,1972],{"class":1652},"          >\n",[1646,1974,1976],{"class":1648,"line":1975},25,[1646,1977,1978],{"class":1709},"            {{ item.owner }}\n",[1646,1980,1982,1984,1987],{"class":1648,"line":1981},26,[1646,1983,1924],{"class":1652},[1646,1985,1986],{"class":1656},"UBadge",[1646,1988,1659],{"class":1652},[1646,1990,1992,1995,1997],{"class":1648,"line":1991},27,[1646,1993,1994],{"class":1652},"        \u003C\u002F",[1646,1996,1621],{"class":1656},[1646,1998,1659],{"class":1652},[1646,2000,2002,2005,2007],{"class":1648,"line":2001},28,[1646,2003,2004],{"class":1652},"      \u003C\u002F",[1646,2006,1634],{"class":1656},[1646,2008,1659],{"class":1652},[1646,2010,2012,2015,2018],{"class":1648,"line":2011},29,[1646,2013,2014],{"class":1652},"    \u003C\u002F",[1646,2016,2017],{"class":1656},"MDragAndDrop",[1646,2019,1659],{"class":1652},[1646,2021,2023],{"class":1648,"line":2022},30,[1646,2024,2026],{"emptyLinePlaceholder":2025},true,"\n",[1646,2028,2030,2032,2034,2036,2038,2040,2043,2045],{"class":1648,"line":2029},31,[1646,2031,1691],{"class":1652},[1646,2033,1544],{"class":1656},[1646,2035,1671],{"class":1670},[1646,2037,1674],{"class":1652},[1646,2039,1677],{"class":1652},[1646,2041,2042],{"class":1680},"text-xs text-muted",[1646,2044,1677],{"class":1652},[1646,2046,1659],{"class":1652},[1646,2048,2050],{"class":1648,"line":2049},32,[1646,2051,2052],{"class":1709},"      Drag a row onto another to reorder it — the new order is emitted, not applied\n",[1646,2054,2056],{"class":1648,"line":2055},33,[1646,2057,2058],{"class":1709},"      to your source array.\n",[1646,2060,2062,2064,2066],{"class":1648,"line":2061},34,[1646,2063,2014],{"class":1652},[1646,2065,1544],{"class":1656},[1646,2067,1659],{"class":1652},[1646,2069,2071,2074,2076],{"class":1648,"line":2070},35,[1646,2072,2073],{"class":1652},"  \u003C\u002F",[1646,2075,1621],{"class":1656},[1646,2077,1659],{"class":1652},[1646,2079,2081,2084,2086],{"class":1648,"line":2080},36,[1646,2082,2083],{"class":1652},"\u003C\u002F",[1646,2085,1634],{"class":1656},[1646,2087,1659],{"class":1652},[1646,2089,2091],{"class":1648,"line":2090},37,[1646,2092,2026],{"emptyLinePlaceholder":2025},[1646,2094,2096,2098,2101,2104,2107,2109,2111,2114,2116],{"class":1648,"line":2095},38,[1646,2097,1653],{"class":1652},[1646,2099,2100],{"class":1656},"script",[1646,2102,2103],{"class":1670}," setup",[1646,2105,2106],{"class":1670}," lang",[1646,2108,1674],{"class":1652},[1646,2110,1677],{"class":1652},[1646,2112,2113],{"class":1680},"ts",[1646,2115,1677],{"class":1652},[1646,2117,1659],{"class":1652},[1646,2119,2121,2124,2127,2129,2133],{"class":1648,"line":2120},39,[1646,2122,2123],{"class":1670},"const",[1646,2125,2126],{"class":1709}," items ",[1646,2128,1674],{"class":1652},[1646,2130,2132],{"class":2131},"s2Zo4"," ref",[1646,2134,2135],{"class":1709},"([\n",[1646,2137,2139,2142,2145,2148,2151,2154,2157,2159,2162,2164,2166,2169,2171,2173,2176,2178,2180,2183,2185],{"class":1648,"line":2138},40,[1646,2140,2141],{"class":1652},"  {",[1646,2143,2144],{"class":1656}," id",[1646,2146,2147],{"class":1652},":",[1646,2149,2150],{"class":1652}," '",[1646,2152,2153],{"class":1680},"design-tokens",[1646,2155,2156],{"class":1652},"'",[1646,2158,1792],{"class":1652},[1646,2160,2161],{"class":1656}," label",[1646,2163,2147],{"class":1652},[1646,2165,2150],{"class":1652},[1646,2167,2168],{"class":1680},"Style tokens",[1646,2170,2156],{"class":1652},[1646,2172,1792],{"class":1652},[1646,2174,2175],{"class":1656}," owner",[1646,2177,2147],{"class":1652},[1646,2179,2150],{"class":1652},[1646,2181,2182],{"class":1680},"Ana",[1646,2184,2156],{"class":1652},[1646,2186,2187],{"class":1652}," },\n",[1646,2189,2191,2193,2195,2197,2199,2202,2204,2206,2208,2210,2212,2215,2217,2219,2221,2223,2225,2228,2230],{"class":1648,"line":2190},41,[1646,2192,2141],{"class":1652},[1646,2194,2144],{"class":1656},[1646,2196,2147],{"class":1652},[1646,2198,2150],{"class":1652},[1646,2200,2201],{"class":1680},"component-audit",[1646,2203,2156],{"class":1652},[1646,2205,1792],{"class":1652},[1646,2207,2161],{"class":1656},[1646,2209,2147],{"class":1652},[1646,2211,2150],{"class":1652},[1646,2213,2214],{"class":1680},"Component audit",[1646,2216,2156],{"class":1652},[1646,2218,1792],{"class":1652},[1646,2220,2175],{"class":1656},[1646,2222,2147],{"class":1652},[1646,2224,2150],{"class":1652},[1646,2226,2227],{"class":1680},"Ben",[1646,2229,2156],{"class":1652},[1646,2231,2187],{"class":1652},[1646,2233,2235,2237,2239,2241,2243,2246,2248,2250,2252,2254,2256,2259,2261,2263,2265,2267,2269,2272,2274],{"class":1648,"line":2234},42,[1646,2236,2141],{"class":1652},[1646,2238,2144],{"class":1656},[1646,2240,2147],{"class":1652},[1646,2242,2150],{"class":1652},[1646,2244,2245],{"class":1680},"motion-guidelines",[1646,2247,2156],{"class":1652},[1646,2249,1792],{"class":1652},[1646,2251,2161],{"class":1656},[1646,2253,2147],{"class":1652},[1646,2255,2150],{"class":1652},[1646,2257,2258],{"class":1680},"Motion guidelines",[1646,2260,2156],{"class":1652},[1646,2262,1792],{"class":1652},[1646,2264,2175],{"class":1656},[1646,2266,2147],{"class":1652},[1646,2268,2150],{"class":1652},[1646,2270,2271],{"class":1680},"Chidi",[1646,2273,2156],{"class":1652},[1646,2275,2187],{"class":1652},[1646,2277,2279,2281,2283,2285,2287,2290,2292,2294,2296,2298,2300,2303,2305,2307,2309,2311,2313,2316,2318],{"class":1648,"line":2278},43,[1646,2280,2141],{"class":1652},[1646,2282,2144],{"class":1656},[1646,2284,2147],{"class":1652},[1646,2286,2150],{"class":1652},[1646,2288,2289],{"class":1680},"accessibility-pass",[1646,2291,2156],{"class":1652},[1646,2293,1792],{"class":1652},[1646,2295,2161],{"class":1656},[1646,2297,2147],{"class":1652},[1646,2299,2150],{"class":1652},[1646,2301,2302],{"class":1680},"Accessibility pass",[1646,2304,2156],{"class":1652},[1646,2306,1792],{"class":1652},[1646,2308,2175],{"class":1656},[1646,2310,2147],{"class":1652},[1646,2312,2150],{"class":1652},[1646,2314,2315],{"class":1680},"Dara",[1646,2317,2156],{"class":1652},[1646,2319,2187],{"class":1652},[1646,2321,2323,2325,2327,2329,2331,2334,2336,2338,2340,2342,2344,2347,2349,2351,2353,2355,2357,2360,2362],{"class":1648,"line":2322},44,[1646,2324,2141],{"class":1652},[1646,2326,2144],{"class":1656},[1646,2328,2147],{"class":1652},[1646,2330,2150],{"class":1652},[1646,2332,2333],{"class":1680},"docs-rewrite",[1646,2335,2156],{"class":1652},[1646,2337,1792],{"class":1652},[1646,2339,2161],{"class":1656},[1646,2341,2147],{"class":1652},[1646,2343,2150],{"class":1652},[1646,2345,2346],{"class":1680},"Docs rewrite",[1646,2348,2156],{"class":1652},[1646,2350,1792],{"class":1652},[1646,2352,2175],{"class":1656},[1646,2354,2147],{"class":1652},[1646,2356,2150],{"class":1652},[1646,2358,2359],{"class":1680},"Eli",[1646,2361,2156],{"class":1652},[1646,2363,2187],{"class":1652},[1646,2365,2367],{"class":1648,"line":2366},45,[1646,2368,2369],{"class":1709},"])\n",[1646,2371,2373],{"class":1648,"line":2372},46,[1646,2374,2026],{"emptyLinePlaceholder":2025},[1646,2376,2378,2381,2384,2387,2391,2393,2396,2398,2400,2404,2406,2408,2410,2412,2414,2416,2418,2420,2423,2426,2429],{"class":1648,"line":2377},47,[1646,2379,2380],{"class":1670},"function",[1646,2382,2383],{"class":2131}," onChange",[1646,2385,2386],{"class":1652},"(",[1646,2388,2390],{"class":2389},"sHdIc","next",[1646,2392,2147],{"class":1652},[1646,2394,2395],{"class":1652}," {",[1646,2397,2144],{"class":1656},[1646,2399,2147],{"class":1652},[1646,2401,2403],{"class":2402},"sBMFI"," string",[1646,2405,1792],{"class":1652},[1646,2407,2161],{"class":1656},[1646,2409,2147],{"class":1652},[1646,2411,2403],{"class":2402},[1646,2413,1792],{"class":1652},[1646,2415,2175],{"class":1656},[1646,2417,2147],{"class":1652},[1646,2419,2403],{"class":2402},[1646,2421,2422],{"class":1652}," }",[1646,2424,2425],{"class":1709},"[]",[1646,2427,2428],{"class":1652},")",[1646,2430,2431],{"class":1652}," {\n",[1646,2433,2435,2438,2440,2443,2446,2449,2452,2454],{"class":1648,"line":2434},48,[1646,2436,2437],{"class":1709},"  items",[1646,2439,1584],{"class":1652},[1646,2441,2442],{"class":1709},"value",[1646,2444,2445],{"class":1652}," =",[1646,2447,2448],{"class":1656}," [",[1646,2450,2451],{"class":1652},"...",[1646,2453,2390],{"class":1709},[1646,2455,2456],{"class":1656},"]\n",[1646,2458,2460],{"class":1648,"line":2459},49,[1646,2461,2462],{"class":1652},"}\n",[1646,2464,2466,2468,2470],{"class":1648,"line":2465},50,[1646,2467,2083],{"class":1652},[1646,2469,2100],{"class":1656},[1646,2471,1659],{"class":1652},[1586,2473,2475],{"id":2474},"customize","Customize",[1617,2477,2478,2484],{"label":1619},[1621,2479,1628,2481],{"className":2480},[1626],[1630,2482],{"name":2483},"drag-and-drop-custom",[1634,2485,2486],{"v-slot:code":1636},[2487,2488],"playground-code",{"name":2489},"DragAndDrop",[1586,2491,2493],{"id":2492},"modes-and-layouts","Modes and layouts",[1544,2495,2496,2499,2500,2502],{},[1548,2497,2498],{},"mode"," decides what a drop means; ",[1548,2501,1603],{}," decides how the items sit.",[2504,2505,2506,2522],"table",{},[2507,2508,2509],"thead",{},[2510,2511,2512,2516,2519],"tr",{},[2513,2514,2515],"th",{},"Mode",[2513,2517,2518],{},"Drop zones",[2513,2520,2521],{},"What dropping on another item does",[2523,2524,2525,2544,2556],"tbody",{},[2510,2526,2527,2538,2541],{},[2528,2529,2530,2533,2534],"td",{},[1548,2531,2532],{},"sort"," ",[2535,2536,2537],"em",{},"(default)",[2528,2539,2540],{},"none",[2528,2542,2543],{},"Reorders — the item lands in the gap above or below the row under the pointer, marked by an inline indicator.",[2510,2545,2546,2550,2553],{},[2528,2547,2548],{},[1548,2549,1550],{},[2528,2551,2552],{},"three",[2528,2554,2555],{},"Reorders as above, and dropping on a zone removes the item from the list.",[2510,2557,2558,2562,2564],{},[2528,2559,2560],{},[1548,2561,1554],{},[2528,2563,2552],{},[2528,2565,2566,2567,2570],{},"Reorders, and dropping on a zone emits ",[1548,2568,2569],{},"drop"," without removing — the copy is yours to place.",[2504,2572,2573,2582],{},[2507,2574,2575],{},[2510,2576,2577,2579],{},[2513,2578,897],{},[2513,2580,2581],{},"Arrangement",[2523,2583,2584,2599,2613],{},[2510,2585,2586,2593],{},[2528,2587,2588,2533,2591],{},[1548,2589,2590],{},"list",[2535,2592,2537],{},[2528,2594,2595,2596,1584],{},"Vertical stack with ",[1548,2597,2598],{},"space-y-2",[2510,2600,2601,2605],{},[2528,2602,2603],{},[1548,2604,1607],{},[2528,2606,2607,2608,2610,2611,1584],{},"CSS grid at ",[1548,2609,1610],{}," columns with a gap derived from ",[1548,2612,1614],{},[2510,2614,2615,2620],{},[2528,2616,2617],{},[1548,2618,2619],{},"masonry",[2528,2621,2622,2623,2626],{},"CSS multi-column at 2\u002F3\u002F4 columns by breakpoint, with ",[1548,2624,2625],{},"break-inside: avoid"," per item.",[1544,2628,2629,2630,2633,2634,2637,2638,2640,2641,2643,2644,2646,2647,2650,2651,1584],{},"Grid and masonry use Tailwind classes assembled at runtime (",[1548,2631,2632],{},"grid-cols-${columns}",",\n",[1548,2635,2636],{},"gap-${gap \u002F 4}","), which means those exact class names must exist in your\nstylesheet for the layout to apply. ",[1548,2639,1614],{}," also means different things in the two:\nin ",[1548,2642,1607],{}," it is a Tailwind step divided by four, while in ",[1548,2645,2619],{}," it is a pixel\nvalue applied as an inline ",[1548,2648,2649],{},"margin-bottom"," on each item — the column gap itself\nis a hardcoded ",[1548,2652,2653],{},"gap-4",[1544,2655,2656],{},"Switch both at runtime to compare them:",[1617,2658,2659,2665],{"label":1619},[1621,2660,1628,2662],{"className":2661},[1626],[1630,2663],{"name":2664},"drag-and-drop-modes",[1634,2666,2667],{"v-slot:code":1636},[1638,2668,2670],{"className":1640,"code":2669,"language":1642,"meta":1636,"style":1636},"\u003Ctemplate>\n  \u003Cdiv class=\"flex w-full flex-col gap-4\">\n    \u003Cdiv class=\"flex flex-wrap gap-2\">\n      \u003Cdiv class=\"flex gap-1 rounded-lg bg-elevated p-1\">\n        \u003CUButton\n          v-for=\"option in modes\"\n          :key=\"option\"\n          size=\"xs\"\n          :color=\"mode === option ? 'primary' : 'neutral'\"\n          :variant=\"mode === option ? 'solid' : 'ghost'\"\n          @click=\"mode = option\"\n        >\n          {{ option }}\n        \u003C\u002FUButton>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"flex gap-1 rounded-lg bg-elevated p-1\">\n        \u003CUButton\n          v-for=\"option in layouts\"\n          :key=\"option\"\n          size=\"xs\"\n          :color=\"layout === option ? 'primary' : 'neutral'\"\n          :variant=\"layout === option ? 'solid' : 'ghost'\"\n          @click=\"layout = option\"\n        >\n          {{ option }}\n        \u003C\u002FUButton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003CMDragAndDrop\n      :items=\"items\"\n      :layout=\"layout\"\n      :mode=\"mode\"\n      :columns=\"3\"\n      :gap=\"16\"\n      class=\"min-h-40\"\n      @change=\"onChange\"\n    >\n      \u003Ctemplate #default=\"{ item, isDragging }\">\n        \u003Cdiv\n          class=\"flex h-full flex-col justify-between gap-2 rounded-lg border border-default bg-default p-3\"\n          :class=\"isDragging ? 'opacity-60' : ''\"\n        >\n          \u003Cdiv class=\"flex items-center gap-2\">\n            \u003CUIcon\n              name=\"i-lucide-grip-vertical\"\n              class=\"size-4 shrink-0 text-dimmed\"\n            \u002F>\n            \u003Cspan class=\"text-sm font-medium text-highlighted\">{{ item.label }}\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n          \u003CUBadge\n            size=\"sm\"\n            variant=\"subtle\"\n          >\n            {{ item.owner }}\n          \u003C\u002FUBadge>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003C\u002FMDragAndDrop>\n\n    \u003Cp class=\"text-xs text-muted\">\n      \u003Ccode>mode\u003C\u002Fcode> = {{ mode }} · \u003Ccode>layout\u003C\u002Fcode> = {{ layout }}\n      \u003Ctemplate v-if=\"mode !== 'sort'\">\n        — drag onto one of the three zones to {{ mode === 'move' ? 'remove' : 'copy' }} the item.\n      \u003C\u002Ftemplate>\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\ntype Mode = 'sort' | 'move' | 'copy'\ntype Layout = 'list' | 'grid' | 'masonry'\n\nconst modes: Mode[] = ['sort', 'move', 'copy']\nconst layouts: Layout[] = ['list', 'grid', 'masonry']\n\nconst mode = ref\u003CMode>('sort')\nconst layout = ref\u003CLayout>('grid')\n\nconst items = ref([\n  { id: 'design-tokens', label: 'Style tokens', owner: 'Ana' },\n  { id: 'component-audit', label: 'Component audit', owner: 'Ben' },\n  { id: 'motion-guidelines', label: 'Motion guidelines', owner: 'Chidi' },\n  { id: 'accessibility-pass', label: 'Accessibility pass', owner: 'Dara' },\n  { id: 'docs-rewrite', label: 'Docs rewrite', owner: 'Eli' },\n  { id: 'release-notes', label: 'Release notes', owner: 'Fay' },\n])\n\nfunction onChange(next: { id: string, label: string, owner: string }[]) {\n  items.value = [...next]\n}\n\u003C\u002Fscript>\n",[1548,2671,2672,2680,2699,2718,2737,2744,2765,2781,2795,2834,2869,2890,2894,2899,2908,2916,2920,2938,2944,2961,2975,2987,3019,3051,3069,3073,3077,3085,3093,3101,3105,3111,3125,3139,3153,3169,3184,3197,3211,3215,3243,3249,3262,3274,3278,3297,3304,3317,3330,3335,3364,3373,3380,3393,3406,3411,3416,3425,3434,3443,3452,3457,3476,3513,3542,3548,3557,3566,3575,3584,3589,3610,3645,3677,3682,3725,3767,3772,3801,3829,3834,3847,3888,3929,3970,4011,4052,4096,4101,4106,4151,4170,4175],{"__ignoreMap":1636},[1646,2673,2674,2676,2678],{"class":1648,"line":1649},[1646,2675,1653],{"class":1652},[1646,2677,1634],{"class":1656},[1646,2679,1659],{"class":1652},[1646,2681,2682,2684,2686,2688,2690,2692,2695,2697],{"class":1648,"line":1662},[1646,2683,1665],{"class":1652},[1646,2685,1621],{"class":1656},[1646,2687,1671],{"class":1670},[1646,2689,1674],{"class":1652},[1646,2691,1677],{"class":1652},[1646,2693,2694],{"class":1680},"flex w-full flex-col gap-4",[1646,2696,1677],{"class":1652},[1646,2698,1659],{"class":1652},[1646,2700,2701,2703,2705,2707,2709,2711,2714,2716],{"class":1648,"line":1688},[1646,2702,1691],{"class":1652},[1646,2704,1621],{"class":1656},[1646,2706,1671],{"class":1670},[1646,2708,1674],{"class":1652},[1646,2710,1677],{"class":1652},[1646,2712,2713],{"class":1680},"flex flex-wrap gap-2",[1646,2715,1677],{"class":1652},[1646,2717,1659],{"class":1652},[1646,2719,2720,2722,2724,2726,2728,2730,2733,2735],{"class":1648,"line":1697},[1646,2721,1771],{"class":1652},[1646,2723,1621],{"class":1656},[1646,2725,1671],{"class":1670},[1646,2727,1674],{"class":1652},[1646,2729,1677],{"class":1652},[1646,2731,2732],{"class":1680},"flex gap-1 rounded-lg bg-elevated p-1",[1646,2734,1677],{"class":1652},[1646,2736,1659],{"class":1652},[1646,2738,2739,2741],{"class":1648,"line":1715},[1646,2740,1808],{"class":1652},[1646,2742,2743],{"class":1656},"UButton\n",[1646,2745,2746,2750,2752,2754,2757,2760,2763],{"class":1648,"line":1730},[1646,2747,2749],{"class":2748},"s7zQu","          v-for",[1646,2751,1674],{"class":1652},[1646,2753,1677],{"class":1652},[1646,2755,2756],{"class":1709},"option",[1646,2758,2759],{"class":1652}," in ",[1646,2761,2762],{"class":1709},"modes",[1646,2764,1712],{"class":1652},[1646,2766,2767,2770,2773,2775,2777,2779],{"class":1648,"line":1745},[1646,2768,2769],{"class":1652},"          :",[1646,2771,2772],{"class":1670},"key",[1646,2774,1674],{"class":1652},[1646,2776,1677],{"class":1652},[1646,2778,2756],{"class":1709},[1646,2780,1712],{"class":1652},[1646,2782,2783,2786,2788,2790,2793],{"class":1648,"line":1762},[1646,2784,2785],{"class":1670},"          size",[1646,2787,1674],{"class":1652},[1646,2789,1677],{"class":1652},[1646,2791,2792],{"class":1680},"xs",[1646,2794,1712],{"class":1652},[1646,2796,2797,2799,2802,2804,2806,2808,2811,2813,2816,2818,2821,2823,2826,2828,2831],{"class":1648,"line":1768},[1646,2798,2769],{"class":1652},[1646,2800,2801],{"class":1670},"color",[1646,2803,1674],{"class":1652},[1646,2805,1677],{"class":1652},[1646,2807,2498],{"class":1709},[1646,2809,2810],{"class":1652}," === ",[1646,2812,2756],{"class":1709},[1646,2814,2815],{"class":1652}," ? ",[1646,2817,2156],{"class":1652},[1646,2819,2820],{"class":1680},"primary",[1646,2822,2156],{"class":1652},[1646,2824,2825],{"class":1652}," : ",[1646,2827,2156],{"class":1652},[1646,2829,2830],{"class":1680},"neutral",[1646,2832,2833],{"class":1652},"'\"\n",[1646,2835,2836,2838,2841,2843,2845,2847,2849,2851,2853,2855,2858,2860,2862,2864,2867],{"class":1648,"line":1805},[1646,2837,2769],{"class":1652},[1646,2839,2840],{"class":1670},"variant",[1646,2842,1674],{"class":1652},[1646,2844,1677],{"class":1652},[1646,2846,2498],{"class":1709},[1646,2848,2810],{"class":1652},[1646,2850,2756],{"class":1709},[1646,2852,2815],{"class":1652},[1646,2854,2156],{"class":1652},[1646,2856,2857],{"class":1680},"solid",[1646,2859,2156],{"class":1652},[1646,2861,2825],{"class":1652},[1646,2863,2156],{"class":1652},[1646,2865,2866],{"class":1680},"ghost",[1646,2868,2833],{"class":1652},[1646,2870,2871,2874,2877,2879,2881,2883,2886,2888],{"class":1648,"line":1814},[1646,2872,2873],{"class":1652},"          @",[1646,2875,2876],{"class":1670},"click",[1646,2878,1674],{"class":1652},[1646,2880,1677],{"class":1652},[1646,2882,2498],{"class":1709},[1646,2884,2885],{"class":1652}," = ",[1646,2887,2756],{"class":1709},[1646,2889,1712],{"class":1652},[1646,2891,2892],{"class":1648,"line":1829},[1646,2893,1847],{"class":1652},[1646,2895,2896],{"class":1648,"line":1844},[1646,2897,2898],{"class":1709},"          {{ option }}\n",[1646,2900,2901,2903,2906],{"class":1648,"line":1850},[1646,2902,1994],{"class":1652},[1646,2904,2905],{"class":1656},"UButton",[1646,2907,1659],{"class":1652},[1646,2909,2910,2912,2914],{"class":1648,"line":1859},[1646,2911,2004],{"class":1652},[1646,2913,1621],{"class":1656},[1646,2915,1659],{"class":1652},[1646,2917,2918],{"class":1648,"line":1874},[1646,2919,2026],{"emptyLinePlaceholder":2025},[1646,2921,2922,2924,2926,2928,2930,2932,2934,2936],{"class":1648,"line":1889},[1646,2923,1771],{"class":1652},[1646,2925,1621],{"class":1656},[1646,2927,1671],{"class":1670},[1646,2929,1674],{"class":1652},[1646,2931,1677],{"class":1652},[1646,2933,2732],{"class":1680},[1646,2935,1677],{"class":1652},[1646,2937,1659],{"class":1652},[1646,2939,2940,2942],{"class":1648,"line":1895},[1646,2941,1808],{"class":1652},[1646,2943,2743],{"class":1656},[1646,2945,2946,2948,2950,2952,2954,2956,2959],{"class":1648,"line":1915},[1646,2947,2749],{"class":2748},[1646,2949,1674],{"class":1652},[1646,2951,1677],{"class":1652},[1646,2953,2756],{"class":1709},[1646,2955,2759],{"class":1652},[1646,2957,2958],{"class":1709},"layouts",[1646,2960,1712],{"class":1652},[1646,2962,2963,2965,2967,2969,2971,2973],{"class":1648,"line":1921},[1646,2964,2769],{"class":1652},[1646,2966,2772],{"class":1670},[1646,2968,1674],{"class":1652},[1646,2970,1677],{"class":1652},[1646,2972,2756],{"class":1709},[1646,2974,1712],{"class":1652},[1646,2976,2977,2979,2981,2983,2985],{"class":1648,"line":1931},[1646,2978,2785],{"class":1670},[1646,2980,1674],{"class":1652},[1646,2982,1677],{"class":1652},[1646,2984,2792],{"class":1680},[1646,2986,1712],{"class":1652},[1646,2988,2989,2991,2993,2995,2997,2999,3001,3003,3005,3007,3009,3011,3013,3015,3017],{"class":1648,"line":1939},[1646,2990,2769],{"class":1652},[1646,2992,2801],{"class":1670},[1646,2994,1674],{"class":1652},[1646,2996,1677],{"class":1652},[1646,2998,1603],{"class":1709},[1646,3000,2810],{"class":1652},[1646,3002,2756],{"class":1709},[1646,3004,2815],{"class":1652},[1646,3006,2156],{"class":1652},[1646,3008,2820],{"class":1680},[1646,3010,2156],{"class":1652},[1646,3012,2825],{"class":1652},[1646,3014,2156],{"class":1652},[1646,3016,2830],{"class":1680},[1646,3018,2833],{"class":1652},[1646,3020,3021,3023,3025,3027,3029,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049],{"class":1648,"line":1954},[1646,3022,2769],{"class":1652},[1646,3024,2840],{"class":1670},[1646,3026,1674],{"class":1652},[1646,3028,1677],{"class":1652},[1646,3030,1603],{"class":1709},[1646,3032,2810],{"class":1652},[1646,3034,2756],{"class":1709},[1646,3036,2815],{"class":1652},[1646,3038,2156],{"class":1652},[1646,3040,2857],{"class":1680},[1646,3042,2156],{"class":1652},[1646,3044,2825],{"class":1652},[1646,3046,2156],{"class":1652},[1646,3048,2866],{"class":1680},[1646,3050,2833],{"class":1652},[1646,3052,3053,3055,3057,3059,3061,3063,3065,3067],{"class":1648,"line":1969},[1646,3054,2873],{"class":1652},[1646,3056,2876],{"class":1670},[1646,3058,1674],{"class":1652},[1646,3060,1677],{"class":1652},[1646,3062,1603],{"class":1709},[1646,3064,2885],{"class":1652},[1646,3066,2756],{"class":1709},[1646,3068,1712],{"class":1652},[1646,3070,3071],{"class":1648,"line":1975},[1646,3072,1847],{"class":1652},[1646,3074,3075],{"class":1648,"line":1981},[1646,3076,2898],{"class":1709},[1646,3078,3079,3081,3083],{"class":1648,"line":1991},[1646,3080,1994],{"class":1652},[1646,3082,2905],{"class":1656},[1646,3084,1659],{"class":1652},[1646,3086,3087,3089,3091],{"class":1648,"line":2001},[1646,3088,2004],{"class":1652},[1646,3090,1621],{"class":1656},[1646,3092,1659],{"class":1652},[1646,3094,3095,3097,3099],{"class":1648,"line":2011},[1646,3096,2014],{"class":1652},[1646,3098,1621],{"class":1656},[1646,3100,1659],{"class":1652},[1646,3102,3103],{"class":1648,"line":2022},[1646,3104,2026],{"emptyLinePlaceholder":2025},[1646,3106,3107,3109],{"class":1648,"line":2029},[1646,3108,1691],{"class":1652},[1646,3110,1694],{"class":1656},[1646,3112,3113,3115,3117,3119,3121,3123],{"class":1648,"line":2049},[1646,3114,1700],{"class":1652},[1646,3116,1565],{"class":1670},[1646,3118,1674],{"class":1652},[1646,3120,1677],{"class":1652},[1646,3122,1565],{"class":1709},[1646,3124,1712],{"class":1652},[1646,3126,3127,3129,3131,3133,3135,3137],{"class":1648,"line":2055},[1646,3128,1700],{"class":1652},[1646,3130,1603],{"class":1670},[1646,3132,1674],{"class":1652},[1646,3134,1677],{"class":1652},[1646,3136,1603],{"class":1709},[1646,3138,1712],{"class":1652},[1646,3140,3141,3143,3145,3147,3149,3151],{"class":1648,"line":2061},[1646,3142,1700],{"class":1652},[1646,3144,2498],{"class":1670},[1646,3146,1674],{"class":1652},[1646,3148,1677],{"class":1652},[1646,3150,2498],{"class":1709},[1646,3152,1712],{"class":1652},[1646,3154,3155,3157,3159,3161,3163,3167],{"class":1648,"line":2070},[1646,3156,1700],{"class":1652},[1646,3158,1610],{"class":1670},[1646,3160,1674],{"class":1652},[1646,3162,1677],{"class":1652},[1646,3164,3166],{"class":3165},"sbssI","3",[1646,3168,1712],{"class":1652},[1646,3170,3171,3173,3175,3177,3179,3182],{"class":1648,"line":2080},[1646,3172,1700],{"class":1652},[1646,3174,1614],{"class":1670},[1646,3176,1674],{"class":1652},[1646,3178,1677],{"class":1652},[1646,3180,3181],{"class":3165},"16",[1646,3183,1712],{"class":1652},[1646,3185,3186,3188,3190,3192,3195],{"class":1648,"line":2090},[1646,3187,1733],{"class":1670},[1646,3189,1674],{"class":1652},[1646,3191,1677],{"class":1652},[1646,3193,3194],{"class":1680},"min-h-40",[1646,3196,1712],{"class":1652},[1646,3198,3199,3201,3203,3205,3207,3209],{"class":1648,"line":2095},[1646,3200,1748],{"class":1652},[1646,3202,1561],{"class":1670},[1646,3204,1674],{"class":1652},[1646,3206,1677],{"class":1652},[1646,3208,1757],{"class":1709},[1646,3210,1712],{"class":1652},[1646,3212,3213],{"class":1648,"line":2120},[1646,3214,1765],{"class":1652},[1646,3216,3217,3219,3221,3223,3225,3227,3229,3231,3233,3235,3237,3239,3241],{"class":1648,"line":2138},[1646,3218,1771],{"class":1652},[1646,3220,1634],{"class":1656},[1646,3222,1776],{"class":1652},[1646,3224,1779],{"class":1670},[1646,3226,1674],{"class":1652},[1646,3228,1677],{"class":1652},[1646,3230,1786],{"class":1652},[1646,3232,1789],{"class":1709},[1646,3234,1792],{"class":1652},[1646,3236,1795],{"class":1709},[1646,3238,1798],{"class":1652},[1646,3240,1677],{"class":1652},[1646,3242,1659],{"class":1652},[1646,3244,3245,3247],{"class":1648,"line":2190},[1646,3246,1808],{"class":1652},[1646,3248,1811],{"class":1656},[1646,3250,3251,3253,3255,3257,3260],{"class":1648,"line":2234},[1646,3252,1817],{"class":1670},[1646,3254,1674],{"class":1652},[1646,3256,1677],{"class":1652},[1646,3258,3259],{"class":1680},"flex h-full flex-col justify-between gap-2 rounded-lg border border-default bg-default p-3",[1646,3261,1712],{"class":1652},[1646,3263,3264,3266,3268,3270,3272],{"class":1648,"line":2278},[1646,3265,1832],{"class":1670},[1646,3267,1674],{"class":1652},[1646,3269,1677],{"class":1652},[1646,3271,1839],{"class":1680},[1646,3273,1712],{"class":1652},[1646,3275,3276],{"class":1648,"line":2322},[1646,3277,1847],{"class":1652},[1646,3279,3280,3282,3284,3286,3288,3290,3293,3295],{"class":1648,"line":2366},[1646,3281,1853],{"class":1652},[1646,3283,1621],{"class":1656},[1646,3285,1671],{"class":1670},[1646,3287,1674],{"class":1652},[1646,3289,1677],{"class":1652},[1646,3291,3292],{"class":1680},"flex items-center gap-2",[1646,3294,1677],{"class":1652},[1646,3296,1659],{"class":1652},[1646,3298,3299,3302],{"class":1648,"line":2372},[1646,3300,3301],{"class":1652},"            \u003C",[1646,3303,1856],{"class":1656},[1646,3305,3306,3309,3311,3313,3315],{"class":1648,"line":2377},[1646,3307,3308],{"class":1670},"              name",[1646,3310,1674],{"class":1652},[1646,3312,1677],{"class":1652},[1646,3314,1869],{"class":1680},[1646,3316,1712],{"class":1652},[1646,3318,3319,3322,3324,3326,3328],{"class":1648,"line":2434},[1646,3320,3321],{"class":1670},"              class",[1646,3323,1674],{"class":1652},[1646,3325,1677],{"class":1652},[1646,3327,1884],{"class":1680},[1646,3329,1712],{"class":1652},[1646,3331,3332],{"class":1648,"line":2459},[1646,3333,3334],{"class":1652},"            \u002F>\n",[1646,3336,3337,3339,3341,3343,3345,3347,3350,3352,3355,3358,3360,3362],{"class":1648,"line":2465},[1646,3338,3301],{"class":1652},[1646,3340,1646],{"class":1656},[1646,3342,1671],{"class":1670},[1646,3344,1674],{"class":1652},[1646,3346,1677],{"class":1652},[1646,3348,3349],{"class":1680},"text-sm font-medium text-highlighted",[1646,3351,1677],{"class":1652},[1646,3353,3354],{"class":1652},">",[1646,3356,3357],{"class":1709},"{{ item.label }}",[1646,3359,2083],{"class":1652},[1646,3361,1646],{"class":1656},[1646,3363,1659],{"class":1652},[1646,3365,3367,3369,3371],{"class":1648,"line":3366},51,[1646,3368,1924],{"class":1652},[1646,3370,1621],{"class":1656},[1646,3372,1659],{"class":1652},[1646,3374,3376,3378],{"class":1648,"line":3375},52,[1646,3377,1853],{"class":1652},[1646,3379,1936],{"class":1656},[1646,3381,3383,3385,3387,3389,3391],{"class":1648,"line":3382},53,[1646,3384,1942],{"class":1670},[1646,3386,1674],{"class":1652},[1646,3388,1677],{"class":1652},[1646,3390,1949],{"class":1680},[1646,3392,1712],{"class":1652},[1646,3394,3396,3398,3400,3402,3404],{"class":1648,"line":3395},54,[1646,3397,1957],{"class":1670},[1646,3399,1674],{"class":1652},[1646,3401,1677],{"class":1652},[1646,3403,1964],{"class":1680},[1646,3405,1712],{"class":1652},[1646,3407,3409],{"class":1648,"line":3408},55,[1646,3410,1972],{"class":1652},[1646,3412,3414],{"class":1648,"line":3413},56,[1646,3415,1978],{"class":1709},[1646,3417,3419,3421,3423],{"class":1648,"line":3418},57,[1646,3420,1924],{"class":1652},[1646,3422,1986],{"class":1656},[1646,3424,1659],{"class":1652},[1646,3426,3428,3430,3432],{"class":1648,"line":3427},58,[1646,3429,1994],{"class":1652},[1646,3431,1621],{"class":1656},[1646,3433,1659],{"class":1652},[1646,3435,3437,3439,3441],{"class":1648,"line":3436},59,[1646,3438,2004],{"class":1652},[1646,3440,1634],{"class":1656},[1646,3442,1659],{"class":1652},[1646,3444,3446,3448,3450],{"class":1648,"line":3445},60,[1646,3447,2014],{"class":1652},[1646,3449,2017],{"class":1656},[1646,3451,1659],{"class":1652},[1646,3453,3455],{"class":1648,"line":3454},61,[1646,3456,2026],{"emptyLinePlaceholder":2025},[1646,3458,3460,3462,3464,3466,3468,3470,3472,3474],{"class":1648,"line":3459},62,[1646,3461,1691],{"class":1652},[1646,3463,1544],{"class":1656},[1646,3465,1671],{"class":1670},[1646,3467,1674],{"class":1652},[1646,3469,1677],{"class":1652},[1646,3471,2042],{"class":1680},[1646,3473,1677],{"class":1652},[1646,3475,1659],{"class":1652},[1646,3477,3479,3481,3483,3485,3487,3489,3491,3493,3496,3498,3500,3502,3504,3506,3508,3510],{"class":1648,"line":3478},63,[1646,3480,1771],{"class":1652},[1646,3482,1548],{"class":1656},[1646,3484,3354],{"class":1652},[1646,3486,2498],{"class":1709},[1646,3488,2083],{"class":1652},[1646,3490,1548],{"class":1656},[1646,3492,3354],{"class":1652},[1646,3494,3495],{"class":1709}," = {{ mode }} · ",[1646,3497,1653],{"class":1652},[1646,3499,1548],{"class":1656},[1646,3501,3354],{"class":1652},[1646,3503,1603],{"class":1709},[1646,3505,2083],{"class":1652},[1646,3507,1548],{"class":1656},[1646,3509,3354],{"class":1652},[1646,3511,3512],{"class":1709}," = {{ layout }}\n",[1646,3514,3516,3518,3520,3523,3525,3527,3530,3533,3535,3537,3540],{"class":1648,"line":3515},64,[1646,3517,1771],{"class":1652},[1646,3519,1634],{"class":1656},[1646,3521,3522],{"class":2748}," v-if",[1646,3524,1674],{"class":1652},[1646,3526,1677],{"class":1652},[1646,3528,3529],{"class":1709},"mode ",[1646,3531,3532],{"class":1652},"!==",[1646,3534,2150],{"class":1652},[1646,3536,2532],{"class":1680},[1646,3538,3539],{"class":1652},"'\"",[1646,3541,1659],{"class":1652},[1646,3543,3545],{"class":1648,"line":3544},65,[1646,3546,3547],{"class":1709},"        — drag onto one of the three zones to {{ mode === 'move' ? 'remove' : 'copy' }} the item.\n",[1646,3549,3551,3553,3555],{"class":1648,"line":3550},66,[1646,3552,2004],{"class":1652},[1646,3554,1634],{"class":1656},[1646,3556,1659],{"class":1652},[1646,3558,3560,3562,3564],{"class":1648,"line":3559},67,[1646,3561,2014],{"class":1652},[1646,3563,1544],{"class":1656},[1646,3565,1659],{"class":1652},[1646,3567,3569,3571,3573],{"class":1648,"line":3568},68,[1646,3570,2073],{"class":1652},[1646,3572,1621],{"class":1656},[1646,3574,1659],{"class":1652},[1646,3576,3578,3580,3582],{"class":1648,"line":3577},69,[1646,3579,2083],{"class":1652},[1646,3581,1634],{"class":1656},[1646,3583,1659],{"class":1652},[1646,3585,3587],{"class":1648,"line":3586},70,[1646,3588,2026],{"emptyLinePlaceholder":2025},[1646,3590,3592,3594,3596,3598,3600,3602,3604,3606,3608],{"class":1648,"line":3591},71,[1646,3593,1653],{"class":1652},[1646,3595,2100],{"class":1656},[1646,3597,2103],{"class":1670},[1646,3599,2106],{"class":1670},[1646,3601,1674],{"class":1652},[1646,3603,1677],{"class":1652},[1646,3605,2113],{"class":1680},[1646,3607,1677],{"class":1652},[1646,3609,1659],{"class":1652},[1646,3611,3613,3616,3619,3621,3623,3625,3627,3630,3632,3634,3636,3638,3640,3642],{"class":1648,"line":3612},72,[1646,3614,3615],{"class":1670},"type",[1646,3617,3618],{"class":2402}," Mode",[1646,3620,2445],{"class":1652},[1646,3622,2150],{"class":1652},[1646,3624,2532],{"class":1680},[1646,3626,2156],{"class":1652},[1646,3628,3629],{"class":1652}," |",[1646,3631,2150],{"class":1652},[1646,3633,1550],{"class":1680},[1646,3635,2156],{"class":1652},[1646,3637,3629],{"class":1652},[1646,3639,2150],{"class":1652},[1646,3641,1554],{"class":1680},[1646,3643,3644],{"class":1652},"'\n",[1646,3646,3648,3650,3653,3655,3657,3659,3661,3663,3665,3667,3669,3671,3673,3675],{"class":1648,"line":3647},73,[1646,3649,3615],{"class":1670},[1646,3651,3652],{"class":2402}," Layout",[1646,3654,2445],{"class":1652},[1646,3656,2150],{"class":1652},[1646,3658,2590],{"class":1680},[1646,3660,2156],{"class":1652},[1646,3662,3629],{"class":1652},[1646,3664,2150],{"class":1652},[1646,3666,1607],{"class":1680},[1646,3668,2156],{"class":1652},[1646,3670,3629],{"class":1652},[1646,3672,2150],{"class":1652},[1646,3674,2619],{"class":1680},[1646,3676,3644],{"class":1652},[1646,3678,3680],{"class":1648,"line":3679},74,[1646,3681,2026],{"emptyLinePlaceholder":2025},[1646,3683,3685,3687,3690,3692,3694,3697,3699,3701,3703,3705,3707,3709,3711,3713,3715,3717,3719,3721,3723],{"class":1648,"line":3684},75,[1646,3686,2123],{"class":1670},[1646,3688,3689],{"class":1709}," modes",[1646,3691,2147],{"class":1652},[1646,3693,3618],{"class":2402},[1646,3695,3696],{"class":1709},"[] ",[1646,3698,1674],{"class":1652},[1646,3700,2448],{"class":1709},[1646,3702,2156],{"class":1652},[1646,3704,2532],{"class":1680},[1646,3706,2156],{"class":1652},[1646,3708,1792],{"class":1652},[1646,3710,2150],{"class":1652},[1646,3712,1550],{"class":1680},[1646,3714,2156],{"class":1652},[1646,3716,1792],{"class":1652},[1646,3718,2150],{"class":1652},[1646,3720,1554],{"class":1680},[1646,3722,2156],{"class":1652},[1646,3724,2456],{"class":1709},[1646,3726,3728,3730,3733,3735,3737,3739,3741,3743,3745,3747,3749,3751,3753,3755,3757,3759,3761,3763,3765],{"class":1648,"line":3727},76,[1646,3729,2123],{"class":1670},[1646,3731,3732],{"class":1709}," layouts",[1646,3734,2147],{"class":1652},[1646,3736,3652],{"class":2402},[1646,3738,3696],{"class":1709},[1646,3740,1674],{"class":1652},[1646,3742,2448],{"class":1709},[1646,3744,2156],{"class":1652},[1646,3746,2590],{"class":1680},[1646,3748,2156],{"class":1652},[1646,3750,1792],{"class":1652},[1646,3752,2150],{"class":1652},[1646,3754,1607],{"class":1680},[1646,3756,2156],{"class":1652},[1646,3758,1792],{"class":1652},[1646,3760,2150],{"class":1652},[1646,3762,2619],{"class":1680},[1646,3764,2156],{"class":1652},[1646,3766,2456],{"class":1709},[1646,3768,3770],{"class":1648,"line":3769},77,[1646,3771,2026],{"emptyLinePlaceholder":2025},[1646,3773,3775,3777,3780,3782,3784,3786,3788,3790,3792,3794,3796,3798],{"class":1648,"line":3774},78,[1646,3776,2123],{"class":1670},[1646,3778,3779],{"class":1709}," mode ",[1646,3781,1674],{"class":1652},[1646,3783,2132],{"class":2131},[1646,3785,1653],{"class":1652},[1646,3787,2515],{"class":2402},[1646,3789,3354],{"class":1652},[1646,3791,2386],{"class":1709},[1646,3793,2156],{"class":1652},[1646,3795,2532],{"class":1680},[1646,3797,2156],{"class":1652},[1646,3799,3800],{"class":1709},")\n",[1646,3802,3804,3806,3809,3811,3813,3815,3817,3819,3821,3823,3825,3827],{"class":1648,"line":3803},79,[1646,3805,2123],{"class":1670},[1646,3807,3808],{"class":1709}," layout ",[1646,3810,1674],{"class":1652},[1646,3812,2132],{"class":2131},[1646,3814,1653],{"class":1652},[1646,3816,897],{"class":2402},[1646,3818,3354],{"class":1652},[1646,3820,2386],{"class":1709},[1646,3822,2156],{"class":1652},[1646,3824,1607],{"class":1680},[1646,3826,2156],{"class":1652},[1646,3828,3800],{"class":1709},[1646,3830,3832],{"class":1648,"line":3831},80,[1646,3833,2026],{"emptyLinePlaceholder":2025},[1646,3835,3837,3839,3841,3843,3845],{"class":1648,"line":3836},81,[1646,3838,2123],{"class":1670},[1646,3840,2126],{"class":1709},[1646,3842,1674],{"class":1652},[1646,3844,2132],{"class":2131},[1646,3846,2135],{"class":1709},[1646,3848,3850,3852,3854,3856,3858,3860,3862,3864,3866,3868,3870,3872,3874,3876,3878,3880,3882,3884,3886],{"class":1648,"line":3849},82,[1646,3851,2141],{"class":1652},[1646,3853,2144],{"class":1656},[1646,3855,2147],{"class":1652},[1646,3857,2150],{"class":1652},[1646,3859,2153],{"class":1680},[1646,3861,2156],{"class":1652},[1646,3863,1792],{"class":1652},[1646,3865,2161],{"class":1656},[1646,3867,2147],{"class":1652},[1646,3869,2150],{"class":1652},[1646,3871,2168],{"class":1680},[1646,3873,2156],{"class":1652},[1646,3875,1792],{"class":1652},[1646,3877,2175],{"class":1656},[1646,3879,2147],{"class":1652},[1646,3881,2150],{"class":1652},[1646,3883,2182],{"class":1680},[1646,3885,2156],{"class":1652},[1646,3887,2187],{"class":1652},[1646,3889,3891,3893,3895,3897,3899,3901,3903,3905,3907,3909,3911,3913,3915,3917,3919,3921,3923,3925,3927],{"class":1648,"line":3890},83,[1646,3892,2141],{"class":1652},[1646,3894,2144],{"class":1656},[1646,3896,2147],{"class":1652},[1646,3898,2150],{"class":1652},[1646,3900,2201],{"class":1680},[1646,3902,2156],{"class":1652},[1646,3904,1792],{"class":1652},[1646,3906,2161],{"class":1656},[1646,3908,2147],{"class":1652},[1646,3910,2150],{"class":1652},[1646,3912,2214],{"class":1680},[1646,3914,2156],{"class":1652},[1646,3916,1792],{"class":1652},[1646,3918,2175],{"class":1656},[1646,3920,2147],{"class":1652},[1646,3922,2150],{"class":1652},[1646,3924,2227],{"class":1680},[1646,3926,2156],{"class":1652},[1646,3928,2187],{"class":1652},[1646,3930,3932,3934,3936,3938,3940,3942,3944,3946,3948,3950,3952,3954,3956,3958,3960,3962,3964,3966,3968],{"class":1648,"line":3931},84,[1646,3933,2141],{"class":1652},[1646,3935,2144],{"class":1656},[1646,3937,2147],{"class":1652},[1646,3939,2150],{"class":1652},[1646,3941,2245],{"class":1680},[1646,3943,2156],{"class":1652},[1646,3945,1792],{"class":1652},[1646,3947,2161],{"class":1656},[1646,3949,2147],{"class":1652},[1646,3951,2150],{"class":1652},[1646,3953,2258],{"class":1680},[1646,3955,2156],{"class":1652},[1646,3957,1792],{"class":1652},[1646,3959,2175],{"class":1656},[1646,3961,2147],{"class":1652},[1646,3963,2150],{"class":1652},[1646,3965,2271],{"class":1680},[1646,3967,2156],{"class":1652},[1646,3969,2187],{"class":1652},[1646,3971,3973,3975,3977,3979,3981,3983,3985,3987,3989,3991,3993,3995,3997,3999,4001,4003,4005,4007,4009],{"class":1648,"line":3972},85,[1646,3974,2141],{"class":1652},[1646,3976,2144],{"class":1656},[1646,3978,2147],{"class":1652},[1646,3980,2150],{"class":1652},[1646,3982,2289],{"class":1680},[1646,3984,2156],{"class":1652},[1646,3986,1792],{"class":1652},[1646,3988,2161],{"class":1656},[1646,3990,2147],{"class":1652},[1646,3992,2150],{"class":1652},[1646,3994,2302],{"class":1680},[1646,3996,2156],{"class":1652},[1646,3998,1792],{"class":1652},[1646,4000,2175],{"class":1656},[1646,4002,2147],{"class":1652},[1646,4004,2150],{"class":1652},[1646,4006,2315],{"class":1680},[1646,4008,2156],{"class":1652},[1646,4010,2187],{"class":1652},[1646,4012,4014,4016,4018,4020,4022,4024,4026,4028,4030,4032,4034,4036,4038,4040,4042,4044,4046,4048,4050],{"class":1648,"line":4013},86,[1646,4015,2141],{"class":1652},[1646,4017,2144],{"class":1656},[1646,4019,2147],{"class":1652},[1646,4021,2150],{"class":1652},[1646,4023,2333],{"class":1680},[1646,4025,2156],{"class":1652},[1646,4027,1792],{"class":1652},[1646,4029,2161],{"class":1656},[1646,4031,2147],{"class":1652},[1646,4033,2150],{"class":1652},[1646,4035,2346],{"class":1680},[1646,4037,2156],{"class":1652},[1646,4039,1792],{"class":1652},[1646,4041,2175],{"class":1656},[1646,4043,2147],{"class":1652},[1646,4045,2150],{"class":1652},[1646,4047,2359],{"class":1680},[1646,4049,2156],{"class":1652},[1646,4051,2187],{"class":1652},[1646,4053,4055,4057,4059,4061,4063,4066,4068,4070,4072,4074,4076,4079,4081,4083,4085,4087,4089,4092,4094],{"class":1648,"line":4054},87,[1646,4056,2141],{"class":1652},[1646,4058,2144],{"class":1656},[1646,4060,2147],{"class":1652},[1646,4062,2150],{"class":1652},[1646,4064,4065],{"class":1680},"release-notes",[1646,4067,2156],{"class":1652},[1646,4069,1792],{"class":1652},[1646,4071,2161],{"class":1656},[1646,4073,2147],{"class":1652},[1646,4075,2150],{"class":1652},[1646,4077,4078],{"class":1680},"Release notes",[1646,4080,2156],{"class":1652},[1646,4082,1792],{"class":1652},[1646,4084,2175],{"class":1656},[1646,4086,2147],{"class":1652},[1646,4088,2150],{"class":1652},[1646,4090,4091],{"class":1680},"Fay",[1646,4093,2156],{"class":1652},[1646,4095,2187],{"class":1652},[1646,4097,4099],{"class":1648,"line":4098},88,[1646,4100,2369],{"class":1709},[1646,4102,4104],{"class":1648,"line":4103},89,[1646,4105,2026],{"emptyLinePlaceholder":2025},[1646,4107,4109,4111,4113,4115,4117,4119,4121,4123,4125,4127,4129,4131,4133,4135,4137,4139,4141,4143,4145,4147,4149],{"class":1648,"line":4108},90,[1646,4110,2380],{"class":1670},[1646,4112,2383],{"class":2131},[1646,4114,2386],{"class":1652},[1646,4116,2390],{"class":2389},[1646,4118,2147],{"class":1652},[1646,4120,2395],{"class":1652},[1646,4122,2144],{"class":1656},[1646,4124,2147],{"class":1652},[1646,4126,2403],{"class":2402},[1646,4128,1792],{"class":1652},[1646,4130,2161],{"class":1656},[1646,4132,2147],{"class":1652},[1646,4134,2403],{"class":2402},[1646,4136,1792],{"class":1652},[1646,4138,2175],{"class":1656},[1646,4140,2147],{"class":1652},[1646,4142,2403],{"class":2402},[1646,4144,2422],{"class":1652},[1646,4146,2425],{"class":1709},[1646,4148,2428],{"class":1652},[1646,4150,2431],{"class":1652},[1646,4152,4154,4156,4158,4160,4162,4164,4166,4168],{"class":1648,"line":4153},91,[1646,4155,2437],{"class":1709},[1646,4157,1584],{"class":1652},[1646,4159,2442],{"class":1709},[1646,4161,2445],{"class":1652},[1646,4163,2448],{"class":1656},[1646,4165,2451],{"class":1652},[1646,4167,2390],{"class":1709},[1646,4169,2456],{"class":1656},[1646,4171,4173],{"class":1648,"line":4172},92,[1646,4174,2462],{"class":1652},[1646,4176,4178,4180,4182],{"class":1648,"line":4177},93,[1646,4179,2083],{"class":1652},[1646,4181,2100],{"class":1656},[1646,4183,1659],{"class":1652},[1586,4185,4186],{"id":1607},"Grid",[1544,4188,4189,4192,4193,1611,4195,4197,4198,4200],{},[1548,4190,4191],{},"layout=\"grid\""," with ",[1548,4194,1610],{},[1548,4196,1614],{}," arranges the items into a responsive grid. The cards reorder the same way, and ",[1548,4199,1561],{}," hands back the new order. Because a pointer can leave a card through any side, the drop position comes from the pointer's diagonal half: past the bottom-right corner inserts after the card, anywhere else inserts before it.",[1617,4202,4203,4209],{"label":1619},[1621,4204,1628,4206],{"className":4205},[1626],[1630,4207],{"name":4208},"drag-and-drop-grid",[1634,4210,4211],{"v-slot:code":1636},[1638,4212,4214],{"className":1640,"code":4213,"language":1642,"meta":1636,"style":1636},"\u003Ctemplate>\n  \u003Cdiv class=\"flex w-full flex-col gap-4\">\n    \u003CMDragAndDrop\n      :items=\"items\"\n      layout=\"grid\"\n      :columns=\"3\"\n      :gap=\"16\"\n      @change=\"onChange\"\n    >\n      \u003Ctemplate #default=\"{ item, isDragging }\">\n        \u003Cdiv\n          class=\"flex h-full flex-col items-center gap-1 rounded-lg border border-default bg-default p-4 text-center\"\n          :class=\"isDragging ? 'opacity-60' : ''\"\n        >\n          \u003Cspan class=\"text-sm font-medium text-highlighted\">{{ item.name }}\u003C\u002Fspan>\n          \u003Cspan class=\"text-xs text-muted\">{{ item.category }}\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003C\u002FMDragAndDrop>\n\n    \u003Cp class=\"text-xs text-muted\">\n      Drag a card onto another to reorder the grid.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst items = ref([\n  { id: 'project-a', name: 'Project A', category: 'Development' },\n  { id: 'project-beta', name: 'Project Beta', category: 'Design' },\n  { id: 'project-gamma', name: 'Project Gamma', category: 'Marketing' },\n  { id: 'project-d', name: 'Project D', category: 'Development' },\n  { id: 'project-delta', name: 'Project Delta', category: 'Design' },\n  { id: 'project-omega', name: 'Project Omega', category: 'Marketing' },\n])\n\nfunction onChange(next: { id: string, name: string, category: string }[]) {\n  items.value = [...next]\n}\n\u003C\u002Fscript>\n",[1548,4215,4216,4224,4242,4248,4262,4275,4289,4303,4317,4321,4349,4355,4368,4380,4384,4411,4438,4446,4454,4462,4466,4484,4489,4497,4505,4513,4517,4537,4549,4594,4637,4680,4722,4764,4806,4810,4814,4858,4876,4880],{"__ignoreMap":1636},[1646,4217,4218,4220,4222],{"class":1648,"line":1649},[1646,4219,1653],{"class":1652},[1646,4221,1634],{"class":1656},[1646,4223,1659],{"class":1652},[1646,4225,4226,4228,4230,4232,4234,4236,4238,4240],{"class":1648,"line":1662},[1646,4227,1665],{"class":1652},[1646,4229,1621],{"class":1656},[1646,4231,1671],{"class":1670},[1646,4233,1674],{"class":1652},[1646,4235,1677],{"class":1652},[1646,4237,2694],{"class":1680},[1646,4239,1677],{"class":1652},[1646,4241,1659],{"class":1652},[1646,4243,4244,4246],{"class":1648,"line":1688},[1646,4245,1691],{"class":1652},[1646,4247,1694],{"class":1656},[1646,4249,4250,4252,4254,4256,4258,4260],{"class":1648,"line":1697},[1646,4251,1700],{"class":1652},[1646,4253,1565],{"class":1670},[1646,4255,1674],{"class":1652},[1646,4257,1677],{"class":1652},[1646,4259,1565],{"class":1709},[1646,4261,1712],{"class":1652},[1646,4263,4264,4267,4269,4271,4273],{"class":1648,"line":1715},[1646,4265,4266],{"class":1670},"      layout",[1646,4268,1674],{"class":1652},[1646,4270,1677],{"class":1652},[1646,4272,1607],{"class":1680},[1646,4274,1712],{"class":1652},[1646,4276,4277,4279,4281,4283,4285,4287],{"class":1648,"line":1730},[1646,4278,1700],{"class":1652},[1646,4280,1610],{"class":1670},[1646,4282,1674],{"class":1652},[1646,4284,1677],{"class":1652},[1646,4286,3166],{"class":3165},[1646,4288,1712],{"class":1652},[1646,4290,4291,4293,4295,4297,4299,4301],{"class":1648,"line":1745},[1646,4292,1700],{"class":1652},[1646,4294,1614],{"class":1670},[1646,4296,1674],{"class":1652},[1646,4298,1677],{"class":1652},[1646,4300,3181],{"class":3165},[1646,4302,1712],{"class":1652},[1646,4304,4305,4307,4309,4311,4313,4315],{"class":1648,"line":1762},[1646,4306,1748],{"class":1652},[1646,4308,1561],{"class":1670},[1646,4310,1674],{"class":1652},[1646,4312,1677],{"class":1652},[1646,4314,1757],{"class":1709},[1646,4316,1712],{"class":1652},[1646,4318,4319],{"class":1648,"line":1768},[1646,4320,1765],{"class":1652},[1646,4322,4323,4325,4327,4329,4331,4333,4335,4337,4339,4341,4343,4345,4347],{"class":1648,"line":1805},[1646,4324,1771],{"class":1652},[1646,4326,1634],{"class":1656},[1646,4328,1776],{"class":1652},[1646,4330,1779],{"class":1670},[1646,4332,1674],{"class":1652},[1646,4334,1677],{"class":1652},[1646,4336,1786],{"class":1652},[1646,4338,1789],{"class":1709},[1646,4340,1792],{"class":1652},[1646,4342,1795],{"class":1709},[1646,4344,1798],{"class":1652},[1646,4346,1677],{"class":1652},[1646,4348,1659],{"class":1652},[1646,4350,4351,4353],{"class":1648,"line":1814},[1646,4352,1808],{"class":1652},[1646,4354,1811],{"class":1656},[1646,4356,4357,4359,4361,4363,4366],{"class":1648,"line":1829},[1646,4358,1817],{"class":1670},[1646,4360,1674],{"class":1652},[1646,4362,1677],{"class":1652},[1646,4364,4365],{"class":1680},"flex h-full flex-col items-center gap-1 rounded-lg border border-default bg-default p-4 text-center",[1646,4367,1712],{"class":1652},[1646,4369,4370,4372,4374,4376,4378],{"class":1648,"line":1844},[1646,4371,1832],{"class":1670},[1646,4373,1674],{"class":1652},[1646,4375,1677],{"class":1652},[1646,4377,1839],{"class":1680},[1646,4379,1712],{"class":1652},[1646,4381,4382],{"class":1648,"line":1850},[1646,4383,1847],{"class":1652},[1646,4385,4386,4388,4390,4392,4394,4396,4398,4400,4402,4405,4407,4409],{"class":1648,"line":1859},[1646,4387,1853],{"class":1652},[1646,4389,1646],{"class":1656},[1646,4391,1671],{"class":1670},[1646,4393,1674],{"class":1652},[1646,4395,1677],{"class":1652},[1646,4397,3349],{"class":1680},[1646,4399,1677],{"class":1652},[1646,4401,3354],{"class":1652},[1646,4403,4404],{"class":1709},"{{ item.name }}",[1646,4406,2083],{"class":1652},[1646,4408,1646],{"class":1656},[1646,4410,1659],{"class":1652},[1646,4412,4413,4415,4417,4419,4421,4423,4425,4427,4429,4432,4434,4436],{"class":1648,"line":1874},[1646,4414,1853],{"class":1652},[1646,4416,1646],{"class":1656},[1646,4418,1671],{"class":1670},[1646,4420,1674],{"class":1652},[1646,4422,1677],{"class":1652},[1646,4424,2042],{"class":1680},[1646,4426,1677],{"class":1652},[1646,4428,3354],{"class":1652},[1646,4430,4431],{"class":1709},"{{ item.category }}",[1646,4433,2083],{"class":1652},[1646,4435,1646],{"class":1656},[1646,4437,1659],{"class":1652},[1646,4439,4440,4442,4444],{"class":1648,"line":1889},[1646,4441,1994],{"class":1652},[1646,4443,1621],{"class":1656},[1646,4445,1659],{"class":1652},[1646,4447,4448,4450,4452],{"class":1648,"line":1895},[1646,4449,2004],{"class":1652},[1646,4451,1634],{"class":1656},[1646,4453,1659],{"class":1652},[1646,4455,4456,4458,4460],{"class":1648,"line":1915},[1646,4457,2014],{"class":1652},[1646,4459,2017],{"class":1656},[1646,4461,1659],{"class":1652},[1646,4463,4464],{"class":1648,"line":1921},[1646,4465,2026],{"emptyLinePlaceholder":2025},[1646,4467,4468,4470,4472,4474,4476,4478,4480,4482],{"class":1648,"line":1931},[1646,4469,1691],{"class":1652},[1646,4471,1544],{"class":1656},[1646,4473,1671],{"class":1670},[1646,4475,1674],{"class":1652},[1646,4477,1677],{"class":1652},[1646,4479,2042],{"class":1680},[1646,4481,1677],{"class":1652},[1646,4483,1659],{"class":1652},[1646,4485,4486],{"class":1648,"line":1939},[1646,4487,4488],{"class":1709},"      Drag a card onto another to reorder the grid.\n",[1646,4490,4491,4493,4495],{"class":1648,"line":1954},[1646,4492,2014],{"class":1652},[1646,4494,1544],{"class":1656},[1646,4496,1659],{"class":1652},[1646,4498,4499,4501,4503],{"class":1648,"line":1969},[1646,4500,2073],{"class":1652},[1646,4502,1621],{"class":1656},[1646,4504,1659],{"class":1652},[1646,4506,4507,4509,4511],{"class":1648,"line":1975},[1646,4508,2083],{"class":1652},[1646,4510,1634],{"class":1656},[1646,4512,1659],{"class":1652},[1646,4514,4515],{"class":1648,"line":1981},[1646,4516,2026],{"emptyLinePlaceholder":2025},[1646,4518,4519,4521,4523,4525,4527,4529,4531,4533,4535],{"class":1648,"line":1991},[1646,4520,1653],{"class":1652},[1646,4522,2100],{"class":1656},[1646,4524,2103],{"class":1670},[1646,4526,2106],{"class":1670},[1646,4528,1674],{"class":1652},[1646,4530,1677],{"class":1652},[1646,4532,2113],{"class":1680},[1646,4534,1677],{"class":1652},[1646,4536,1659],{"class":1652},[1646,4538,4539,4541,4543,4545,4547],{"class":1648,"line":2001},[1646,4540,2123],{"class":1670},[1646,4542,2126],{"class":1709},[1646,4544,1674],{"class":1652},[1646,4546,2132],{"class":2131},[1646,4548,2135],{"class":1709},[1646,4550,4551,4553,4555,4557,4559,4562,4564,4566,4569,4571,4573,4576,4578,4580,4583,4585,4587,4590,4592],{"class":1648,"line":2011},[1646,4552,2141],{"class":1652},[1646,4554,2144],{"class":1656},[1646,4556,2147],{"class":1652},[1646,4558,2150],{"class":1652},[1646,4560,4561],{"class":1680},"project-a",[1646,4563,2156],{"class":1652},[1646,4565,1792],{"class":1652},[1646,4567,4568],{"class":1656}," name",[1646,4570,2147],{"class":1652},[1646,4572,2150],{"class":1652},[1646,4574,4575],{"class":1680},"Project A",[1646,4577,2156],{"class":1652},[1646,4579,1792],{"class":1652},[1646,4581,4582],{"class":1656}," category",[1646,4584,2147],{"class":1652},[1646,4586,2150],{"class":1652},[1646,4588,4589],{"class":1680},"Development",[1646,4591,2156],{"class":1652},[1646,4593,2187],{"class":1652},[1646,4595,4596,4598,4600,4602,4604,4607,4609,4611,4613,4615,4617,4620,4622,4624,4626,4628,4630,4633,4635],{"class":1648,"line":2022},[1646,4597,2141],{"class":1652},[1646,4599,2144],{"class":1656},[1646,4601,2147],{"class":1652},[1646,4603,2150],{"class":1652},[1646,4605,4606],{"class":1680},"project-beta",[1646,4608,2156],{"class":1652},[1646,4610,1792],{"class":1652},[1646,4612,4568],{"class":1656},[1646,4614,2147],{"class":1652},[1646,4616,2150],{"class":1652},[1646,4618,4619],{"class":1680},"Project Beta",[1646,4621,2156],{"class":1652},[1646,4623,1792],{"class":1652},[1646,4625,4582],{"class":1656},[1646,4627,2147],{"class":1652},[1646,4629,2150],{"class":1652},[1646,4631,4632],{"class":1680},"Design",[1646,4634,2156],{"class":1652},[1646,4636,2187],{"class":1652},[1646,4638,4639,4641,4643,4645,4647,4650,4652,4654,4656,4658,4660,4663,4665,4667,4669,4671,4673,4676,4678],{"class":1648,"line":2029},[1646,4640,2141],{"class":1652},[1646,4642,2144],{"class":1656},[1646,4644,2147],{"class":1652},[1646,4646,2150],{"class":1652},[1646,4648,4649],{"class":1680},"project-gamma",[1646,4651,2156],{"class":1652},[1646,4653,1792],{"class":1652},[1646,4655,4568],{"class":1656},[1646,4657,2147],{"class":1652},[1646,4659,2150],{"class":1652},[1646,4661,4662],{"class":1680},"Project Gamma",[1646,4664,2156],{"class":1652},[1646,4666,1792],{"class":1652},[1646,4668,4582],{"class":1656},[1646,4670,2147],{"class":1652},[1646,4672,2150],{"class":1652},[1646,4674,4675],{"class":1680},"Marketing",[1646,4677,2156],{"class":1652},[1646,4679,2187],{"class":1652},[1646,4681,4682,4684,4686,4688,4690,4693,4695,4697,4699,4701,4703,4706,4708,4710,4712,4714,4716,4718,4720],{"class":1648,"line":2049},[1646,4683,2141],{"class":1652},[1646,4685,2144],{"class":1656},[1646,4687,2147],{"class":1652},[1646,4689,2150],{"class":1652},[1646,4691,4692],{"class":1680},"project-d",[1646,4694,2156],{"class":1652},[1646,4696,1792],{"class":1652},[1646,4698,4568],{"class":1656},[1646,4700,2147],{"class":1652},[1646,4702,2150],{"class":1652},[1646,4704,4705],{"class":1680},"Project D",[1646,4707,2156],{"class":1652},[1646,4709,1792],{"class":1652},[1646,4711,4582],{"class":1656},[1646,4713,2147],{"class":1652},[1646,4715,2150],{"class":1652},[1646,4717,4589],{"class":1680},[1646,4719,2156],{"class":1652},[1646,4721,2187],{"class":1652},[1646,4723,4724,4726,4728,4730,4732,4735,4737,4739,4741,4743,4745,4748,4750,4752,4754,4756,4758,4760,4762],{"class":1648,"line":2055},[1646,4725,2141],{"class":1652},[1646,4727,2144],{"class":1656},[1646,4729,2147],{"class":1652},[1646,4731,2150],{"class":1652},[1646,4733,4734],{"class":1680},"project-delta",[1646,4736,2156],{"class":1652},[1646,4738,1792],{"class":1652},[1646,4740,4568],{"class":1656},[1646,4742,2147],{"class":1652},[1646,4744,2150],{"class":1652},[1646,4746,4747],{"class":1680},"Project Delta",[1646,4749,2156],{"class":1652},[1646,4751,1792],{"class":1652},[1646,4753,4582],{"class":1656},[1646,4755,2147],{"class":1652},[1646,4757,2150],{"class":1652},[1646,4759,4632],{"class":1680},[1646,4761,2156],{"class":1652},[1646,4763,2187],{"class":1652},[1646,4765,4766,4768,4770,4772,4774,4777,4779,4781,4783,4785,4787,4790,4792,4794,4796,4798,4800,4802,4804],{"class":1648,"line":2061},[1646,4767,2141],{"class":1652},[1646,4769,2144],{"class":1656},[1646,4771,2147],{"class":1652},[1646,4773,2150],{"class":1652},[1646,4775,4776],{"class":1680},"project-omega",[1646,4778,2156],{"class":1652},[1646,4780,1792],{"class":1652},[1646,4782,4568],{"class":1656},[1646,4784,2147],{"class":1652},[1646,4786,2150],{"class":1652},[1646,4788,4789],{"class":1680},"Project Omega",[1646,4791,2156],{"class":1652},[1646,4793,1792],{"class":1652},[1646,4795,4582],{"class":1656},[1646,4797,2147],{"class":1652},[1646,4799,2150],{"class":1652},[1646,4801,4675],{"class":1680},[1646,4803,2156],{"class":1652},[1646,4805,2187],{"class":1652},[1646,4807,4808],{"class":1648,"line":2070},[1646,4809,2369],{"class":1709},[1646,4811,4812],{"class":1648,"line":2080},[1646,4813,2026],{"emptyLinePlaceholder":2025},[1646,4815,4816,4818,4820,4822,4824,4826,4828,4830,4832,4834,4836,4838,4840,4842,4844,4846,4848,4850,4852,4854,4856],{"class":1648,"line":2090},[1646,4817,2380],{"class":1670},[1646,4819,2383],{"class":2131},[1646,4821,2386],{"class":1652},[1646,4823,2390],{"class":2389},[1646,4825,2147],{"class":1652},[1646,4827,2395],{"class":1652},[1646,4829,2144],{"class":1656},[1646,4831,2147],{"class":1652},[1646,4833,2403],{"class":2402},[1646,4835,1792],{"class":1652},[1646,4837,4568],{"class":1656},[1646,4839,2147],{"class":1652},[1646,4841,2403],{"class":2402},[1646,4843,1792],{"class":1652},[1646,4845,4582],{"class":1656},[1646,4847,2147],{"class":1652},[1646,4849,2403],{"class":2402},[1646,4851,2422],{"class":1652},[1646,4853,2425],{"class":1709},[1646,4855,2428],{"class":1652},[1646,4857,2431],{"class":1652},[1646,4859,4860,4862,4864,4866,4868,4870,4872,4874],{"class":1648,"line":2095},[1646,4861,2437],{"class":1709},[1646,4863,1584],{"class":1652},[1646,4865,2442],{"class":1709},[1646,4867,2445],{"class":1652},[1646,4869,2448],{"class":1656},[1646,4871,2451],{"class":1652},[1646,4873,2390],{"class":1709},[1646,4875,2456],{"class":1656},[1646,4877,4878],{"class":1648,"line":2120},[1646,4879,2462],{"class":1652},[1646,4881,4882,4884,4886],{"class":1648,"line":2138},[1646,4883,2083],{"class":1652},[1646,4885,2100],{"class":1656},[1646,4887,1659],{"class":1652},[1586,4889,4891],{"id":4890},"multi-select","Multi-select",[1544,4893,4894,4895,4898,4899,4902,4903,1576,4906,1611,4909,4912],{},"With ",[1548,4896,4897],{},"allowMultiSelect",", a click toggles an item and ctrl\u002Fcmd-click extends the selection; the component rings the selected items itself and reports each toggle through ",[1548,4900,4901],{},"select",". Dragging any selected item moves the whole selection as one block, in its current order, and a lone unselected item still drags on its own. The exposed ",[1548,4904,4905],{},"selectAll",[1548,4907,4908],{},"clearSelection",[1548,4910,4911],{},"getSelected"," methods drive the rest.",[1617,4914,4915,4921],{"label":1619},[1621,4916,1628,4918],{"className":4917},[1626],[1630,4919],{"name":4920},"drag-and-drop-multi-select",[1634,4922,4923],{"v-slot:code":1636},[1638,4924,4926],{"className":1640,"code":4925,"language":1642,"meta":1636,"style":1636},"\u003Ctemplate>\n  \u003Cdiv class=\"flex w-full flex-col gap-4\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003CUButton\n        size=\"sm\"\n        color=\"neutral\"\n        variant=\"subtle\"\n        @click=\"selectAll\"\n      >\n        Select all\n      \u003C\u002FUButton>\n      \u003CUButton\n        size=\"sm\"\n        color=\"neutral\"\n        variant=\"subtle\"\n        @click=\"clearSelection\"\n      >\n        Clear\n      \u003C\u002FUButton>\n      \u003Cspan class=\"text-xs text-muted\">{{ selected.length }} selected\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\n    \u003CMDragAndDrop\n      ref=\"dragDropRef\"\n      :items=\"items\"\n      :allow-multi-select=\"true\"\n      @select=\"onSelect\"\n    >\n      \u003Ctemplate #default=\"{ item, isSelected, isDragging }\">\n        \u003Cdiv\n          class=\"flex items-center gap-3 rounded-lg border border-default bg-default px-3 py-2.5\"\n          :class=\"isDragging ? 'opacity-60' : ''\"\n        >\n          \u003Cspan\n            class=\"flex size-4 shrink-0 items-center justify-center rounded border transition-colors\"\n            :class=\"isSelected ? 'border-primary bg-primary text-inverted' : 'border-accented'\"\n          >\n            \u003CUIcon\n              v-if=\"isSelected\"\n              name=\"i-lucide-check\"\n              class=\"size-3\"\n            \u002F>\n          \u003C\u002Fspan>\n          \u003CUIcon\n            name=\"i-lucide-grip-vertical\"\n            class=\"size-4 shrink-0 text-dimmed\"\n          \u002F>\n          \u003Cdiv class=\"min-w-0\">\n            \u003Cdiv class=\"text-sm font-medium text-highlighted\">\n              {{ item.name }}\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"text-xs text-muted\">\n              {{ item.status }}\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003C\u002FMDragAndDrop>\n\n    \u003Cp class=\"text-xs text-muted\">\n      Click a row to toggle it; ctrl\u002Fcmd-click to select several. The exposed\n      \u003Ccode>selectAll\u003C\u002Fcode> and \u003Ccode>clearSelection\u003C\u002Fcode> methods drive the buttons.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst dragDropRef = ref\u003C{ clearSelection: () => void, selectAll: () => void }>()\n\nconst items = ref([\n  { id: 'stage-1', name: 'Stage 1', status: 'In Progress' },\n  { id: 'stage-2', name: 'Stage 2', status: 'Completed' },\n  { id: 'stage-3', name: 'Stage 3', status: 'Pending' },\n  { id: 'stage-4', name: 'Stage 4', status: 'In Progress' },\n])\n\nconst selected = ref\u003Cstring[]>([])\n\nfunction onSelect(item: { id: string, name: string, status: string }, isSelected: boolean) {\n  selected.value = isSelected\n    ? [...selected.value, item.id]\n    : selected.value.filter(id => id !== item.id)\n}\n\nfunction clearSelection() {\n  dragDropRef.value?.clearSelection()\n  selected.value = []\n}\n\nfunction selectAll() {\n  dragDropRef.value?.selectAll()\n  selected.value = items.value.map(item => item.id)\n}\n\u003C\u002Fscript>\n",[1548,4927,4928,4936,4954,4972,4978,4991,5004,5017,5032,5037,5042,5050,5056,5068,5080,5092,5106,5110,5115,5123,5150,5158,5162,5168,5182,5196,5213,5228,5232,5265,5271,5283,5295,5299,5306,5319,5333,5337,5343,5357,5370,5383,5387,5395,5401,5413,5425,5429,5448,5466,5471,5480,5498,5503,5511,5519,5527,5535,5543,5547,5565,5570,5605,5613,5621,5629,5633,5653,5700,5704,5716,5760,5803,5846,5888,5892,5896,5919,5923,5975,5989,6015,6051,6055,6059,6070,6086,6099,6103,6107,6117,6131,6167,6171],{"__ignoreMap":1636},[1646,4929,4930,4932,4934],{"class":1648,"line":1649},[1646,4931,1653],{"class":1652},[1646,4933,1634],{"class":1656},[1646,4935,1659],{"class":1652},[1646,4937,4938,4940,4942,4944,4946,4948,4950,4952],{"class":1648,"line":1662},[1646,4939,1665],{"class":1652},[1646,4941,1621],{"class":1656},[1646,4943,1671],{"class":1670},[1646,4945,1674],{"class":1652},[1646,4947,1677],{"class":1652},[1646,4949,2694],{"class":1680},[1646,4951,1677],{"class":1652},[1646,4953,1659],{"class":1652},[1646,4955,4956,4958,4960,4962,4964,4966,4968,4970],{"class":1648,"line":1688},[1646,4957,1691],{"class":1652},[1646,4959,1621],{"class":1656},[1646,4961,1671],{"class":1670},[1646,4963,1674],{"class":1652},[1646,4965,1677],{"class":1652},[1646,4967,3292],{"class":1680},[1646,4969,1677],{"class":1652},[1646,4971,1659],{"class":1652},[1646,4973,4974,4976],{"class":1648,"line":1697},[1646,4975,1771],{"class":1652},[1646,4977,2743],{"class":1656},[1646,4979,4980,4983,4985,4987,4989],{"class":1648,"line":1715},[1646,4981,4982],{"class":1670},"        size",[1646,4984,1674],{"class":1652},[1646,4986,1677],{"class":1652},[1646,4988,1949],{"class":1680},[1646,4990,1712],{"class":1652},[1646,4992,4993,4996,4998,5000,5002],{"class":1648,"line":1730},[1646,4994,4995],{"class":1670},"        color",[1646,4997,1674],{"class":1652},[1646,4999,1677],{"class":1652},[1646,5001,2830],{"class":1680},[1646,5003,1712],{"class":1652},[1646,5005,5006,5009,5011,5013,5015],{"class":1648,"line":1745},[1646,5007,5008],{"class":1670},"        variant",[1646,5010,1674],{"class":1652},[1646,5012,1677],{"class":1652},[1646,5014,1964],{"class":1680},[1646,5016,1712],{"class":1652},[1646,5018,5019,5022,5024,5026,5028,5030],{"class":1648,"line":1762},[1646,5020,5021],{"class":1652},"        @",[1646,5023,2876],{"class":1670},[1646,5025,1674],{"class":1652},[1646,5027,1677],{"class":1652},[1646,5029,4905],{"class":1709},[1646,5031,1712],{"class":1652},[1646,5033,5034],{"class":1648,"line":1768},[1646,5035,5036],{"class":1652},"      >\n",[1646,5038,5039],{"class":1648,"line":1805},[1646,5040,5041],{"class":1709},"        Select all\n",[1646,5043,5044,5046,5048],{"class":1648,"line":1814},[1646,5045,2004],{"class":1652},[1646,5047,2905],{"class":1656},[1646,5049,1659],{"class":1652},[1646,5051,5052,5054],{"class":1648,"line":1829},[1646,5053,1771],{"class":1652},[1646,5055,2743],{"class":1656},[1646,5057,5058,5060,5062,5064,5066],{"class":1648,"line":1844},[1646,5059,4982],{"class":1670},[1646,5061,1674],{"class":1652},[1646,5063,1677],{"class":1652},[1646,5065,1949],{"class":1680},[1646,5067,1712],{"class":1652},[1646,5069,5070,5072,5074,5076,5078],{"class":1648,"line":1850},[1646,5071,4995],{"class":1670},[1646,5073,1674],{"class":1652},[1646,5075,1677],{"class":1652},[1646,5077,2830],{"class":1680},[1646,5079,1712],{"class":1652},[1646,5081,5082,5084,5086,5088,5090],{"class":1648,"line":1859},[1646,5083,5008],{"class":1670},[1646,5085,1674],{"class":1652},[1646,5087,1677],{"class":1652},[1646,5089,1964],{"class":1680},[1646,5091,1712],{"class":1652},[1646,5093,5094,5096,5098,5100,5102,5104],{"class":1648,"line":1874},[1646,5095,5021],{"class":1652},[1646,5097,2876],{"class":1670},[1646,5099,1674],{"class":1652},[1646,5101,1677],{"class":1652},[1646,5103,4908],{"class":1709},[1646,5105,1712],{"class":1652},[1646,5107,5108],{"class":1648,"line":1889},[1646,5109,5036],{"class":1652},[1646,5111,5112],{"class":1648,"line":1895},[1646,5113,5114],{"class":1709},"        Clear\n",[1646,5116,5117,5119,5121],{"class":1648,"line":1915},[1646,5118,2004],{"class":1652},[1646,5120,2905],{"class":1656},[1646,5122,1659],{"class":1652},[1646,5124,5125,5127,5129,5131,5133,5135,5137,5139,5141,5144,5146,5148],{"class":1648,"line":1921},[1646,5126,1771],{"class":1652},[1646,5128,1646],{"class":1656},[1646,5130,1671],{"class":1670},[1646,5132,1674],{"class":1652},[1646,5134,1677],{"class":1652},[1646,5136,2042],{"class":1680},[1646,5138,1677],{"class":1652},[1646,5140,3354],{"class":1652},[1646,5142,5143],{"class":1709},"{{ selected.length }} selected",[1646,5145,2083],{"class":1652},[1646,5147,1646],{"class":1656},[1646,5149,1659],{"class":1652},[1646,5151,5152,5154,5156],{"class":1648,"line":1931},[1646,5153,2014],{"class":1652},[1646,5155,1621],{"class":1656},[1646,5157,1659],{"class":1652},[1646,5159,5160],{"class":1648,"line":1939},[1646,5161,2026],{"emptyLinePlaceholder":2025},[1646,5163,5164,5166],{"class":1648,"line":1954},[1646,5165,1691],{"class":1652},[1646,5167,1694],{"class":1656},[1646,5169,5170,5173,5175,5177,5180],{"class":1648,"line":1969},[1646,5171,5172],{"class":1670},"      ref",[1646,5174,1674],{"class":1652},[1646,5176,1677],{"class":1652},[1646,5178,5179],{"class":1680},"dragDropRef",[1646,5181,1712],{"class":1652},[1646,5183,5184,5186,5188,5190,5192,5194],{"class":1648,"line":1975},[1646,5185,1700],{"class":1652},[1646,5187,1565],{"class":1670},[1646,5189,1674],{"class":1652},[1646,5191,1677],{"class":1652},[1646,5193,1565],{"class":1709},[1646,5195,1712],{"class":1652},[1646,5197,5198,5200,5203,5205,5207,5211],{"class":1648,"line":1981},[1646,5199,1700],{"class":1652},[1646,5201,5202],{"class":1670},"allow-multi-select",[1646,5204,1674],{"class":1652},[1646,5206,1677],{"class":1652},[1646,5208,5210],{"class":5209},"sfNiH","true",[1646,5212,1712],{"class":1652},[1646,5214,5215,5217,5219,5221,5223,5226],{"class":1648,"line":1991},[1646,5216,1748],{"class":1652},[1646,5218,4901],{"class":1670},[1646,5220,1674],{"class":1652},[1646,5222,1677],{"class":1652},[1646,5224,5225],{"class":1709},"onSelect",[1646,5227,1712],{"class":1652},[1646,5229,5230],{"class":1648,"line":2001},[1646,5231,1765],{"class":1652},[1646,5233,5234,5236,5238,5240,5242,5244,5246,5248,5250,5252,5255,5257,5259,5261,5263],{"class":1648,"line":2011},[1646,5235,1771],{"class":1652},[1646,5237,1634],{"class":1656},[1646,5239,1776],{"class":1652},[1646,5241,1779],{"class":1670},[1646,5243,1674],{"class":1652},[1646,5245,1677],{"class":1652},[1646,5247,1786],{"class":1652},[1646,5249,1789],{"class":1709},[1646,5251,1792],{"class":1652},[1646,5253,5254],{"class":1709}," isSelected",[1646,5256,1792],{"class":1652},[1646,5258,1795],{"class":1709},[1646,5260,1798],{"class":1652},[1646,5262,1677],{"class":1652},[1646,5264,1659],{"class":1652},[1646,5266,5267,5269],{"class":1648,"line":2022},[1646,5268,1808],{"class":1652},[1646,5270,1811],{"class":1656},[1646,5272,5273,5275,5277,5279,5281],{"class":1648,"line":2029},[1646,5274,1817],{"class":1670},[1646,5276,1674],{"class":1652},[1646,5278,1677],{"class":1652},[1646,5280,1824],{"class":1680},[1646,5282,1712],{"class":1652},[1646,5284,5285,5287,5289,5291,5293],{"class":1648,"line":2049},[1646,5286,1832],{"class":1670},[1646,5288,1674],{"class":1652},[1646,5290,1677],{"class":1652},[1646,5292,1839],{"class":1680},[1646,5294,1712],{"class":1652},[1646,5296,5297],{"class":1648,"line":2055},[1646,5298,1847],{"class":1652},[1646,5300,5301,5303],{"class":1648,"line":2061},[1646,5302,1853],{"class":1652},[1646,5304,5305],{"class":1656},"span\n",[1646,5307,5308,5310,5312,5314,5317],{"class":1648,"line":2070},[1646,5309,1877],{"class":1670},[1646,5311,1674],{"class":1652},[1646,5313,1677],{"class":1652},[1646,5315,5316],{"class":1680},"flex size-4 shrink-0 items-center justify-center rounded border transition-colors",[1646,5318,1712],{"class":1652},[1646,5320,5321,5324,5326,5328,5331],{"class":1648,"line":2080},[1646,5322,5323],{"class":1670},"            :class",[1646,5325,1674],{"class":1652},[1646,5327,1677],{"class":1652},[1646,5329,5330],{"class":1680},"isSelected ? 'border-primary bg-primary text-inverted' : 'border-accented'",[1646,5332,1712],{"class":1652},[1646,5334,5335],{"class":1648,"line":2090},[1646,5336,1972],{"class":1652},[1646,5338,5339,5341],{"class":1648,"line":2095},[1646,5340,3301],{"class":1652},[1646,5342,1856],{"class":1656},[1646,5344,5345,5348,5350,5352,5355],{"class":1648,"line":2120},[1646,5346,5347],{"class":2748},"              v-if",[1646,5349,1674],{"class":1652},[1646,5351,1677],{"class":1652},[1646,5353,5354],{"class":1709},"isSelected",[1646,5356,1712],{"class":1652},[1646,5358,5359,5361,5363,5365,5368],{"class":1648,"line":2138},[1646,5360,3308],{"class":1670},[1646,5362,1674],{"class":1652},[1646,5364,1677],{"class":1652},[1646,5366,5367],{"class":1680},"i-lucide-check",[1646,5369,1712],{"class":1652},[1646,5371,5372,5374,5376,5378,5381],{"class":1648,"line":2190},[1646,5373,3321],{"class":1670},[1646,5375,1674],{"class":1652},[1646,5377,1677],{"class":1652},[1646,5379,5380],{"class":1680},"size-3",[1646,5382,1712],{"class":1652},[1646,5384,5385],{"class":1648,"line":2234},[1646,5386,3334],{"class":1652},[1646,5388,5389,5391,5393],{"class":1648,"line":2278},[1646,5390,1924],{"class":1652},[1646,5392,1646],{"class":1656},[1646,5394,1659],{"class":1652},[1646,5396,5397,5399],{"class":1648,"line":2322},[1646,5398,1853],{"class":1652},[1646,5400,1856],{"class":1656},[1646,5402,5403,5405,5407,5409,5411],{"class":1648,"line":2366},[1646,5404,1862],{"class":1670},[1646,5406,1674],{"class":1652},[1646,5408,1677],{"class":1652},[1646,5410,1869],{"class":1680},[1646,5412,1712],{"class":1652},[1646,5414,5415,5417,5419,5421,5423],{"class":1648,"line":2372},[1646,5416,1877],{"class":1670},[1646,5418,1674],{"class":1652},[1646,5420,1677],{"class":1652},[1646,5422,1884],{"class":1680},[1646,5424,1712],{"class":1652},[1646,5426,5427],{"class":1648,"line":2377},[1646,5428,1892],{"class":1652},[1646,5430,5431,5433,5435,5437,5439,5441,5444,5446],{"class":1648,"line":2434},[1646,5432,1853],{"class":1652},[1646,5434,1621],{"class":1656},[1646,5436,1671],{"class":1670},[1646,5438,1674],{"class":1652},[1646,5440,1677],{"class":1652},[1646,5442,5443],{"class":1680},"min-w-0",[1646,5445,1677],{"class":1652},[1646,5447,1659],{"class":1652},[1646,5449,5450,5452,5454,5456,5458,5460,5462,5464],{"class":1648,"line":2459},[1646,5451,3301],{"class":1652},[1646,5453,1621],{"class":1656},[1646,5455,1671],{"class":1670},[1646,5457,1674],{"class":1652},[1646,5459,1677],{"class":1652},[1646,5461,3349],{"class":1680},[1646,5463,1677],{"class":1652},[1646,5465,1659],{"class":1652},[1646,5467,5468],{"class":1648,"line":2465},[1646,5469,5470],{"class":1709},"              {{ item.name }}\n",[1646,5472,5473,5476,5478],{"class":1648,"line":3366},[1646,5474,5475],{"class":1652},"            \u003C\u002F",[1646,5477,1621],{"class":1656},[1646,5479,1659],{"class":1652},[1646,5481,5482,5484,5486,5488,5490,5492,5494,5496],{"class":1648,"line":3375},[1646,5483,3301],{"class":1652},[1646,5485,1621],{"class":1656},[1646,5487,1671],{"class":1670},[1646,5489,1674],{"class":1652},[1646,5491,1677],{"class":1652},[1646,5493,2042],{"class":1680},[1646,5495,1677],{"class":1652},[1646,5497,1659],{"class":1652},[1646,5499,5500],{"class":1648,"line":3382},[1646,5501,5502],{"class":1709},"              {{ item.status }}\n",[1646,5504,5505,5507,5509],{"class":1648,"line":3395},[1646,5506,5475],{"class":1652},[1646,5508,1621],{"class":1656},[1646,5510,1659],{"class":1652},[1646,5512,5513,5515,5517],{"class":1648,"line":3408},[1646,5514,1924],{"class":1652},[1646,5516,1621],{"class":1656},[1646,5518,1659],{"class":1652},[1646,5520,5521,5523,5525],{"class":1648,"line":3413},[1646,5522,1994],{"class":1652},[1646,5524,1621],{"class":1656},[1646,5526,1659],{"class":1652},[1646,5528,5529,5531,5533],{"class":1648,"line":3418},[1646,5530,2004],{"class":1652},[1646,5532,1634],{"class":1656},[1646,5534,1659],{"class":1652},[1646,5536,5537,5539,5541],{"class":1648,"line":3427},[1646,5538,2014],{"class":1652},[1646,5540,2017],{"class":1656},[1646,5542,1659],{"class":1652},[1646,5544,5545],{"class":1648,"line":3436},[1646,5546,2026],{"emptyLinePlaceholder":2025},[1646,5548,5549,5551,5553,5555,5557,5559,5561,5563],{"class":1648,"line":3445},[1646,5550,1691],{"class":1652},[1646,5552,1544],{"class":1656},[1646,5554,1671],{"class":1670},[1646,5556,1674],{"class":1652},[1646,5558,1677],{"class":1652},[1646,5560,2042],{"class":1680},[1646,5562,1677],{"class":1652},[1646,5564,1659],{"class":1652},[1646,5566,5567],{"class":1648,"line":3454},[1646,5568,5569],{"class":1709},"      Click a row to toggle it; ctrl\u002Fcmd-click to select several. The exposed\n",[1646,5571,5572,5574,5576,5578,5580,5582,5584,5586,5588,5590,5592,5594,5596,5598,5600,5602],{"class":1648,"line":3459},[1646,5573,1771],{"class":1652},[1646,5575,1548],{"class":1656},[1646,5577,3354],{"class":1652},[1646,5579,4905],{"class":1709},[1646,5581,2083],{"class":1652},[1646,5583,1548],{"class":1656},[1646,5585,3354],{"class":1652},[1646,5587,1611],{"class":1709},[1646,5589,1653],{"class":1652},[1646,5591,1548],{"class":1656},[1646,5593,3354],{"class":1652},[1646,5595,4908],{"class":1709},[1646,5597,2083],{"class":1652},[1646,5599,1548],{"class":1656},[1646,5601,3354],{"class":1652},[1646,5603,5604],{"class":1709}," methods drive the buttons.\n",[1646,5606,5607,5609,5611],{"class":1648,"line":3478},[1646,5608,2014],{"class":1652},[1646,5610,1544],{"class":1656},[1646,5612,1659],{"class":1652},[1646,5614,5615,5617,5619],{"class":1648,"line":3515},[1646,5616,2073],{"class":1652},[1646,5618,1621],{"class":1656},[1646,5620,1659],{"class":1652},[1646,5622,5623,5625,5627],{"class":1648,"line":3544},[1646,5624,2083],{"class":1652},[1646,5626,1634],{"class":1656},[1646,5628,1659],{"class":1652},[1646,5630,5631],{"class":1648,"line":3550},[1646,5632,2026],{"emptyLinePlaceholder":2025},[1646,5634,5635,5637,5639,5641,5643,5645,5647,5649,5651],{"class":1648,"line":3559},[1646,5636,1653],{"class":1652},[1646,5638,2100],{"class":1656},[1646,5640,2103],{"class":1670},[1646,5642,2106],{"class":1670},[1646,5644,1674],{"class":1652},[1646,5646,1677],{"class":1652},[1646,5648,2113],{"class":1680},[1646,5650,1677],{"class":1652},[1646,5652,1659],{"class":1652},[1646,5654,5655,5657,5660,5662,5664,5667,5670,5672,5675,5678,5681,5683,5686,5688,5690,5692,5694,5697],{"class":1648,"line":3568},[1646,5656,2123],{"class":1670},[1646,5658,5659],{"class":1709}," dragDropRef ",[1646,5661,1674],{"class":1652},[1646,5663,2132],{"class":2131},[1646,5665,5666],{"class":1652},"\u003C{",[1646,5668,5669],{"class":1656}," clearSelection",[1646,5671,2147],{"class":1652},[1646,5673,5674],{"class":1652}," ()",[1646,5676,5677],{"class":1670}," =>",[1646,5679,5680],{"class":2402}," void",[1646,5682,1792],{"class":1652},[1646,5684,5685],{"class":1656}," selectAll",[1646,5687,2147],{"class":1652},[1646,5689,5674],{"class":1652},[1646,5691,5677],{"class":1670},[1646,5693,5680],{"class":2402},[1646,5695,5696],{"class":1652}," }>",[1646,5698,5699],{"class":1709},"()\n",[1646,5701,5702],{"class":1648,"line":3577},[1646,5703,2026],{"emptyLinePlaceholder":2025},[1646,5705,5706,5708,5710,5712,5714],{"class":1648,"line":3586},[1646,5707,2123],{"class":1670},[1646,5709,2126],{"class":1709},[1646,5711,1674],{"class":1652},[1646,5713,2132],{"class":2131},[1646,5715,2135],{"class":1709},[1646,5717,5718,5720,5722,5724,5726,5729,5731,5733,5735,5737,5739,5742,5744,5746,5749,5751,5753,5756,5758],{"class":1648,"line":3591},[1646,5719,2141],{"class":1652},[1646,5721,2144],{"class":1656},[1646,5723,2147],{"class":1652},[1646,5725,2150],{"class":1652},[1646,5727,5728],{"class":1680},"stage-1",[1646,5730,2156],{"class":1652},[1646,5732,1792],{"class":1652},[1646,5734,4568],{"class":1656},[1646,5736,2147],{"class":1652},[1646,5738,2150],{"class":1652},[1646,5740,5741],{"class":1680},"Stage 1",[1646,5743,2156],{"class":1652},[1646,5745,1792],{"class":1652},[1646,5747,5748],{"class":1656}," status",[1646,5750,2147],{"class":1652},[1646,5752,2150],{"class":1652},[1646,5754,5755],{"class":1680},"In Progress",[1646,5757,2156],{"class":1652},[1646,5759,2187],{"class":1652},[1646,5761,5762,5764,5766,5768,5770,5773,5775,5777,5779,5781,5783,5786,5788,5790,5792,5794,5796,5799,5801],{"class":1648,"line":3612},[1646,5763,2141],{"class":1652},[1646,5765,2144],{"class":1656},[1646,5767,2147],{"class":1652},[1646,5769,2150],{"class":1652},[1646,5771,5772],{"class":1680},"stage-2",[1646,5774,2156],{"class":1652},[1646,5776,1792],{"class":1652},[1646,5778,4568],{"class":1656},[1646,5780,2147],{"class":1652},[1646,5782,2150],{"class":1652},[1646,5784,5785],{"class":1680},"Stage 2",[1646,5787,2156],{"class":1652},[1646,5789,1792],{"class":1652},[1646,5791,5748],{"class":1656},[1646,5793,2147],{"class":1652},[1646,5795,2150],{"class":1652},[1646,5797,5798],{"class":1680},"Completed",[1646,5800,2156],{"class":1652},[1646,5802,2187],{"class":1652},[1646,5804,5805,5807,5809,5811,5813,5816,5818,5820,5822,5824,5826,5829,5831,5833,5835,5837,5839,5842,5844],{"class":1648,"line":3647},[1646,5806,2141],{"class":1652},[1646,5808,2144],{"class":1656},[1646,5810,2147],{"class":1652},[1646,5812,2150],{"class":1652},[1646,5814,5815],{"class":1680},"stage-3",[1646,5817,2156],{"class":1652},[1646,5819,1792],{"class":1652},[1646,5821,4568],{"class":1656},[1646,5823,2147],{"class":1652},[1646,5825,2150],{"class":1652},[1646,5827,5828],{"class":1680},"Stage 3",[1646,5830,2156],{"class":1652},[1646,5832,1792],{"class":1652},[1646,5834,5748],{"class":1656},[1646,5836,2147],{"class":1652},[1646,5838,2150],{"class":1652},[1646,5840,5841],{"class":1680},"Pending",[1646,5843,2156],{"class":1652},[1646,5845,2187],{"class":1652},[1646,5847,5848,5850,5852,5854,5856,5859,5861,5863,5865,5867,5869,5872,5874,5876,5878,5880,5882,5884,5886],{"class":1648,"line":3679},[1646,5849,2141],{"class":1652},[1646,5851,2144],{"class":1656},[1646,5853,2147],{"class":1652},[1646,5855,2150],{"class":1652},[1646,5857,5858],{"class":1680},"stage-4",[1646,5860,2156],{"class":1652},[1646,5862,1792],{"class":1652},[1646,5864,4568],{"class":1656},[1646,5866,2147],{"class":1652},[1646,5868,2150],{"class":1652},[1646,5870,5871],{"class":1680},"Stage 4",[1646,5873,2156],{"class":1652},[1646,5875,1792],{"class":1652},[1646,5877,5748],{"class":1656},[1646,5879,2147],{"class":1652},[1646,5881,2150],{"class":1652},[1646,5883,5755],{"class":1680},[1646,5885,2156],{"class":1652},[1646,5887,2187],{"class":1652},[1646,5889,5890],{"class":1648,"line":3684},[1646,5891,2369],{"class":1709},[1646,5893,5894],{"class":1648,"line":3727},[1646,5895,2026],{"emptyLinePlaceholder":2025},[1646,5897,5898,5900,5903,5905,5907,5909,5912,5914,5916],{"class":1648,"line":3769},[1646,5899,2123],{"class":1670},[1646,5901,5902],{"class":1709}," selected ",[1646,5904,1674],{"class":1652},[1646,5906,2132],{"class":2131},[1646,5908,1653],{"class":1652},[1646,5910,5911],{"class":2402},"string",[1646,5913,2425],{"class":1709},[1646,5915,3354],{"class":1652},[1646,5917,5918],{"class":1709},"([])\n",[1646,5920,5921],{"class":1648,"line":3774},[1646,5922,2026],{"emptyLinePlaceholder":2025},[1646,5924,5925,5927,5930,5932,5935,5937,5939,5941,5943,5945,5947,5949,5951,5953,5955,5957,5959,5961,5964,5966,5968,5971,5973],{"class":1648,"line":3803},[1646,5926,2380],{"class":1670},[1646,5928,5929],{"class":2131}," onSelect",[1646,5931,2386],{"class":1652},[1646,5933,5934],{"class":2389},"item",[1646,5936,2147],{"class":1652},[1646,5938,2395],{"class":1652},[1646,5940,2144],{"class":1656},[1646,5942,2147],{"class":1652},[1646,5944,2403],{"class":2402},[1646,5946,1792],{"class":1652},[1646,5948,4568],{"class":1656},[1646,5950,2147],{"class":1652},[1646,5952,2403],{"class":2402},[1646,5954,1792],{"class":1652},[1646,5956,5748],{"class":1656},[1646,5958,2147],{"class":1652},[1646,5960,2403],{"class":2402},[1646,5962,5963],{"class":1652}," },",[1646,5965,5254],{"class":2389},[1646,5967,2147],{"class":1652},[1646,5969,5970],{"class":2402}," boolean",[1646,5972,2428],{"class":1652},[1646,5974,2431],{"class":1652},[1646,5976,5977,5980,5982,5984,5986],{"class":1648,"line":3831},[1646,5978,5979],{"class":1709},"  selected",[1646,5981,1584],{"class":1652},[1646,5983,2442],{"class":1709},[1646,5985,2445],{"class":1652},[1646,5987,5988],{"class":1709}," isSelected\n",[1646,5990,5991,5994,5996,5998,6001,6003,6005,6007,6009,6011,6013],{"class":1648,"line":3836},[1646,5992,5993],{"class":1652},"    ?",[1646,5995,2448],{"class":1656},[1646,5997,2451],{"class":1652},[1646,5999,6000],{"class":1709},"selected",[1646,6002,1584],{"class":1652},[1646,6004,2442],{"class":1709},[1646,6006,1792],{"class":1652},[1646,6008,1789],{"class":1709},[1646,6010,1584],{"class":1652},[1646,6012,1583],{"class":1709},[1646,6014,2456],{"class":1656},[1646,6016,6017,6020,6023,6025,6027,6029,6032,6034,6036,6038,6040,6043,6045,6047,6049],{"class":1648,"line":3849},[1646,6018,6019],{"class":1652},"    :",[1646,6021,6022],{"class":1709}," selected",[1646,6024,1584],{"class":1652},[1646,6026,2442],{"class":1709},[1646,6028,1584],{"class":1652},[1646,6030,6031],{"class":2131},"filter",[1646,6033,2386],{"class":1656},[1646,6035,1583],{"class":2389},[1646,6037,5677],{"class":1670},[1646,6039,2144],{"class":1709},[1646,6041,6042],{"class":1652}," !==",[1646,6044,1789],{"class":1709},[1646,6046,1584],{"class":1652},[1646,6048,1583],{"class":1709},[1646,6050,3800],{"class":1656},[1646,6052,6053],{"class":1648,"line":3890},[1646,6054,2462],{"class":1652},[1646,6056,6057],{"class":1648,"line":3931},[1646,6058,2026],{"emptyLinePlaceholder":2025},[1646,6060,6061,6063,6065,6068],{"class":1648,"line":3972},[1646,6062,2380],{"class":1670},[1646,6064,5669],{"class":2131},[1646,6066,6067],{"class":1652},"()",[1646,6069,2431],{"class":1652},[1646,6071,6072,6075,6077,6079,6082,6084],{"class":1648,"line":4013},[1646,6073,6074],{"class":1709},"  dragDropRef",[1646,6076,1584],{"class":1652},[1646,6078,2442],{"class":1709},[1646,6080,6081],{"class":1652},"?.",[1646,6083,4908],{"class":2131},[1646,6085,5699],{"class":1656},[1646,6087,6088,6090,6092,6094,6096],{"class":1648,"line":4054},[1646,6089,5979],{"class":1709},[1646,6091,1584],{"class":1652},[1646,6093,2442],{"class":1709},[1646,6095,2445],{"class":1652},[1646,6097,6098],{"class":1656}," []\n",[1646,6100,6101],{"class":1648,"line":4098},[1646,6102,2462],{"class":1652},[1646,6104,6105],{"class":1648,"line":4103},[1646,6106,2026],{"emptyLinePlaceholder":2025},[1646,6108,6109,6111,6113,6115],{"class":1648,"line":4108},[1646,6110,2380],{"class":1670},[1646,6112,5685],{"class":2131},[1646,6114,6067],{"class":1652},[1646,6116,2431],{"class":1652},[1646,6118,6119,6121,6123,6125,6127,6129],{"class":1648,"line":4153},[1646,6120,6074],{"class":1709},[1646,6122,1584],{"class":1652},[1646,6124,2442],{"class":1709},[1646,6126,6081],{"class":1652},[1646,6128,4905],{"class":2131},[1646,6130,5699],{"class":1656},[1646,6132,6133,6135,6137,6139,6141,6144,6146,6148,6150,6153,6155,6157,6159,6161,6163,6165],{"class":1648,"line":4172},[1646,6134,5979],{"class":1709},[1646,6136,1584],{"class":1652},[1646,6138,2442],{"class":1709},[1646,6140,2445],{"class":1652},[1646,6142,6143],{"class":1709}," items",[1646,6145,1584],{"class":1652},[1646,6147,2442],{"class":1709},[1646,6149,1584],{"class":1652},[1646,6151,6152],{"class":2131},"map",[1646,6154,2386],{"class":1656},[1646,6156,5934],{"class":2389},[1646,6158,5677],{"class":1670},[1646,6160,1789],{"class":1709},[1646,6162,1584],{"class":1652},[1646,6164,1583],{"class":1709},[1646,6166,3800],{"class":1656},[1646,6168,6169],{"class":1648,"line":4177},[1646,6170,2462],{"class":1652},[1646,6172,6174,6176,6178],{"class":1648,"line":6173},94,[1646,6175,2083],{"class":1652},[1646,6177,2100],{"class":1656},[1646,6179,1659],{"class":1652},[1586,6181,6183],{"id":6182},"props","Props",[6185,6186,6187,6215,6220,6233,6247,6251,6262,6275,6282,6287,6291,6295],"component-props",{},[6188,6189,6191,6192,6194,6195,6198,6199,6202,6203,6205,6206,6208,6209,6211,6212,6214],"component-prop",{"name":1565,"type":6190,":required":5210},"DragItem[]","The items to render. Each needs an ",[1548,6193,1583],{}," — used as the ",[1548,6196,6197],{},"layout-id"," and the\nselection key — and may carry anything else your slot reads. The type allows\n",[1548,6200,6201],{},"string | number",", but ",[1548,6204,1583],{}," is bound straight to ",[1548,6207,6197],{},", so prefer a\nstring: a numeric id reaches ",[1548,6210,6197],{}," unchanged and logs a Vue prop-type\nwarning on every item. Changes are watched deeply and reset the component's\ninternal copy, so writing a new array back from ",[1548,6213,1561],{}," is safe.",[6188,6216,6219],{"name":1603,"type":6217,"default":6218},"'list' | 'grid' | 'masonry'","'list'","How the items are arranged. See the table above.",[6188,6221,6224,6225,6227,6228,6230,6231,1584],{"name":2498,"type":6222,"default":6223},"'sort' | 'move' | 'copy'","'sort'","What a drop means, and whether three drop zones are rendered beneath the\ncontainer. In ",[1548,6226,1554],{}," mode the drag operation is announced to the platform as\n",[1548,6229,1554],{}," rather than ",[1548,6232,1550],{},[6188,6234,6238,6239,6242,6243,6246],{"name":6235,"type":6236,"default":6237},"disabled","boolean","false","Blocks dragging — the container ignores ",[1548,6240,6241],{},"dragstart"," — and dims every item with\na ",[1548,6244,6245],{},"cursor-not-allowed"," and reduced opacity. Drop handling is not separately\ngated.",[6188,6248,6250],{"name":6249,"type":6236,"default":6237},"showHandle","Renders a grip icon in the item's top-right corner, revealed on hover. It is\npresentation only: dragging still works from anywhere on the item.",[6188,6252,6254,6255,6257,6258,6261],{"name":1610,"type":6253,"default":3166},"number","Column count for ",[1548,6256,4191],{},", used to build the ",[1548,6259,6260],{},"grid-cols-*"," class.\nIgnored by the other layouts.",[6188,6263,6264,6265,6267,6268,2759,6270,6272,6273,1584],{"name":1614,"type":6253,"default":3181},"Spacing, interpreted per layout: a Tailwind step in ",[1548,6266,1607],{}," (divided by four),\npixels of ",[1548,6269,2649],{},[1548,6271,2619],{},", unused in ",[1548,6274,2590],{},[6188,6276,6277,6278,6281],{"name":4897,"type":6236,"default":6237},"Turns on click and ctrl\u002Fcmd-click selection, tracked in a ",[1548,6279,6280],{},"Set"," of ids and\nreflected with a blue ring. Exposed methods cover the rest — see below.",[6188,6283,6286],{"name":6284,"type":6253,"default":6285},"animationDuration","0.3","Duration of the spring that settles items into place after a reorder. Read as\na spring duration, not milliseconds.",[6188,6288,6290],{"name":6289,"type":5911},"class","Appended to the container's own layout classes.",[6188,6292,6294],{"name":6293,"type":5911},"itemClass","Appended to each item's state-derived classes.",[6188,6296,6298],{"name":6297,"type":6236,"default":5210},"snapToGrid","Declared but not wired: nothing in the component reads it, so it has no effect.",[1586,6300,6302],{"id":6301},"events","Events",[6304,6305,6306,6314,6319,6324,6335],"component-events",{},[6307,6308,6310,6311,6313],"component-event",{"name":1561,"type":6309},"(items: DragItem[]) => void","The full reordered array, fired after a reorder on an item and — in ",[1548,6312,1550],{}," mode\n— after a removal via a drop zone. This is the only way the new order gets out;\nyour own array is never touched.",[6307,6315,6318],{"name":6316,"type":6317},"dragStart","(item: DragItem, index: number) => void","Fired when a drag begins, with the item and the index it started from.",[6307,6320,6323],{"name":6321,"type":6322},"dragEnd","(item: DragItem, oldIndex: number, newIndex: number) => void","Fired after a successful reorder, with where the item came from and where it\nlanded. Not fired when the drag ends without a valid target.",[6307,6325,6327,6328,6330,6331,1580,6333,1584],{"name":2569,"type":6326},"(item: DragItem, zone: number) => void","Fired when an item is dropped on one of the three drop zones, with the zero-based\nzone index. Only meaningful when ",[1548,6329,2498],{}," is ",[1548,6332,1550],{},[1548,6334,1554],{},[6307,6336,6338,6339,1584],{"name":4901,"type":6337},"(item: DragItem, selected: boolean) => void","Fired on every selection toggle, with the item and whether it is now selected.\nRequires ",[1548,6340,4897],{},[1586,6342,6344],{"id":6343},"slots","Slots",[6346,6347,6348],"component-slots",{},[6349,6350,6351,6352,6355,6356,6359],"component-slot-row",{"name":1779},"Replaces each item's content, scoped with ",[1548,6353,6354],{},"{ item, index, isDragging, isOver, isSelected }"," — the three booleans reflect live drag state, so a slot can react\nto a drag without tracking it itself. The slot's wrapper is the ",[1548,6357,6358],{},"motion","\nelement that carries the drag handlers; put a real element inside it.",[1586,6361,6363],{"id":6362},"ui","UI",[1544,6365,6366,6367,6373,6374,2759,6377,1584],{},"This component's theme exposes the slots below. Override any of them per instance with the ",[6368,6369,6370,6372],"a",{"href":21},[1548,6371,6362],{}," prop",", or app-wide under ",[1548,6375,6376],{},"ui.dragAndDrop",[1548,6378,6379],{},"app.config.ts",[6185,6381,6382],{},[6188,6383,6385],{"name":6362,"type":6384},"object","Per-slot classes merged over the theme defaults.",[6346,6387,6388,6394,6399,6405,6411,6417,6423,6429,6435],{},[6349,6389,6391],{"name":6390},"root",[1548,6392,6393],{},"drag-drop-container relative min-h-32",[6349,6395,6396],{"name":5934},[1548,6397,6398],{},"drag-item group relative cursor-pointer transition-all duration-200",[6349,6400,6402],{"name":6401},"itemDefault",[1548,6403,6404],{},"p-4 bg-default rounded-lg border border-default",[6349,6406,6408],{"name":6407},"itemHandle",[1548,6409,6410],{},"absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity cursor-grab",[6349,6412,6414],{"name":6413},"itemHandleIcon",[1548,6415,6416],{},"w-4 h-4 text-dimmed",[6349,6418,6420],{"name":6419},"dropIndicator",[1548,6421,6422],{},"h-1 shrink-0 rounded-full bg-primary shadow-[0_0_0_2px_var(--ui-bg)] animate-pulse",[6349,6424,6426],{"name":6425},"dropZone",[1548,6427,6428],{},"drop-zone min-h-24 border-2 border-dashed border-default dark:border-default rounded-lg flex items-center justify-center transition-all duration-200",[6349,6430,6432],{"name":6431},"dropZoneContent",[1548,6433,6434],{},"text-center text-muted",[6349,6436,6438],{"name":6437},"dropZoneIcon",[1548,6439,6440],{},"w-6 h-6 mx-auto mb-2",[1586,6442,6444],{"id":6443},"accessibility","Accessibility",[1544,6446,6447,6448,6451,6452,6455,6456,1551,6458,1584],{},"There is no ARIA on the container or on the items, and no keyboard alternative to\ndragging. Items are plain ",[1548,6449,6450],{},"motion.div"," elements with ",[1548,6453,6454],{},"draggable"," set — not\nfocusable, no role, no live region. A keyboard user cannot reorder anything; the\nclick-to-select path needs a pointer too, since it is bound to ",[1548,6457,2876],{},[1548,6459,6460],{},"mousedown",[1544,6462,6463,6464,6466],{},"The default card in the fallback slot is a ",[1548,6465,1621],{},", so when you use the default slot\nyour items are not buttons or list items either. If the order is meaningful data,\nsupply a real interactive element in your slot and manage focus and announcements\nyourself.",[1544,6468,6469,6470,6472,6473,6475],{},"The grip handle revealed by ",[1548,6471,6249],{}," is a decorative ",[1548,6474,1621],{}," with an icon and no\naccessible name.",[1544,6477,6478,6479,6481,6482,6485,6486,1611,6489,6492],{},"Motion is not reduced: the settle spring runs at ",[1548,6480,6284],{}," regardless of\n",[1548,6483,6484],{},"prefers-reduced-motion",". The dragged item's ",[1548,6487,6488],{},"scale-105",[1548,6490,6491],{},"rotate"," are CSS\ntransitions on the same terms.",[1586,6494,6496],{"id":6495},"performance","Performance",[6498,6499,6500,6513,6531,6540,6549],"ul",{},[6501,6502,6503,6504,6506,6507,1611,6509,6512],"li",{},"Each item is a ",[1548,6505,6358],{}," element with a stable ",[1548,6508,6197],{},[1548,6510,6511],{},":initial=\"false\"",",\nso the reorder animation is a layout transition on already-mounted nodes rather\nthan a mount\u002Funmount cycle.",[6501,6514,6515,6516,6519,6520,6523,6524,6526,6527,6530],{},"All state is local: ",[1548,6517,6518],{},"sortedItems"," is a ref, ",[1548,6521,6522],{},"selectedItems"," a ",[1548,6525,6280],{},", and drag\nstate a single ",[1548,6528,6529],{},"reactive"," object. Nothing is emitted per frame.",[6501,6532,6533,6535,6536,6539],{},[1548,6534,1565],{}," is watched with ",[1548,6537,6538],{},"deep: true",", so in-place mutations to your array do\nreset the internal copy — at the cost of a full traversal of the array on change.",[6501,6541,6542,6545,6546,6548],{},[1548,6543,6544],{},"getItemStyles"," returns an empty object for every layout except ",[1548,6547,2619],{},", so\nthe style binding is a no-op write in the common case.",[6501,6550,6551,6552,6555,6556,6559,6560,6563],{},"The drop indicator is absolutely positioned, so revealing or moving it costs no\nlayout and the list never shifts under the pointer. ",[1548,6553,6554],{},"dragover"," writes nothing\nwhen the gap it resolves to has not changed, and ",[1548,6557,6558],{},"dragleave"," clears the target\nonly when the pointer actually leaves the container — checked against\n",[1548,6561,6562],{},"relatedTarget"," — rather than on every leave, which would blink the indicator.",[6565,6566,6567,6568,6571,6572,6575,6576,1551,6578,6580,6581,1580,6584,6587],"tip",{},"Reordering commits on ",[1548,6569,6570],{},"dragend"," using the gap recorded under the pointer, so the\nrow drops exactly where the inline indicator sat when you let go. A drag released\nover empty space, back onto its own row, or anywhere inside a multi-selection that\nis already moving is a no-op — the new order is only emitted when it actually\nchanges. The inline indicator is rendered for ",[1548,6573,6574],{},"layout=\"list\"","; ",[1548,6577,1607],{},[1548,6579,2619],{}," fall back to a ring on the hovered row. For an explicit target outside\nthe row order itself, ",[1548,6582,6583],{},"mode: 'move'",[1548,6585,6586],{},"'copy'"," gives you the built-in zones\ninstead.",[6589,6590,6591],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":1636,"searchDepth":1662,"depth":1662,"links":6593},[6594,6595,6596,6597,6598,6599,6600,6601,6602,6603,6604],{"id":1588,"depth":1662,"text":16},{"id":2474,"depth":1662,"text":2475},{"id":2492,"depth":1662,"text":2493},{"id":1607,"depth":1662,"text":4186},{"id":4890,"depth":1662,"text":4891},{"id":6182,"depth":1662,"text":6183},{"id":6301,"depth":1662,"text":6302},{"id":6343,"depth":1662,"text":6344},{"id":6362,"depth":1662,"text":6363},{"id":6443,"depth":1662,"text":6444},{"id":6495,"depth":1662,"text":6496},"A sortable list, grid or masonry of items that reorder on drag and report the new order.","md",null,{},{"title":761,"description":6605},"IQdRCcuI3UlOt68Sa9YJCKP0xKJXthLDDqHJbsfiEzs",[6612,6614],{"title":757,"path":758,"stem":759,"description":6613,"children":-1},"macOS-style dock with magnification effects and smooth animations.",{"title":765,"path":766,"stem":767,"description":6615,"children":-1},"A slide-in panel with animated content and optional handle.",1794099623853]