[{"data":1,"prerenderedAt":1969},["ShallowReactive",2],{"navigation_docs":3,"-composables-use-draggable":81,"-composables-use-draggable-surround":807,"preview-examples/composables/DraggableDemo.vue":812,"mdc--bubook-key":813},[4,25,63],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","/getting-started/configuration","1.getting-started/3.configuration","i-lucide-settings",{"title":26,"path":27,"stem":28,"children":29},"Composables","/composables","2.composables",[30,33,38,43,48,53,58],{"title":11,"path":27,"stem":31,"icon":32},"2.composables/index","i-lucide-box",{"title":34,"path":35,"stem":36,"icon":37},"useAnimate","/composables/use-animate","2.composables/1.use-animate","i-ph-play-circle",{"title":39,"path":40,"stem":41,"icon":42},"useWaapiAnimate","/composables/use-waapi-animate","2.composables/2.use-waapi-animate","i-ph-lightning",{"title":44,"path":45,"stem":46,"icon":47},"useAnimatable","/composables/use-animatable","2.composables/3.use-animatable","i-ph-cube",{"title":49,"path":50,"stem":51,"icon":52},"useSplitText","/composables/use-split-text","2.composables/4.use-split-text","i-ph-text-t",{"title":54,"path":55,"stem":56,"icon":57},"useLayout","/composables/use-layout","2.composables/5.use-layout","i-ph-layout",{"title":59,"path":60,"stem":61,"icon":62},"useDraggable","/composables/use-draggable","2.composables/6.use-draggable","i-ph-hand-grabbing",{"title":64,"path":65,"stem":66,"children":67},"Misc","/misc","4.misc",[68,71,76],{"title":11,"path":65,"stem":69,"icon":70},"4.misc/index","i-ph-puzzle-piece",{"title":72,"path":73,"stem":74,"icon":75},"Easings","/misc/easings","4.misc/1.easings","i-ph-chart-line",{"title":77,"path":78,"stem":79,"icon":80},"Utils","/misc/utils","4.misc/2.utils","i-ph-wrench",{"id":82,"title":59,"body":83,"description":800,"extension":801,"links":802,"meta":803,"navigation":804,"path":60,"seo":805,"stem":61,"__hash__":806},"docs/2.composables/6.use-draggable.md",{"type":84,"value":85,"toc":790},"minimark",[86,102,107,196,201,215,219,223,227,245,253,258,371,375,379,778,786],[87,88,89,90,93,94,101],"p",{},"The ",[91,92,59],"code",{}," composable wraps the ",[95,96,100],"a",{"href":97,"rel":98},"https://animejs.com/documentation/draggable",[99],"nofollow","createDraggable"," function from AnimeJS.",[103,104,106],"h2",{"id":105},"type-definition","Type Definition",[108,109,114],"pre",{"className":110,"code":111,"language":112,"meta":113,"style":113},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useDraggable(\n  target: DraggableTypes[\"target\"],\n  options?: DraggableOptions\n): ProxyReturns\u003CDraggable>\n","ts","",[91,115,116,133,166,178],{"__ignoreMap":113},[117,118,121,125,129],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"spNyl","function",[117,126,128],{"class":127},"s2Zo4"," useDraggable",[117,130,132],{"class":131},"sMK4o","(\n",[117,134,136,140,143,147,151,154,158,160,163],{"class":119,"line":135},2,[117,137,139],{"class":138},"sHdIc","  target",[117,141,142],{"class":131},":",[117,144,146],{"class":145},"sBMFI"," DraggableTypes",[117,148,150],{"class":149},"sTEyZ","[",[117,152,153],{"class":131},"\"",[117,155,157],{"class":156},"sfazB","target",[117,159,153],{"class":131},[117,161,162],{"class":149},"]",[117,164,165],{"class":131},",\n",[117,167,169,172,175],{"class":119,"line":168},3,[117,170,171],{"class":138},"  options",[117,173,174],{"class":131},"?:",[117,176,177],{"class":145}," DraggableOptions\n",[117,179,181,184,187,190,193],{"class":119,"line":180},4,[117,182,183],{"class":131},"):",[117,185,186],{"class":145}," ProxyReturns",[117,188,189],{"class":131},"\u003C",[117,191,192],{"class":145},"Draggable",[117,194,195],{"class":131},">\n",[197,198,200],"h3",{"id":199},"arguments","Arguments",[202,203,204,210],"field-group",{},[205,206,209],"field",{"name":157,"type":207,":required":208},"DraggableTypes['target']","true","The element(s) to make draggable. Supports CSS selectors, DOM elements, or template refs.",[205,211,214],{"name":212,"type":213},"options","DraggableOptions","Configuration for dragging behavior. Highly reactive, supporting Vue refs and getters for most properties.",[103,216,218],{"id":217},"sample-usage","Sample usage",[220,221],"render-code-block-preview",{"src":222},"examples/composables/DraggableDemo.vue",[103,224,226],{"id":225},"return-value","Return Value",[87,228,229,230,244],{},"Returns a ",[91,231,234,237,239,241],{"className":232,"language":233,"style":113},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type",[117,235,236],{"class":145},"ProxyReturns",[117,238,189],{"class":131},[117,240,192],{"class":145},[117,242,243],{"class":131},">"," object. This is a reactive proxy that wraps the AnimeJS Draggable instance.",[246,247,248,249,252],"caution",{},"Because the draggable instance can be initialized after the component is mounted and only when the target is found,\nproperties and methods on the returned object may be ",[91,250,251],{},"undefined"," until the initialization is complete.\nAlways use optional chaining or check for existence before calling methods!",[254,255,257],"h4",{"id":256},"example","Example",[108,259,261],{"className":110,"code":260,"language":112,"meta":113,"style":113},"const draggable = useDraggable('.square');\n\n// Correct\nconst disable = () => draggable.disable?.();\n\n// Wrong\nconst disable = () => draggable.disable();\n",[91,262,263,293,299,305,337,342,348],{"__ignoreMap":113},[117,264,265,268,271,274,276,279,282,285,287,290],{"class":119,"line":120},[117,266,267],{"class":123},"const",[117,269,270],{"class":149}," draggable ",[117,272,273],{"class":131},"=",[117,275,128],{"class":127},[117,277,278],{"class":149},"(",[117,280,281],{"class":131},"'",[117,283,284],{"class":156},".square",[117,286,281],{"class":131},[117,288,289],{"class":149},")",[117,291,292],{"class":131},";\n",[117,294,295],{"class":119,"line":135},[117,296,298],{"emptyLinePlaceholder":297},true,"\n",[117,300,301],{"class":119,"line":168},[117,302,304],{"class":303},"sHwdD","// Correct\n",[117,306,307,309,312,314,317,320,323,326,329,332,335],{"class":119,"line":180},[117,308,267],{"class":123},[117,310,311],{"class":149}," disable ",[117,313,273],{"class":131},[117,315,316],{"class":131}," ()",[117,318,319],{"class":123}," =>",[117,321,322],{"class":149}," draggable",[117,324,325],{"class":131},".",[117,327,328],{"class":127},"disable",[117,330,331],{"class":131},"?.",[117,333,334],{"class":149},"()",[117,336,292],{"class":131},[117,338,340],{"class":119,"line":339},5,[117,341,298],{"emptyLinePlaceholder":297},[117,343,345],{"class":119,"line":344},6,[117,346,347],{"class":303},"// Wrong\n",[117,349,351,353,355,357,359,361,363,365,367,369],{"class":119,"line":350},7,[117,352,267],{"class":123},[117,354,311],{"class":149},[117,356,273],{"class":131},[117,358,316],{"class":131},[117,360,319],{"class":123},[117,362,322],{"class":149},[117,364,325],{"class":131},[117,366,328],{"class":127},[117,368,334],{"class":149},[117,370,292],{"class":131},[103,372,374],{"id":373},"api","API",[197,376,378],{"id":377},"types","Types",[108,380,382],{"className":110,"code":381,"language":112,"meta":113,"style":113},"type DraggableTargets = DOMTargetSelector | MaybeElementRef\u003CHTMLElement | SVGElement | VueInstance | null> | null | undefined;\ntype DraggableTargetContainer = DraggableParams[\"container\"] | MaybeElementRef\u003CHTMLElement | VueInstance | null> | null | undefined;\ntype DraggableTargetTrigger = DraggableParams[\"trigger\"] | DraggableTargets;\n\ntype DraggableTypes = {\n  target: DraggableTargets;\n  trigger: DraggableTargetTrigger;\n  container: DraggableTargetContainer;\n}\n\ntype DraggableOptions = MakeRefable\u003COmit\u003CDraggableParams, 'trigger' | 'container' | 'x' | 'y'> & {\n  trigger?: DraggableTypes[\"trigger\"]\n  container?: DraggableTypes[\"container\"]\n  x?: boolean | Prettify\u003CMakeRefable\u003CDraggableAxisParam, \"snap\", Draggable>>\n  y?: boolean | Prettify\u003CMakeRefable\u003CDraggableAxisParam, \"snap\", Draggable>>\n}, RefableProps, Draggable>\n",[91,383,384,437,490,518,522,533,544,555,567,573,578,644,664,683,727,763],{"__ignoreMap":113},[117,385,386,389,392,395,398,401,404,406,409,411,414,416,419,421,424,426,428,430,432,435],{"class":119,"line":120},[117,387,388],{"class":123},"type",[117,390,391],{"class":145}," DraggableTargets",[117,393,394],{"class":131}," =",[117,396,397],{"class":145}," DOMTargetSelector",[117,399,400],{"class":131}," |",[117,402,403],{"class":145}," MaybeElementRef",[117,405,189],{"class":131},[117,407,408],{"class":145},"HTMLElement",[117,410,400],{"class":131},[117,412,413],{"class":145}," SVGElement",[117,415,400],{"class":131},[117,417,418],{"class":145}," VueInstance",[117,420,400],{"class":131},[117,422,423],{"class":145}," null",[117,425,243],{"class":131},[117,427,400],{"class":131},[117,429,423],{"class":145},[117,431,400],{"class":131},[117,433,434],{"class":145}," undefined",[117,436,292],{"class":131},[117,438,439,441,444,446,449,451,453,456,458,461,464,466,468,470,472,474,476,478,480,482,484,486,488],{"class":119,"line":135},[117,440,388],{"class":123},[117,442,443],{"class":145}," DraggableTargetContainer",[117,445,394],{"class":131},[117,447,448],{"class":145}," DraggableParams",[117,450,150],{"class":149},[117,452,153],{"class":131},[117,454,455],{"class":156},"container",[117,457,153],{"class":131},[117,459,460],{"class":149},"] ",[117,462,463],{"class":131},"|",[117,465,403],{"class":145},[117,467,189],{"class":131},[117,469,408],{"class":145},[117,471,400],{"class":131},[117,473,418],{"class":145},[117,475,400],{"class":131},[117,477,423],{"class":145},[117,479,243],{"class":131},[117,481,400],{"class":131},[117,483,423],{"class":145},[117,485,400],{"class":131},[117,487,434],{"class":145},[117,489,292],{"class":131},[117,491,492,494,497,499,501,503,505,508,510,512,514,516],{"class":119,"line":168},[117,493,388],{"class":123},[117,495,496],{"class":145}," DraggableTargetTrigger",[117,498,394],{"class":131},[117,500,448],{"class":145},[117,502,150],{"class":149},[117,504,153],{"class":131},[117,506,507],{"class":156},"trigger",[117,509,153],{"class":131},[117,511,460],{"class":149},[117,513,463],{"class":131},[117,515,391],{"class":145},[117,517,292],{"class":131},[117,519,520],{"class":119,"line":180},[117,521,298],{"emptyLinePlaceholder":297},[117,523,524,526,528,530],{"class":119,"line":339},[117,525,388],{"class":123},[117,527,146],{"class":145},[117,529,394],{"class":131},[117,531,532],{"class":131}," {\n",[117,534,535,538,540,542],{"class":119,"line":344},[117,536,139],{"class":537},"swJcz",[117,539,142],{"class":131},[117,541,391],{"class":145},[117,543,292],{"class":131},[117,545,546,549,551,553],{"class":119,"line":350},[117,547,548],{"class":537},"  trigger",[117,550,142],{"class":131},[117,552,496],{"class":145},[117,554,292],{"class":131},[117,556,558,561,563,565],{"class":119,"line":557},8,[117,559,560],{"class":537},"  container",[117,562,142],{"class":131},[117,564,443],{"class":145},[117,566,292],{"class":131},[117,568,570],{"class":119,"line":569},9,[117,571,572],{"class":131},"}\n",[117,574,576],{"class":119,"line":575},10,[117,577,298],{"emptyLinePlaceholder":297},[117,579,581,583,586,588,591,593,596,598,601,604,607,609,611,613,615,617,619,621,623,626,628,630,632,635,637,639,642],{"class":119,"line":580},11,[117,582,388],{"class":123},[117,584,585],{"class":145}," DraggableOptions",[117,587,394],{"class":131},[117,589,590],{"class":145}," MakeRefable",[117,592,189],{"class":131},[117,594,595],{"class":145},"Omit",[117,597,189],{"class":131},[117,599,600],{"class":145},"DraggableParams",[117,602,603],{"class":131},",",[117,605,606],{"class":131}," '",[117,608,507],{"class":156},[117,610,281],{"class":131},[117,612,400],{"class":131},[117,614,606],{"class":131},[117,616,455],{"class":156},[117,618,281],{"class":131},[117,620,400],{"class":131},[117,622,606],{"class":131},[117,624,625],{"class":156},"x",[117,627,281],{"class":131},[117,629,400],{"class":131},[117,631,606],{"class":131},[117,633,634],{"class":156},"y",[117,636,281],{"class":131},[117,638,243],{"class":131},[117,640,641],{"class":131}," &",[117,643,532],{"class":131},[117,645,647,649,651,653,655,657,659,661],{"class":119,"line":646},12,[117,648,548],{"class":537},[117,650,174],{"class":131},[117,652,146],{"class":145},[117,654,150],{"class":149},[117,656,153],{"class":131},[117,658,507],{"class":156},[117,660,153],{"class":131},[117,662,663],{"class":149},"]\n",[117,665,667,669,671,673,675,677,679,681],{"class":119,"line":666},13,[117,668,560],{"class":537},[117,670,174],{"class":131},[117,672,146],{"class":145},[117,674,150],{"class":149},[117,676,153],{"class":131},[117,678,455],{"class":156},[117,680,153],{"class":131},[117,682,663],{"class":149},[117,684,686,689,691,694,696,699,701,704,706,709,711,714,717,719,721,724],{"class":119,"line":685},14,[117,687,688],{"class":537},"  x",[117,690,174],{"class":131},[117,692,693],{"class":145}," boolean",[117,695,400],{"class":131},[117,697,698],{"class":145}," Prettify",[117,700,189],{"class":131},[117,702,703],{"class":145},"MakeRefable",[117,705,189],{"class":131},[117,707,708],{"class":145},"DraggableAxisParam",[117,710,603],{"class":131},[117,712,713],{"class":131}," \"",[117,715,716],{"class":156},"snap",[117,718,153],{"class":131},[117,720,603],{"class":131},[117,722,723],{"class":145}," Draggable",[117,725,726],{"class":131},">>\n",[117,728,730,733,735,737,739,741,743,745,747,749,751,753,755,757,759,761],{"class":119,"line":729},15,[117,731,732],{"class":537},"  y",[117,734,174],{"class":131},[117,736,693],{"class":145},[117,738,400],{"class":131},[117,740,698],{"class":145},[117,742,189],{"class":131},[117,744,703],{"class":145},[117,746,189],{"class":131},[117,748,708],{"class":145},[117,750,603],{"class":131},[117,752,713],{"class":131},[117,754,716],{"class":156},[117,756,153],{"class":131},[117,758,603],{"class":131},[117,760,723],{"class":145},[117,762,726],{"class":131},[117,764,766,769,772,774,776],{"class":119,"line":765},16,[117,767,768],{"class":131},"},",[117,770,771],{"class":145}," RefableProps",[117,773,603],{"class":131},[117,775,723],{"class":145},[117,777,195],{"class":131},[87,779,780,781,785],{},"See ",[95,782,784],{"href":97,"rel":783},[99],"AnimeJS Draggable documentation"," for more details.",[787,788,789],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":113,"searchDepth":135,"depth":135,"links":791},[792,795,796,797],{"id":105,"depth":135,"text":106,"children":793},[794],{"id":199,"depth":168,"text":200},{"id":217,"depth":135,"text":218},{"id":225,"depth":135,"text":226},{"id":373,"depth":135,"text":374,"children":798},[799],{"id":377,"depth":168,"text":378},"Documentation for useDraggable composable.","md",null,{},{"icon":62},{"title":59,"description":800},"N8T_KgU5KPdYSa4VggfTxjLxZAm_Vvt6SKiSIdddcbc",[808,810],{"title":54,"path":55,"stem":56,"description":809,"icon":57,"children":-1},"Documentation for useLayout composable.",{"title":11,"path":65,"stem":69,"description":811,"icon":70,"children":-1},"Miscellaneous utilities and helpers.","\n::code-group\n```ts [Script]\nimport { spring } from '#nanime/easings'\n\nconst container = useTemplateRef('container')\nconst draggable = useTemplateRef('draggable')\n\nuseDraggable(draggable, {\n  container: container,\n  containerPadding: 4,\n  releaseEase: spring({\n    bounce: 0.65,\n    duration: 400,\n  }),\n  x: {\n    snap: (draggable) => {\n      const hw = (draggable?.dragArea || [0, 0, 0, 0])[2]\n      const results = [0, hw * 0.35, hw * 0.75]\n      return results\n    },\n  },\n})\n```\n\n```vue [Template]\n\u003Ctemplate>\n  \u003Cdiv\n    ref=\"container\"\n    class=\"relative border border-primary/20 rounded-md border-dashed h-12\"\n  >\n    \u003Cdiv class=\"snap-positions\">\n      \u003Cdiv class=\"spot\" style=\"--snap-x: 0%\">0%\u003C/div>\n      \u003Cdiv class=\"spot\" style=\"--snap-x: 35%\">35%\u003C/div>\n      \u003Cdiv class=\"spot\" style=\"--snap-x: 75%\">75%\u003C/div>\n    \u003C/div>\n    \u003Cdiv ref=\"draggable\" class=\"simple-box w-12 h-10!\" />\n  \u003C/div>\n\u003C/template>\n```\n\n```css [CSS]\n@reference \"~/assets/css/main.css\";\n\n.snap-positions {\n  @apply absolute inset-1 pointer-events-none;\n}\n\n.snap-positions div {\n  @apply absolute top-0 inset-y-0 left-(--snap-x);\n}\n```\n\n::\n\n::draggable-demo\n::\n\n::u-button\n---\nto: https://github.com/astraldev/nanime/blob/main/docs/app/components/content/examples/composables/DraggableDemo.vue\ntarget: _blank\nvariant: link\ncolor: neutral\nicon: i-simple-icons-github\nclass: mt-2.5 pl-0.5\n---\nView on GitHub\n::\n",{"data":814,"body":815},{},{"type":816,"children":817},"root",[818,1946,1950,1964],{"type":819,"tag":820,"props":821,"children":822},"element","code-group",{},[823,1367,1831],{"type":819,"tag":108,"props":824,"children":827},{"className":110,"code":825,"filename":826,"language":112,"meta":113,"style":113},"import { spring } from '#nanime/easings'\n\nconst container = useTemplateRef('container')\nconst draggable = useTemplateRef('draggable')\n\nuseDraggable(draggable, {\n  container: container,\n  containerPadding: 4,\n  releaseEase: spring({\n    bounce: 0.65,\n    duration: 400,\n  }),\n  x: {\n    snap: (draggable) => {\n      const hw = (draggable?.dragArea || [0, 0, 0, 0])[2]\n      const results = [0, hw * 0.35, hw * 0.75]\n      return results\n    },\n  },\n})\n","Script",[828],{"type":819,"tag":91,"props":829,"children":830},{"__ignoreMap":113},[831,878,885,929,969,976,996,1017,1039,1064,1085,1106,1122,1137,1171,1259,1322,1336,1345,1354],{"type":819,"tag":117,"props":832,"children":833},{"class":119,"line":120},[834,841,847,853,858,863,867,873],{"type":819,"tag":117,"props":835,"children":837},{"style":836},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[838],{"type":839,"value":840},"text","import",{"type":819,"tag":117,"props":842,"children":844},{"style":843},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[845],{"type":839,"value":846}," {",{"type":819,"tag":117,"props":848,"children":850},{"style":849},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[851],{"type":839,"value":852}," spring",{"type":819,"tag":117,"props":854,"children":855},{"style":843},[856],{"type":839,"value":857}," }",{"type":819,"tag":117,"props":859,"children":860},{"style":836},[861],{"type":839,"value":862}," from",{"type":819,"tag":117,"props":864,"children":865},{"style":843},[866],{"type":839,"value":606},{"type":819,"tag":117,"props":868,"children":870},{"style":869},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[871],{"type":839,"value":872},"#nanime/easings",{"type":819,"tag":117,"props":874,"children":875},{"style":843},[876],{"type":839,"value":877},"'\n",{"type":819,"tag":117,"props":879,"children":880},{"class":119,"line":135},[881],{"type":819,"tag":117,"props":882,"children":883},{"emptyLinePlaceholder":297},[884],{"type":839,"value":298},{"type":819,"tag":117,"props":886,"children":887},{"class":119,"line":168},[888,893,898,902,908,912,916,920,924],{"type":819,"tag":117,"props":889,"children":891},{"style":890},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[892],{"type":839,"value":267},{"type":819,"tag":117,"props":894,"children":895},{"style":849},[896],{"type":839,"value":897}," container ",{"type":819,"tag":117,"props":899,"children":900},{"style":843},[901],{"type":839,"value":273},{"type":819,"tag":117,"props":903,"children":905},{"style":904},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[906],{"type":839,"value":907}," useTemplateRef",{"type":819,"tag":117,"props":909,"children":910},{"style":849},[911],{"type":839,"value":278},{"type":819,"tag":117,"props":913,"children":914},{"style":843},[915],{"type":839,"value":281},{"type":819,"tag":117,"props":917,"children":918},{"style":869},[919],{"type":839,"value":455},{"type":819,"tag":117,"props":921,"children":922},{"style":843},[923],{"type":839,"value":281},{"type":819,"tag":117,"props":925,"children":926},{"style":849},[927],{"type":839,"value":928},")\n",{"type":819,"tag":117,"props":930,"children":931},{"class":119,"line":180},[932,936,940,944,948,952,956,961,965],{"type":819,"tag":117,"props":933,"children":934},{"style":890},[935],{"type":839,"value":267},{"type":819,"tag":117,"props":937,"children":938},{"style":849},[939],{"type":839,"value":270},{"type":819,"tag":117,"props":941,"children":942},{"style":843},[943],{"type":839,"value":273},{"type":819,"tag":117,"props":945,"children":946},{"style":904},[947],{"type":839,"value":907},{"type":819,"tag":117,"props":949,"children":950},{"style":849},[951],{"type":839,"value":278},{"type":819,"tag":117,"props":953,"children":954},{"style":843},[955],{"type":839,"value":281},{"type":819,"tag":117,"props":957,"children":958},{"style":869},[959],{"type":839,"value":960},"draggable",{"type":819,"tag":117,"props":962,"children":963},{"style":843},[964],{"type":839,"value":281},{"type":819,"tag":117,"props":966,"children":967},{"style":849},[968],{"type":839,"value":928},{"type":819,"tag":117,"props":970,"children":971},{"class":119,"line":339},[972],{"type":819,"tag":117,"props":973,"children":974},{"emptyLinePlaceholder":297},[975],{"type":839,"value":298},{"type":819,"tag":117,"props":977,"children":978},{"class":119,"line":344},[979,983,988,992],{"type":819,"tag":117,"props":980,"children":981},{"style":904},[982],{"type":839,"value":59},{"type":819,"tag":117,"props":984,"children":985},{"style":849},[986],{"type":839,"value":987},"(draggable",{"type":819,"tag":117,"props":989,"children":990},{"style":843},[991],{"type":839,"value":603},{"type":819,"tag":117,"props":993,"children":994},{"style":843},[995],{"type":839,"value":532},{"type":819,"tag":117,"props":997,"children":998},{"class":119,"line":350},[999,1004,1008,1013],{"type":819,"tag":117,"props":1000,"children":1002},{"style":1001},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1003],{"type":839,"value":560},{"type":819,"tag":117,"props":1005,"children":1006},{"style":843},[1007],{"type":839,"value":142},{"type":819,"tag":117,"props":1009,"children":1010},{"style":849},[1011],{"type":839,"value":1012}," container",{"type":819,"tag":117,"props":1014,"children":1015},{"style":843},[1016],{"type":839,"value":165},{"type":819,"tag":117,"props":1018,"children":1019},{"class":119,"line":557},[1020,1025,1029,1035],{"type":819,"tag":117,"props":1021,"children":1022},{"style":1001},[1023],{"type":839,"value":1024},"  containerPadding",{"type":819,"tag":117,"props":1026,"children":1027},{"style":843},[1028],{"type":839,"value":142},{"type":819,"tag":117,"props":1030,"children":1032},{"style":1031},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1033],{"type":839,"value":1034}," 4",{"type":819,"tag":117,"props":1036,"children":1037},{"style":843},[1038],{"type":839,"value":165},{"type":819,"tag":117,"props":1040,"children":1041},{"class":119,"line":569},[1042,1047,1051,1055,1059],{"type":819,"tag":117,"props":1043,"children":1044},{"style":1001},[1045],{"type":839,"value":1046},"  releaseEase",{"type":819,"tag":117,"props":1048,"children":1049},{"style":843},[1050],{"type":839,"value":142},{"type":819,"tag":117,"props":1052,"children":1053},{"style":904},[1054],{"type":839,"value":852},{"type":819,"tag":117,"props":1056,"children":1057},{"style":849},[1058],{"type":839,"value":278},{"type":819,"tag":117,"props":1060,"children":1061},{"style":843},[1062],{"type":839,"value":1063},"{\n",{"type":819,"tag":117,"props":1065,"children":1066},{"class":119,"line":575},[1067,1072,1076,1081],{"type":819,"tag":117,"props":1068,"children":1069},{"style":1001},[1070],{"type":839,"value":1071},"    bounce",{"type":819,"tag":117,"props":1073,"children":1074},{"style":843},[1075],{"type":839,"value":142},{"type":819,"tag":117,"props":1077,"children":1078},{"style":1031},[1079],{"type":839,"value":1080}," 0.65",{"type":819,"tag":117,"props":1082,"children":1083},{"style":843},[1084],{"type":839,"value":165},{"type":819,"tag":117,"props":1086,"children":1087},{"class":119,"line":580},[1088,1093,1097,1102],{"type":819,"tag":117,"props":1089,"children":1090},{"style":1001},[1091],{"type":839,"value":1092},"    duration",{"type":819,"tag":117,"props":1094,"children":1095},{"style":843},[1096],{"type":839,"value":142},{"type":819,"tag":117,"props":1098,"children":1099},{"style":1031},[1100],{"type":839,"value":1101}," 400",{"type":819,"tag":117,"props":1103,"children":1104},{"style":843},[1105],{"type":839,"value":165},{"type":819,"tag":117,"props":1107,"children":1108},{"class":119,"line":646},[1109,1114,1118],{"type":819,"tag":117,"props":1110,"children":1111},{"style":843},[1112],{"type":839,"value":1113},"  }",{"type":819,"tag":117,"props":1115,"children":1116},{"style":849},[1117],{"type":839,"value":289},{"type":819,"tag":117,"props":1119,"children":1120},{"style":843},[1121],{"type":839,"value":165},{"type":819,"tag":117,"props":1123,"children":1124},{"class":119,"line":666},[1125,1129,1133],{"type":819,"tag":117,"props":1126,"children":1127},{"style":1001},[1128],{"type":839,"value":688},{"type":819,"tag":117,"props":1130,"children":1131},{"style":843},[1132],{"type":839,"value":142},{"type":819,"tag":117,"props":1134,"children":1135},{"style":843},[1136],{"type":839,"value":532},{"type":819,"tag":117,"props":1138,"children":1139},{"class":119,"line":685},[1140,1145,1149,1154,1159,1163,1167],{"type":819,"tag":117,"props":1141,"children":1142},{"style":904},[1143],{"type":839,"value":1144},"    snap",{"type":819,"tag":117,"props":1146,"children":1147},{"style":843},[1148],{"type":839,"value":142},{"type":819,"tag":117,"props":1150,"children":1151},{"style":843},[1152],{"type":839,"value":1153}," (",{"type":819,"tag":117,"props":1155,"children":1157},{"style":1156},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1158],{"type":839,"value":960},{"type":819,"tag":117,"props":1160,"children":1161},{"style":843},[1162],{"type":839,"value":289},{"type":819,"tag":117,"props":1164,"children":1165},{"style":890},[1166],{"type":839,"value":319},{"type":819,"tag":117,"props":1168,"children":1169},{"style":843},[1170],{"type":839,"value":532},{"type":819,"tag":117,"props":1172,"children":1173},{"class":119,"line":729},[1174,1179,1184,1188,1192,1196,1200,1205,1210,1215,1220,1224,1229,1233,1237,1241,1245,1250,1255],{"type":819,"tag":117,"props":1175,"children":1176},{"style":890},[1177],{"type":839,"value":1178},"      const",{"type":819,"tag":117,"props":1180,"children":1181},{"style":849},[1182],{"type":839,"value":1183}," hw",{"type":819,"tag":117,"props":1185,"children":1186},{"style":843},[1187],{"type":839,"value":394},{"type":819,"tag":117,"props":1189,"children":1190},{"style":1001},[1191],{"type":839,"value":1153},{"type":819,"tag":117,"props":1193,"children":1194},{"style":849},[1195],{"type":839,"value":960},{"type":819,"tag":117,"props":1197,"children":1198},{"style":843},[1199],{"type":839,"value":331},{"type":819,"tag":117,"props":1201,"children":1202},{"style":849},[1203],{"type":839,"value":1204},"dragArea",{"type":819,"tag":117,"props":1206,"children":1207},{"style":843},[1208],{"type":839,"value":1209}," ||",{"type":819,"tag":117,"props":1211,"children":1212},{"style":1001},[1213],{"type":839,"value":1214}," [",{"type":819,"tag":117,"props":1216,"children":1217},{"style":1031},[1218],{"type":839,"value":1219},"0",{"type":819,"tag":117,"props":1221,"children":1222},{"style":843},[1223],{"type":839,"value":603},{"type":819,"tag":117,"props":1225,"children":1226},{"style":1031},[1227],{"type":839,"value":1228}," 0",{"type":819,"tag":117,"props":1230,"children":1231},{"style":843},[1232],{"type":839,"value":603},{"type":819,"tag":117,"props":1234,"children":1235},{"style":1031},[1236],{"type":839,"value":1228},{"type":819,"tag":117,"props":1238,"children":1239},{"style":843},[1240],{"type":839,"value":603},{"type":819,"tag":117,"props":1242,"children":1243},{"style":1031},[1244],{"type":839,"value":1228},{"type":819,"tag":117,"props":1246,"children":1247},{"style":1001},[1248],{"type":839,"value":1249},"])[",{"type":819,"tag":117,"props":1251,"children":1252},{"style":1031},[1253],{"type":839,"value":1254},"2",{"type":819,"tag":117,"props":1256,"children":1257},{"style":1001},[1258],{"type":839,"value":663},{"type":819,"tag":117,"props":1260,"children":1261},{"class":119,"line":765},[1262,1266,1271,1275,1279,1283,1287,1291,1296,1301,1305,1309,1313,1318],{"type":819,"tag":117,"props":1263,"children":1264},{"style":890},[1265],{"type":839,"value":1178},{"type":819,"tag":117,"props":1267,"children":1268},{"style":849},[1269],{"type":839,"value":1270}," results",{"type":819,"tag":117,"props":1272,"children":1273},{"style":843},[1274],{"type":839,"value":394},{"type":819,"tag":117,"props":1276,"children":1277},{"style":1001},[1278],{"type":839,"value":1214},{"type":819,"tag":117,"props":1280,"children":1281},{"style":1031},[1282],{"type":839,"value":1219},{"type":819,"tag":117,"props":1284,"children":1285},{"style":843},[1286],{"type":839,"value":603},{"type":819,"tag":117,"props":1288,"children":1289},{"style":849},[1290],{"type":839,"value":1183},{"type":819,"tag":117,"props":1292,"children":1293},{"style":843},[1294],{"type":839,"value":1295}," *",{"type":819,"tag":117,"props":1297,"children":1298},{"style":1031},[1299],{"type":839,"value":1300}," 0.35",{"type":819,"tag":117,"props":1302,"children":1303},{"style":843},[1304],{"type":839,"value":603},{"type":819,"tag":117,"props":1306,"children":1307},{"style":849},[1308],{"type":839,"value":1183},{"type":819,"tag":117,"props":1310,"children":1311},{"style":843},[1312],{"type":839,"value":1295},{"type":819,"tag":117,"props":1314,"children":1315},{"style":1031},[1316],{"type":839,"value":1317}," 0.75",{"type":819,"tag":117,"props":1319,"children":1320},{"style":1001},[1321],{"type":839,"value":663},{"type":819,"tag":117,"props":1323,"children":1325},{"class":119,"line":1324},17,[1326,1331],{"type":819,"tag":117,"props":1327,"children":1328},{"style":836},[1329],{"type":839,"value":1330},"      return",{"type":819,"tag":117,"props":1332,"children":1333},{"style":849},[1334],{"type":839,"value":1335}," results\n",{"type":819,"tag":117,"props":1337,"children":1339},{"class":119,"line":1338},18,[1340],{"type":819,"tag":117,"props":1341,"children":1342},{"style":843},[1343],{"type":839,"value":1344},"    },\n",{"type":819,"tag":117,"props":1346,"children":1348},{"class":119,"line":1347},19,[1349],{"type":819,"tag":117,"props":1350,"children":1351},{"style":843},[1352],{"type":839,"value":1353},"  },\n",{"type":819,"tag":117,"props":1355,"children":1357},{"class":119,"line":1356},20,[1358,1363],{"type":819,"tag":117,"props":1359,"children":1360},{"style":843},[1361],{"type":839,"value":1362},"}",{"type":819,"tag":117,"props":1364,"children":1365},{"style":849},[1366],{"type":839,"value":928},{"type":819,"tag":108,"props":1368,"children":1373},{"className":1369,"code":1370,"filename":1371,"language":1372,"meta":113,"style":113},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv\n    ref=\"container\"\n    class=\"relative border border-primary/20 rounded-md border-dashed h-12\"\n  >\n    \u003Cdiv class=\"snap-positions\">\n      \u003Cdiv class=\"spot\" style=\"--snap-x: 0%\">0%\u003C/div>\n      \u003Cdiv class=\"spot\" style=\"--snap-x: 35%\">35%\u003C/div>\n      \u003Cdiv class=\"spot\" style=\"--snap-x: 75%\">75%\u003C/div>\n    \u003C/div>\n    \u003Cdiv ref=\"draggable\" class=\"simple-box w-12 h-10!\" />\n  \u003C/div>\n\u003C/template>\n","Template","vue",[1374],{"type":819,"tag":91,"props":1375,"children":1376},{"__ignoreMap":113},[1377,1393,1406,1431,1456,1464,1503,1580,1653,1726,1742,1800,1816],{"type":819,"tag":117,"props":1378,"children":1379},{"class":119,"line":120},[1380,1384,1389],{"type":819,"tag":117,"props":1381,"children":1382},{"style":843},[1383],{"type":839,"value":189},{"type":819,"tag":117,"props":1385,"children":1386},{"style":1001},[1387],{"type":839,"value":1388},"template",{"type":819,"tag":117,"props":1390,"children":1391},{"style":843},[1392],{"type":839,"value":195},{"type":819,"tag":117,"props":1394,"children":1395},{"class":119,"line":135},[1396,1401],{"type":819,"tag":117,"props":1397,"children":1398},{"style":843},[1399],{"type":839,"value":1400},"  \u003C",{"type":819,"tag":117,"props":1402,"children":1403},{"style":1001},[1404],{"type":839,"value":1405},"div\n",{"type":819,"tag":117,"props":1407,"children":1408},{"class":119,"line":168},[1409,1414,1418,1422,1426],{"type":819,"tag":117,"props":1410,"children":1411},{"style":890},[1412],{"type":839,"value":1413},"    ref",{"type":819,"tag":117,"props":1415,"children":1416},{"style":843},[1417],{"type":839,"value":273},{"type":819,"tag":117,"props":1419,"children":1420},{"style":843},[1421],{"type":839,"value":153},{"type":819,"tag":117,"props":1423,"children":1424},{"style":869},[1425],{"type":839,"value":455},{"type":819,"tag":117,"props":1427,"children":1428},{"style":843},[1429],{"type":839,"value":1430},"\"\n",{"type":819,"tag":117,"props":1432,"children":1433},{"class":119,"line":180},[1434,1439,1443,1447,1452],{"type":819,"tag":117,"props":1435,"children":1436},{"style":890},[1437],{"type":839,"value":1438},"    class",{"type":819,"tag":117,"props":1440,"children":1441},{"style":843},[1442],{"type":839,"value":273},{"type":819,"tag":117,"props":1444,"children":1445},{"style":843},[1446],{"type":839,"value":153},{"type":819,"tag":117,"props":1448,"children":1449},{"style":869},[1450],{"type":839,"value":1451},"relative border border-primary/20 rounded-md border-dashed h-12",{"type":819,"tag":117,"props":1453,"children":1454},{"style":843},[1455],{"type":839,"value":1430},{"type":819,"tag":117,"props":1457,"children":1458},{"class":119,"line":339},[1459],{"type":819,"tag":117,"props":1460,"children":1461},{"style":843},[1462],{"type":839,"value":1463},"  >\n",{"type":819,"tag":117,"props":1465,"children":1466},{"class":119,"line":344},[1467,1472,1477,1482,1486,1490,1495,1499],{"type":819,"tag":117,"props":1468,"children":1469},{"style":843},[1470],{"type":839,"value":1471},"    \u003C",{"type":819,"tag":117,"props":1473,"children":1474},{"style":1001},[1475],{"type":839,"value":1476},"div",{"type":819,"tag":117,"props":1478,"children":1479},{"style":890},[1480],{"type":839,"value":1481}," class",{"type":819,"tag":117,"props":1483,"children":1484},{"style":843},[1485],{"type":839,"value":273},{"type":819,"tag":117,"props":1487,"children":1488},{"style":843},[1489],{"type":839,"value":153},{"type":819,"tag":117,"props":1491,"children":1492},{"style":869},[1493],{"type":839,"value":1494},"snap-positions",{"type":819,"tag":117,"props":1496,"children":1497},{"style":843},[1498],{"type":839,"value":153},{"type":819,"tag":117,"props":1500,"children":1501},{"style":843},[1502],{"type":839,"value":195},{"type":819,"tag":117,"props":1504,"children":1505},{"class":119,"line":350},[1506,1511,1515,1519,1523,1527,1532,1536,1541,1545,1549,1554,1558,1562,1567,1572,1576],{"type":819,"tag":117,"props":1507,"children":1508},{"style":843},[1509],{"type":839,"value":1510},"      \u003C",{"type":819,"tag":117,"props":1512,"children":1513},{"style":1001},[1514],{"type":839,"value":1476},{"type":819,"tag":117,"props":1516,"children":1517},{"style":890},[1518],{"type":839,"value":1481},{"type":819,"tag":117,"props":1520,"children":1521},{"style":843},[1522],{"type":839,"value":273},{"type":819,"tag":117,"props":1524,"children":1525},{"style":843},[1526],{"type":839,"value":153},{"type":819,"tag":117,"props":1528,"children":1529},{"style":869},[1530],{"type":839,"value":1531},"spot",{"type":819,"tag":117,"props":1533,"children":1534},{"style":843},[1535],{"type":839,"value":153},{"type":819,"tag":117,"props":1537,"children":1538},{"style":890},[1539],{"type":839,"value":1540}," style",{"type":819,"tag":117,"props":1542,"children":1543},{"style":843},[1544],{"type":839,"value":273},{"type":819,"tag":117,"props":1546,"children":1547},{"style":843},[1548],{"type":839,"value":153},{"type":819,"tag":117,"props":1550,"children":1551},{"style":869},[1552],{"type":839,"value":1553},"--snap-x: 0%",{"type":819,"tag":117,"props":1555,"children":1556},{"style":843},[1557],{"type":839,"value":153},{"type":819,"tag":117,"props":1559,"children":1560},{"style":843},[1561],{"type":839,"value":243},{"type":819,"tag":117,"props":1563,"children":1564},{"style":849},[1565],{"type":839,"value":1566},"0%",{"type":819,"tag":117,"props":1568,"children":1569},{"style":843},[1570],{"type":839,"value":1571},"\u003C/",{"type":819,"tag":117,"props":1573,"children":1574},{"style":1001},[1575],{"type":839,"value":1476},{"type":819,"tag":117,"props":1577,"children":1578},{"style":843},[1579],{"type":839,"value":195},{"type":819,"tag":117,"props":1581,"children":1582},{"class":119,"line":557},[1583,1587,1591,1595,1599,1603,1607,1611,1615,1619,1623,1628,1632,1636,1641,1645,1649],{"type":819,"tag":117,"props":1584,"children":1585},{"style":843},[1586],{"type":839,"value":1510},{"type":819,"tag":117,"props":1588,"children":1589},{"style":1001},[1590],{"type":839,"value":1476},{"type":819,"tag":117,"props":1592,"children":1593},{"style":890},[1594],{"type":839,"value":1481},{"type":819,"tag":117,"props":1596,"children":1597},{"style":843},[1598],{"type":839,"value":273},{"type":819,"tag":117,"props":1600,"children":1601},{"style":843},[1602],{"type":839,"value":153},{"type":819,"tag":117,"props":1604,"children":1605},{"style":869},[1606],{"type":839,"value":1531},{"type":819,"tag":117,"props":1608,"children":1609},{"style":843},[1610],{"type":839,"value":153},{"type":819,"tag":117,"props":1612,"children":1613},{"style":890},[1614],{"type":839,"value":1540},{"type":819,"tag":117,"props":1616,"children":1617},{"style":843},[1618],{"type":839,"value":273},{"type":819,"tag":117,"props":1620,"children":1621},{"style":843},[1622],{"type":839,"value":153},{"type":819,"tag":117,"props":1624,"children":1625},{"style":869},[1626],{"type":839,"value":1627},"--snap-x: 35%",{"type":819,"tag":117,"props":1629,"children":1630},{"style":843},[1631],{"type":839,"value":153},{"type":819,"tag":117,"props":1633,"children":1634},{"style":843},[1635],{"type":839,"value":243},{"type":819,"tag":117,"props":1637,"children":1638},{"style":849},[1639],{"type":839,"value":1640},"35%",{"type":819,"tag":117,"props":1642,"children":1643},{"style":843},[1644],{"type":839,"value":1571},{"type":819,"tag":117,"props":1646,"children":1647},{"style":1001},[1648],{"type":839,"value":1476},{"type":819,"tag":117,"props":1650,"children":1651},{"style":843},[1652],{"type":839,"value":195},{"type":819,"tag":117,"props":1654,"children":1655},{"class":119,"line":569},[1656,1660,1664,1668,1672,1676,1680,1684,1688,1692,1696,1701,1705,1709,1714,1718,1722],{"type":819,"tag":117,"props":1657,"children":1658},{"style":843},[1659],{"type":839,"value":1510},{"type":819,"tag":117,"props":1661,"children":1662},{"style":1001},[1663],{"type":839,"value":1476},{"type":819,"tag":117,"props":1665,"children":1666},{"style":890},[1667],{"type":839,"value":1481},{"type":819,"tag":117,"props":1669,"children":1670},{"style":843},[1671],{"type":839,"value":273},{"type":819,"tag":117,"props":1673,"children":1674},{"style":843},[1675],{"type":839,"value":153},{"type":819,"tag":117,"props":1677,"children":1678},{"style":869},[1679],{"type":839,"value":1531},{"type":819,"tag":117,"props":1681,"children":1682},{"style":843},[1683],{"type":839,"value":153},{"type":819,"tag":117,"props":1685,"children":1686},{"style":890},[1687],{"type":839,"value":1540},{"type":819,"tag":117,"props":1689,"children":1690},{"style":843},[1691],{"type":839,"value":273},{"type":819,"tag":117,"props":1693,"children":1694},{"style":843},[1695],{"type":839,"value":153},{"type":819,"tag":117,"props":1697,"children":1698},{"style":869},[1699],{"type":839,"value":1700},"--snap-x: 75%",{"type":819,"tag":117,"props":1702,"children":1703},{"style":843},[1704],{"type":839,"value":153},{"type":819,"tag":117,"props":1706,"children":1707},{"style":843},[1708],{"type":839,"value":243},{"type":819,"tag":117,"props":1710,"children":1711},{"style":849},[1712],{"type":839,"value":1713},"75%",{"type":819,"tag":117,"props":1715,"children":1716},{"style":843},[1717],{"type":839,"value":1571},{"type":819,"tag":117,"props":1719,"children":1720},{"style":1001},[1721],{"type":839,"value":1476},{"type":819,"tag":117,"props":1723,"children":1724},{"style":843},[1725],{"type":839,"value":195},{"type":819,"tag":117,"props":1727,"children":1728},{"class":119,"line":575},[1729,1734,1738],{"type":819,"tag":117,"props":1730,"children":1731},{"style":843},[1732],{"type":839,"value":1733},"    \u003C/",{"type":819,"tag":117,"props":1735,"children":1736},{"style":1001},[1737],{"type":839,"value":1476},{"type":819,"tag":117,"props":1739,"children":1740},{"style":843},[1741],{"type":839,"value":195},{"type":819,"tag":117,"props":1743,"children":1744},{"class":119,"line":580},[1745,1749,1753,1758,1762,1766,1770,1774,1778,1782,1786,1791,1795],{"type":819,"tag":117,"props":1746,"children":1747},{"style":843},[1748],{"type":839,"value":1471},{"type":819,"tag":117,"props":1750,"children":1751},{"style":1001},[1752],{"type":839,"value":1476},{"type":819,"tag":117,"props":1754,"children":1755},{"style":890},[1756],{"type":839,"value":1757}," ref",{"type":819,"tag":117,"props":1759,"children":1760},{"style":843},[1761],{"type":839,"value":273},{"type":819,"tag":117,"props":1763,"children":1764},{"style":843},[1765],{"type":839,"value":153},{"type":819,"tag":117,"props":1767,"children":1768},{"style":869},[1769],{"type":839,"value":960},{"type":819,"tag":117,"props":1771,"children":1772},{"style":843},[1773],{"type":839,"value":153},{"type":819,"tag":117,"props":1775,"children":1776},{"style":890},[1777],{"type":839,"value":1481},{"type":819,"tag":117,"props":1779,"children":1780},{"style":843},[1781],{"type":839,"value":273},{"type":819,"tag":117,"props":1783,"children":1784},{"style":843},[1785],{"type":839,"value":153},{"type":819,"tag":117,"props":1787,"children":1788},{"style":869},[1789],{"type":839,"value":1790},"simple-box w-12 h-10!",{"type":819,"tag":117,"props":1792,"children":1793},{"style":843},[1794],{"type":839,"value":153},{"type":819,"tag":117,"props":1796,"children":1797},{"style":843},[1798],{"type":839,"value":1799}," />\n",{"type":819,"tag":117,"props":1801,"children":1802},{"class":119,"line":646},[1803,1808,1812],{"type":819,"tag":117,"props":1804,"children":1805},{"style":843},[1806],{"type":839,"value":1807},"  \u003C/",{"type":819,"tag":117,"props":1809,"children":1810},{"style":1001},[1811],{"type":839,"value":1476},{"type":819,"tag":117,"props":1813,"children":1814},{"style":843},[1815],{"type":839,"value":195},{"type":819,"tag":117,"props":1817,"children":1818},{"class":119,"line":666},[1819,1823,1827],{"type":819,"tag":117,"props":1820,"children":1821},{"style":843},[1822],{"type":839,"value":1571},{"type":819,"tag":117,"props":1824,"children":1825},{"style":1001},[1826],{"type":839,"value":1388},{"type":819,"tag":117,"props":1828,"children":1829},{"style":843},[1830],{"type":839,"value":195},{"type":819,"tag":108,"props":1832,"children":1837},{"className":1833,"code":1834,"filename":1835,"language":1836,"meta":113,"style":113},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@reference \"~/assets/css/main.css\";\n\n.snap-positions {\n  @apply absolute inset-1 pointer-events-none;\n}\n\n.snap-positions div {\n  @apply absolute top-0 inset-y-0 left-(--snap-x);\n}\n","CSS","css",[1838],{"type":819,"tag":91,"props":1839,"children":1840},{"__ignoreMap":113},[1841,1858,1865,1881,1893,1900,1907,1927,1939],{"type":819,"tag":117,"props":1842,"children":1843},{"class":119,"line":120},[1844,1849,1854],{"type":819,"tag":117,"props":1845,"children":1846},{"style":836},[1847],{"type":839,"value":1848},"@reference",{"type":819,"tag":117,"props":1850,"children":1851},{"style":849},[1852],{"type":839,"value":1853}," \"~/assets/css/main.css\"",{"type":819,"tag":117,"props":1855,"children":1856},{"style":843},[1857],{"type":839,"value":292},{"type":819,"tag":117,"props":1859,"children":1860},{"class":119,"line":135},[1861],{"type":819,"tag":117,"props":1862,"children":1863},{"emptyLinePlaceholder":297},[1864],{"type":839,"value":298},{"type":819,"tag":117,"props":1866,"children":1867},{"class":119,"line":168},[1868,1872,1877],{"type":819,"tag":117,"props":1869,"children":1870},{"style":843},[1871],{"type":839,"value":325},{"type":819,"tag":117,"props":1873,"children":1875},{"style":1874},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1876],{"type":839,"value":1494},{"type":819,"tag":117,"props":1878,"children":1879},{"style":843},[1880],{"type":839,"value":532},{"type":819,"tag":117,"props":1882,"children":1883},{"class":119,"line":180},[1884,1889],{"type":819,"tag":117,"props":1885,"children":1886},{"style":849},[1887],{"type":839,"value":1888},"  @apply absolute inset-1 pointer-events-none",{"type":819,"tag":117,"props":1890,"children":1891},{"style":843},[1892],{"type":839,"value":292},{"type":819,"tag":117,"props":1894,"children":1895},{"class":119,"line":339},[1896],{"type":819,"tag":117,"props":1897,"children":1898},{"style":843},[1899],{"type":839,"value":572},{"type":819,"tag":117,"props":1901,"children":1902},{"class":119,"line":344},[1903],{"type":819,"tag":117,"props":1904,"children":1905},{"emptyLinePlaceholder":297},[1906],{"type":839,"value":298},{"type":819,"tag":117,"props":1908,"children":1909},{"class":119,"line":350},[1910,1914,1918,1923],{"type":819,"tag":117,"props":1911,"children":1912},{"style":843},[1913],{"type":839,"value":325},{"type":819,"tag":117,"props":1915,"children":1916},{"style":1874},[1917],{"type":839,"value":1494},{"type":819,"tag":117,"props":1919,"children":1920},{"style":1874},[1921],{"type":839,"value":1922}," div",{"type":819,"tag":117,"props":1924,"children":1925},{"style":843},[1926],{"type":839,"value":532},{"type":819,"tag":117,"props":1928,"children":1929},{"class":119,"line":557},[1930,1935],{"type":819,"tag":117,"props":1931,"children":1932},{"style":849},[1933],{"type":839,"value":1934},"  @apply absolute top-0 inset-y-0 left-(--snap-x)",{"type":819,"tag":117,"props":1936,"children":1937},{"style":843},[1938],{"type":839,"value":292},{"type":819,"tag":117,"props":1940,"children":1941},{"class":119,"line":569},[1942],{"type":819,"tag":117,"props":1943,"children":1944},{"style":843},[1945],{"type":839,"value":572},{"type":819,"tag":1947,"props":1948,"children":1949},"draggable-demo",{},[],{"type":819,"tag":1951,"props":1952,"children":1961},"u-button",{"className":1953,"color":1956,"icon":1957,"target":1958,"to":1959,"variant":1960},[1954,1955],"mt-2.5","pl-0.5","neutral","i-simple-icons-github","_blank","https://github.com/astraldev/nanime/blob/main/docs/app/components/content/examples/composables/DraggableDemo.vue","link",[1962],{"type":839,"value":1963},"View on GitHub",{"type":819,"tag":787,"props":1965,"children":1966},{},[1967],{"type":839,"value":1968},"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);}",1775141234139]