local p=require(script.Parent.Parent.Parent.DevPackages.Vide)local b=require(script.Parent.Parent.Parent.DevPackages.Aether)local V=require(script.Parent.Parent.Parent.DevPackages.AetherVide)local i=require(script.Parent.Chrome)local X=p.create local g=p.source local J=p.action return{vide=p;story=function()local p=g(nil)local R=g(nil)local l=g(nil)local G=V.useFloating(R,l,{placement="\114\105\103\104\116";middleware={b.offset(5);b.shift(function()return{detectOverflowConfig={padding=5;boundary=p()};crossAxis=true}end)};whileElementsMounted=b.autoUpdate})return i({title="\083\104\105\102\116",description="\083\104\105\102\116\115 \121\111\117\114 \101\108\101\109\101\110\116 \116\111 \107\101\101\112 \105\116 \105\110 \118\105\101\119\046",goal="\083\099\114\111\108\108 \116\104\101 \099\111\110\116\097\105\110\101\114";children={(X("\083\099\114\111\108\108\105\110\103\070\114\097\109\101"))({Size=UDim2.fromScale(1,1),CanvasSize=UDim2.fromOffset(0,812),BackgroundTransparency=1;(X("\084\101\120\116\076\097\098\101\108"))({Name="\082\101\102\101\114\101\110\099\101";AnchorPoint=Vector2.new(.5,.5),Position=UDim2.fromScale(.5,.5);Size=UDim2.fromOffset(96,96),Text="\082\101\102\101\114\101\110\099\101",TextSize=16;TextColor3=Color3.new(),FontFace=Font.fromEnum(Enum.Font.GothamBold),BackgroundColor3=Color3.fromHex("\035\054\098\055\050\056\048");J(R)}),J(p)}),(X("\084\101\120\116\076\097\098\101\108"))({Name="\084\097\114\103\101\116";Position=function()return UDim2.fromOffset(G.x(),G.y())end;Size=UDim2.fromOffset(80,192),Text="\080\111\112\111\118\101\114",TextSize=16;TextColor3=Color3.fromHex("\035\102\102\102\102\102\102");FontFace=Font.fromEnum(Enum.Font.GothamBold);BackgroundColor3=Color3.fromHex("\035\101\099\052\056\057\057");(X("\085\073\080\097\100\100\105\110\103"))({PaddingLeft=UDim.new(0,4),PaddingRight=UDim.new(0,4);PaddingTop=UDim.new(0,4);PaddingBottom=UDim.new(0,4)});J(l)})}})end}
local vide = require(script.Parent.Parent.Parent.DevPackages.Vide)
local Aether = require(script.Parent.Parent.Parent.DevPackages.Aether)
local AetherVide = require(script.Parent.Parent.Parent.DevPackages.AetherVide)

local Chrome = require(script.Parent.Chrome)

local create = vide.create
local source = vide.source
local action = vide.action

return {
	vide = vide,
	story = function()
		local boundary = source(nil)
		local reference = source(nil)
		local target = source(nil)

		local floating = AetherVide.useFloating(reference, target, {
			placement = "right",
			middleware = {
				Aether.offset(5),
				Aether.shift(function()
					return {
						detectOverflowConfig = {
							padding = 5,
							boundary = boundary(),
						},
						crossAxis = true,
					}
				end),
			},
			whileElementsMounted = Aether.autoUpdate,
		})

		return Chrome {
			title = "Shift",
			description = "Shifts your element to keep it in view.",
			goal = "Scroll the container",
			children = {
				create "ScrollingFrame" {
					Size = UDim2.fromScale(1, 1),
					CanvasSize = UDim2.fromOffset(0, 812),
					BackgroundTransparency = 1,

					create "TextLabel" {
						Name = "Reference",
						AnchorPoint = Vector2.new(0.5, 0.5),
						Position = UDim2.fromScale(0.5, 0.5),
						Size = UDim2.fromOffset(96, 96),
						Text = "Reference",
						TextSize = 16,
						TextColor3 = Color3.new(),
						FontFace = Font.fromEnum(Enum.Font.GothamBold),
						BackgroundColor3 = Color3.fromHex("#6b7280"),

						action(reference),
					},

					action(boundary),
				},

				create "TextLabel" {
					Name = "Target",

					Position = function()
						return UDim2.fromOffset(floating.x(), floating.y())
					end,

					Size = UDim2.fromOffset(80, 192),
					Text = "Popover",
					TextSize = 16,
					TextColor3 = Color3.fromHex("#ffffff"),
					FontFace = Font.fromEnum(Enum.Font.GothamBold),
					BackgroundColor3 = Color3.fromHex("#ec4899"),

					create "UIPadding" {
						PaddingLeft = UDim.new(0, 4),
						PaddingRight = UDim.new(0, 4),
						PaddingTop = UDim.new(0, 4),
						PaddingBottom = UDim.new(0, 4),
					},

					action(target),
				},
			},
		}
	end,
}
